Creating a custom category page with pagination

Question

The past week I've been trying to figure it out on creating a custom category page with pagination. I've tried in so many ways but I cant get the pagination right. If anyone of you can help.

What I actually wanted to do is in my wordpress theme I wanted to create a custom template that displays all the category that has the same name as the page name.

EXAMPLE

I have created a page called 'php' with template set to the template I was trying to build. And when I click that page I wanted to show all the post that belong to 'php' category.

Here the code sample...

<?php
/**
 * Template Name: Category Temeplate
 *
 */

get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
$category = get_post();
$category = $category->post_title;

$query = new WP_Query( array( 
'category_name' => $category,
'order' => 'asc',
'post_type' => 'post',
'post_status' => 'publish',
));
?>
<?php 
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>

<?php endwhile; ?>
<?php the_paging_nav(); ?>
<?php
}
?>

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

<?php get_footer(); ?>

Answer 1

You have a few issues here

• The following piece of code is wrong and unnecessary

  $category = get_post();
  $category = $category->post_title;
  

  The current page object is saved in get_queried_object(), so you can use this function to get your post title. Also, post_title is not the correct property to use here. You want to look at the post slug which is saved in the post_name property. The category_name parameter excepts the category slug, not the name. The category_name parameter, in my opinion, is wrongly named. It is like giving a girl a boys name and then expect others to know that the person is question is a girl based on name.

• A bit off the topic here, but do not mix your syntax. Choose one syntax, and stick with it. Because curlies is the easiest to debug and mostly supported by code editors, use them. Also, properly indent your code, it is easier to read and to debug

• You need actually set pagination before you can use it. For that you need to use the paged parameter. I'm not going to go into that, as this has been handled plenty times on this site.

• the_paging_nav() is not a core function, so you would need to contact the author of the code to find out how the code should be used with custom queries

Something like the following should work

<?php
/**
 * Template Name: Category Temeplate
 *
 */

get_header(); ?>

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

        <?php
        $current_page = get_queried_object();
        $category     = $current_page->post_name;

        $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
        $query = new WP_Query( 
            array(
                '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>

                <?php
            }

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

            wp_reset_postdata();
        }
        ?>

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

<?php get_footer(); ?>