Sunday, February 3, 2013

How to: Display the Posts of a Single Category on a WordPress Page (With Pagination)


As with many themes out there (including this one) the main navigation will include all the WordPress pages you’ve created by default: About me, Contact, Downloads, etc. To most people, WordPress pages act as a blank canvas for their content, namely text and images, but what if you wanted your WordPress pages to do more than just display content? What if you wanted a page to display all the posts of a single category on your blog? The ‘Design’ link in the navigation at the top of this site does just that – it displays all my posts under the ‘Design’ category.
First things first, you need to understand what a page template is (Click this link to learn more). Or you can just skip the reading and try to understand the last bit of code in this post yourself ;) .

With that out of the way, we can move onto the code that pulls in X number of posts from a single category:

[php]<?php $recent = new WP_Query("cat=15&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a>
<?php the_excerpt(); ?>
<?php endwhile; ?>[/php]
This bit of code shows our recent posts from a specific category.
  • Cat=15 is the category ID number
  • Showposts=10 is the number of recent posts you want to display on the page
Not too difficult right?

What if you wanted to display all the posts from your single category with pagination on each page?

[php] <?php $paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1;
query_posts(‘cat=14&paged=’.$paged.’&post_per_page=9′.get_option(‘posts_per_page’)); ?>[/php]
This is the code that makes the magic happen. Again, you change the “cat=14″ ID number to the category you want to feature and the “post_per_page=9″ part should be pretty self explanatory.

So how do you implement this code into your page (template)?

I’m not going to explain to you what each part of code in the page template does (you should already know that). But it should be clear (just by looking at the code below) where you should add the function that pulls in all your posts from your specific category and adds pagination. I’ll give you a clue: It’s above the legendary line: “< ?php while (have_posts()) : the_post(); ?>”
[php]<?php
/*
Template Name: Page that Displays all posts in the Design Category
*/
?>
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php $paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1;
query_posts(‘cat=14&paged=’.$paged.’&post_per_page=9′.get_option(‘posts_per_page’)); ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="post_container">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a>
<?php the_content_limit(get_theme_mod(‘limit_char’)); ?>
</div><!–end of post_container–>
<?php endwhile; ?>
<div class="pagination">
<?php if (function_exists(‘wp_pagenavi’)) wp_pagenavi(); else { ?>
<?php previous_posts_link(__(‘Newer Entries’)) ?>
<?php next_posts_link(__(‘Older Entries’)) ?>
<?php } ?>
</div> <!–end .pagination–>
<?php else : ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>[/php]
And there you have it folks – No plugins involved, just pure, hard code :)

0 comments:

Post a Comment