• In the previous article, we had seen how to Display All Posts on a single page
  • It displays all posts on a single page but what if we want to display all posts from any specific category only?
  • Normally we need to display all posts from certain category. Say for example you have three different categories such as Mobile, Laptops and Printers and when user selects any specific category from that, you want to list all the posts from that category only.
  • Fortunately WordPress provides great customization options to meet our requirements.
  • We can easily do it without writing large code block.
  • This article focuses on displaying all posts from a specific category in easy to follow steps.
  • There are three different ways to perform this task:
  1. Using category as Menu item
  2. Using plugin
  3. Using  Custom Query Post loop
1.     Using category as Menu item
  • This is the easiest way of doing so as it does not involve any programming.
  • You need not to write even a single line of code.
  • All that you need to do is simply add your categories into navigation menu by following the steps given below and that’s it.
  1. Go to your dashboard and login if required.
  2. From the left hand side panel click on posts and select categories and add new category. You can read our post on how to add category if you don’t know. If you have already done it, skip this step and move on next step.
  3. Click on Appearance >> Menus option from the left side panel on your dashboard. It will show you the following page. If you don’t know how to create menu, please read our article on creating menu. It will show you the menu page as shown below.
  4. Follow the steps given bellow:
    1. Select menu from the dropdown list and press select button
    2. Click on category tab and check category or categories you want to add to the menu.
    3. Click on add to menu button. It will display your category at the right side panel
    4. Click on Save menu to save changes.
    5. Preview your site ad click on category item and it will show all the posts from that category only.

 

menu

  1. Using Plugin:
  • There are number of plugins available to add pagination.
  • You can search for appropriate plugin to WordPress’s official website.
  • Some examples are WP-Paginate, TW Pagination, Advanced Post Pagination etc
  • Here we are going to look at WP-Paginate

WP-Paginate

  • It is a simple and flexible pagination plugin which provides users with better navigation to WordPress site.
  • First you need to install and activate the WP-Paginate plugin
  • After installing, go to the plugins option under your WordPress DashBoard and click on installed plugins It will show a list of all installed plugins.
  • Find out WP-Paginate plugin and click on Activate
  • Configure the WP-Paginate settings, if necessary, from the WP-Paginate option in the Settings menu
  • It will show you similar to the below image.

WP-paginate

  • Here you can configure pagination label, text for previous and next page, page range etc.
  • When done click on Save Changes button

 Implement

  • To use it open the file you wish to add pagination such as index.php or category.php or function.php
  • Copy and paste the following code at appropriate location, usually below the post loop.
<?php if(function_exists('wp_paginate')) {
     wp_paginate();
} ?>
  • It will display pagination like the below image.
  • For more usage example you can visit its official page.
WP-pagination3.Using  Custom Query Post loop
  • This method involves writing our own custom query post loop instead of using WordPress’s default query post loop and implementing our own pagination function.
  • It’s a just three step process that we need to follow to add pagination. So let’s start
  1. Creating pagination function
  2. Calling function
  3. Appling CSS style formatting
1.      Creating pagination function
  • Copy paste the following custom query and pagination function into your functions.php file.
<?php
/*
*  function to set custom query args
*/
function custom_query_args($cat_num,$paged)
{
    $custom_args  = array(
    'post_type' => 'post',
    'cat' =>$cat_num,
    'posts_per_page' => 5,
    'paged' => $paged
   );
      // create a new instance of WP_Query
   $custom_query = new WP_Query( $custom_args  );
   return $custom_query;
}
  • The custom_query_args() function is used for setting arguments for our WordPress query.
  • It has two arguments one is the category id for which we want to display all post and second is the paged value.
  • Inside the custom argument array we have set the following arguments:
  1. Post type: to set post type such as post or image or video etc.
  2. Category_id : to set category id for the respective category
  3. Post per page: to display total post per page
  4. Paged: to set page value.
  • For complete argument list, please visit WordPress official website.
  • Then after we have created a new WP_Query() passing the custom argument array and returned it from where it was called.
/*
* pagination function start
*
*/
function kriesi_pagination($pages = '', $range = 2)
{
   $showitems = ($range * 2)+1;
   global $paged;
   if(empty($paged)) $paged = 1;

   if($pages == '')
   {
      global $wp_query;
      $pages = $wp_query->max_num_pages;
      if(!$pages)
      {
        $pages = 1;
      }
   }

  if(1 != $pages)
  {
     echo "<div class='pagination'>";
     if($paged > 2 && $paged > $range+1 && $showitems < $pages)
       echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
    if($paged > 1 && $showitems < $pages)
      echo "<a href='".get_pagenum_link($paged -1)."'>&lsaquo;</a>";
 
   for ($i=1; $i <= $pages; $i++)
   {
     if (1 != $pages&&(!($i >= $paged+$range+1||$i <= $paged-$range-1)
       ||$pages <= $showitems ))
     {
       echo($paged == $i)? "<span class='current'>".$i."</span>":"
       <a href='".get_pagenum_link($i)."'class='inactive'>".$i."</a>";
     }
   }
 
   if ($paged < $pages &&$showitems < $pages) 
   echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
if($paged < $pages-1 && $paged+$range-1 <$pages && $showitems<$pages)
 echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
   echo "</div>\n";
 }
}
/* pagination function over */
2. Calling function
  • Final step is to actually call pagination function from the page where you wish to display pagination.
  • At very first step, we have called get_query_var() function to get current page number and if not present it will be set to 1 and set category id to display post from that specific category only.
  • Then we have called custom_query_args() to set argument for our custom query loop.
  • It will return new instance of WP_Quey object with configuration as per our argument array.
  • Now this custom WP_Query object is used to loop through the post and display their titles as as excerpt as clickable links.
  • At the end of the post loop we have called our pagination function to implement post pagination.
  • Finally, we have reset our WP_POSTDATA to clear custom configuration so that next time when we loop through the post, default configuration will be used.
<?php  // set up or arguments for our custom query
 
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$cat_id=8;
$custom_query = custom_query_args($cat_id,$paged);  ?>
 
<?php if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
    <article>
      <h1><?php echo the_title(); ?></h1>
      <div class="excerpt">
         <?php the_excerpt(); ?>
     </div>
   </article>
<?php endwhile; ?>
 
<!-- pagination here -->
<?php if (function_exists(kriesi_pagination)) {
    kriesi_pagination($custom_query->max_num_pages,"",$paged);
  }
?>
     <!-- reset postdata -->
<?php wp_reset_postdata(); ?>
 
<?php else: ?>
     <article>
        <h1>oops!..</h1>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     </article>
<?php endif; ?>

3. Appling CSS style formatting

  • To apply proper formatting to our pagination so that it look more decent, copy past the following CSS style to the style.css file of your theme.
  • You can configure it as per your choice.
/* ============================================================
  CUSTOM PAGINATION – CSS STYLESHEET 
============================================================ */
.pagination {
  clear:both;
  padding:20px 0;
  position:relative;
  font-size:11px;
  line-height:13px;
}
.pagination span, .pagination a {
  display:block;
  float:left;
  margin: 2px 2px 2px 0;
  padding:6px 9px 5px 9px;
  text-decoration:none;
  width:auto;
  color:#fff;
  background: #555;
}
.pagination a:hover{
  color:#fff;
  background: #3279BB;
}
.pagination .current{
  padding:6px 9px 5px 9px;
  background: #3279BB;
  color:#fff;
}