If you are creating a new theme or developing WordPress website from scratch then there will be times when you will feel the nee to know how to create a custom category page with pagination.

Category pages shows filtered data or posts according to the category. If you are making a blog or something similar then these are most important pages in your website.

I am going to tell you, how to create a custom category page with pagination.

Have a look at the code below. Copy the code and paste it in you category.php file. Now upload it to your theme. If you go to category page section after doing so, you will find it working like a charm.

Go through this code and after this code, I will tell you how this code worked.

 * Template Name: Category Temeplate

get_header(); /* includes wordpress header  */   

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        $current_page = get_queried_object();
        $category     = $current_page->post_name;

        $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
        $query = new WP_Query( 
                'paged'         => $paged, 
                'category_name' => $category,
                'order'         => 'asc',
                'post_type'     => 'post',
                'post_status'   => 'publish',

        if ($query->have_posts()) {
               while ($query->have_posts()) { 
               $query->the_post(); ?>

                <article id="post-<?php the_ID(); ?>">
                    <header class="entry-header">
                        <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div><!-- .entry-content -->
                </article><!-- #post-## --><hr>


            // next_posts_link() usage with max_num_pages
            next_posts_link( 'Older Entries', $query->max_num_pages );
            previous_posts_link( 'Newer Entries' );


    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?>

How this code worked?

1: get_header(); : This function includes the WordPress header in the page.
2: get_footer(); : This function includes the WordPress footer in the page.
3: get_queried_object(); : This function fetch all the data which is present as a query variables or in url or WordPress query and store it in $current_page.
4: $current_page->post_name; : This gets category name.
5: $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; : This line sets the paged variable for pagination.
6: $query = new WP_Query(
'paged' => $paged,
'category_name' => $category,
'order' => 'asc',
'post_type' => 'post',
'post_status' => 'publish',
: This queries with the help of WordPress with given arguments and store data in $query.
7: if ($query->have_posts()) {
while ($query->have_posts()) {
: With this we loop through every post.
8: next_posts_link( 'Older Entries', $query->max_num_pages );
previous_posts_link( 'Newer Entries' );
: This code snippet give the pagination in the form of previous and next.
9: wp_reset_postdata(); : Finally resetting post data to free up some memory and reduce it’s usage.

Sahil Ahlawat

I am a Sr. Web Developer passionate about blogging and teaching. When I am not coding or writing blogs, I prefer traveling (Which I like most). I am also doing a bit or research on Indian Startups now a days.

Leave a Reply

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