How can you customize the look and feel of WordPress category page? By default, WordPress category pages show list of posts in that category.

Luckily, there is a simple method that let you edit and customize the category just like you can do with normal page or post. We are going to do that in this video.

Here are the steps by steps:

1. Find the category’s ID
2. Find your current theme
3. Create category-ID.php file in your theme’s folder
4. Install display post shortcode plugin
5. Create the content for your category in a draft post
6. Display the draft post in your category

As you can see, we are going to create a draft post and then display the post content in the category using shortcode. Anyone can do this within a few minutes.

I created a post showing how to create custom category page design with visual composer here:

However, you can apply this method to any other page builder such as elementor, gutenberg, siteorigin…

Nguồn: https://aatapaatalu.net/

Xem thêm bài viết: https://aatapaatalu.net/category/cong-nghe

admin

6 thoughts on “How To Design WordPress Category Page Using Elementor, Gutenberg, Visual Composer….”

  1. Im only receiving the code on category page: [dislpay-posts include_content="true" include_title="false" wrapper="div" post_status="draft" id=1058] How can I solve it? Also on top of the page it still shows text – Category news. I use Salient theme.

  2. Thank you!!! It works flawlessly!! I only have 2 questions left: 1. Does Google index the content normally? 2.- The "Recent Posts Widget With Thumbnails" plugin is not displayed. Can I do something about it?

  3. Hi, I very appreciate this method to customize the category page in WordPress. For Woocommerce I found that it is possible to do it with the payed plugin anywhere elementor pro. Can you please let me know how to handle your method using oceanwp theme? There is no single.php – there is a singular.php but the structure is much different. I don't know which piece of code has to be removed after making a copy of singular.php or index.php.
    Here you can see the content of my original oceanwp singular.php file and below of that that the index.php

    <?php

    /**

    * The template for displaying all pages, single posts and attachments

    *

    * This is a new template file that WordPress introduced in

    * version 4.3.

    *

    * @package OceanWP WordPress theme

    */

    get_header(); ?>

    <?php do_action( 'ocean_before_content_wrap' ); ?>

    <div id="content-wrap" class="container clr">

    <?php do_action( 'ocean_before_primary' ); ?>

    <div id="primary" class="content-area clr">

    <?php do_action( 'ocean_before_content' ); ?>

    <div id="content" class="site-content clr">

    <?php do_action( 'ocean_before_content_inner' ); ?>

    <?php

    // Elementor `single` location

    if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {

    // Start loop

    while ( have_posts() ) : the_post();

    // EDD Page

    if ( is_singular( 'download') ) {

    get_template_part( 'partials/edd/single' );

    }

    // Single Page

    elseif ( is_singular( 'page' ) ) {

    get_template_part( 'partials/page/layout' );

    }

    // Library post types

    elseif ( is_singular( 'oceanwp_library' )

    || is_singular( 'elementor_library' ) ) {

    get_template_part( 'partials/library/layout' );

    }

    // All other post types.

    else {

    get_template_part( 'partials/single/layout', get_post_type() );

    }

    endwhile;

    } ?>

    <?php do_action( 'ocean_after_content_inner' ); ?>

    </div><!– #content –>

    <?php do_action( 'ocean_after_content' ); ?>

    </div><!– #primary –>

    <?php do_action( 'ocean_after_primary' ); ?>

    </div><!– #content-wrap –>

    <?php do_action( 'ocean_after_content_wrap' ); ?>

    <?php get_footer(); ?>

    I N D E X . PHP

    <?php

    /**

    * The main template file.

    *

    * This is the most generic template file in a WordPress theme and one of the

    * two required files for a theme (the other being style.css).

    * It is used to display a page when nothing more specific matches a query.

    * For example, it puts together the home page when no home.php file exists.

    *

    * Learn more: http://codex.wordpress.org/Template_Hierarchy

    *

    * @package OceanWP WordPress theme

    */

    get_header(); ?>

    <?php do_action( 'ocean_before_content_wrap' ); ?>

    <div id="content-wrap" class="container clr">

    <?php do_action( 'ocean_before_primary' ); ?>

    <div id="primary" class="content-area clr">

    <?php do_action( 'ocean_before_content' ); ?>

    <div id="content" class="site-content clr">

    <?php do_action( 'ocean_before_content_inner' ); ?>

    <?php

    // Check if posts exist

    if ( have_posts() ) :

    // Elementor `archive` location

    if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {

    // Add Support For EDD Archive Pages

    if ( is_post_type_archive( 'download' ) || is_tax( array( 'download_category', 'download_tag' ) ) ) {

    do_action( 'ocean_before_archive_download' ); ?>

    <div class="oceanwp-row <?php echo esc_attr( oceanwp_edd_loop_classes() ); ?>">

    <?php

    // Archive Post Count for clearing float

    $oceanwp_count = 0;

    while ( have_posts() ) : the_post();

    $oceanwp_count++;

    get_template_part( 'partials/edd/archive' );

    if ( oceanwp_edd_entry_columns() == $oceanwp_count ) {

    $oceanwp_count=0;

    }

    endwhile; ?>

    </div>

    <?php

    do_action( 'ocean_after_archive_download' );

    } else { ?>

    <div id="blog-entries" class="<?php oceanwp_blog_wrap_classes(); ?>">

    <?php

    // Define counter for clearing floats

    $oceanwp_count = 0; ?>

    <?php

    // Loop through posts

    while ( have_posts() ) : the_post(); ?>

    <?php

    // Add to counter

    $oceanwp_count++; ?>

    <?php

    // Get post entry content

    get_template_part( 'partials/entry/layout', get_post_type() ); ?>

    <?php

    // Reset counter to clear floats

    if ( oceanwp_blog_entry_columns() == $oceanwp_count ) {

    $oceanwp_count=0;

    } ?>

    <?php endwhile; ?>

    </div><!– #blog-entries –>

    <?php

    // Display post pagination

    oceanwp_blog_pagination();

    }

    } ?>

    <?php

    // No posts found

    else : ?>

    <?php

    // Display no post found notice

    get_template_part( 'partials/none' ); ?>

    <?php endif; ?>

    <?php do_action( 'ocean_after_content_inner' ); ?>

    </div><!– #content –>

    <?php do_action( 'ocean_after_content' ); ?>

    </div><!– #primary –>

    <?php do_action( 'ocean_after_primary' ); ?>

    </div><!– #content-wrap –>

    <?php do_action( 'ocean_after_content_wrap' ); ?>

    <?php get_footer(); ?>

Leave a Reply

Your email address will not be published. Required fields are marked *