First off, here’s the HTML for the navigation:

<div class="navigation">
<div class="alignleft"><!-- Previous Post Link --></div>
<div class="alignright"><!-- Next Post Link --></div>
</div>

The code we’ll need to show the Next and Previous post links is:

<?php previous_post_link(''); ?>
<?php next_post_link(''); ?>

Now, let’s customize the PHP to show our relevant Posts from that specific category only.

<?php previous_post_link('%link', 'Previous post', TRUE); ?>
<?php next_post_link('%link', 'Next post', TRUE); ?>

Here’s an explanation of the above code.

1. %link – This will show the link for the previously or recently published Post from the one being viewed.
2. Previous post/Next post – This will be the anchor text for the respective links.
3. TRUE – This will tell the code to only use the same category as the Post being viewed to show the relevant links.

Here’s the final code:

<div class="navigation">
<div class="alignleft"><?php previous_post_link('%link', 'Previous post', TRUE); ?></div>
<div class="alignright"><?php next_post_link('%link', 'Next post', TRUE); ?></div>
</div>

You can use the CSS classes to format the output however you like. You can see an example of this type of navigation at the very bottom of this post.

If you found this tutorial helpful please consider tweeting or liking it! Do add your comment below on how you’ve used it!

Here’s a walk-through of how I developed my Page Template to show posts from a Custom Post Type.

1. First we set up the header to query the Custom Post Type. This tells the Page Template to query the relevant type, in this case the “Portfolio” post type.

Here’s the code for that:

<?php get_header(); query_posts('post_type=portfolio&showposts=-1') ?>

2. Then we set up the HTML to show the posts from the Portfolio post type. Here’s what my HTML looks like:

<div class="portfolio-container">

<h1>Page Template Title</h1>
<div id="portfolio-container">
<ul id="portfolio-filter">
<li><a href="#">All</a></li>
<li><a href="#"><!-- Portfolio Taxonomy/Category Loop Comes Here --></a></li>
</ul>

<ul id="portfolio">
<!-- Start Post Loop -->
<li><!-- Post Thumbnail Comes Here -->
<h3><a href="Post Link Comes Here">Post Title Comes Here</a></h3>
</li>
<!-- Finish Post Loop -->
</ul>

</div><!-- Portfolio Container -->

</div><!-- Post Class -->

Now let’s add in all the fun stuff!

3. First we set up the main container with the default WordPress generated post class tag and add in the Title tag as well:

<div <?php post_class('portfolio-page taxonomy-portfolio') ?>>
<h1><?php the_title(); ?> <?php edit_post_link('Edit', ' | ', ''); ?></h1>

4. Next, since we’re using a sortable technique here to filter the Portfolio projects themselves (that’s another tutorial for another day) I’m going to leave the “All” as a placeholder for showing all the taxonomies and the rest will display by using the foreach command. Explanation for each line is commented in the code:

<ul id="portfolio-filter">

<li><a href="#">All</a></li>

<?php
// Create an array and assign the projects taxonomy to it
$args = array( 'taxonomy' => 'projects' );
// Call the categories from this array
$categories=get_categories($args);
// Now, loop through them and...
foreach ($categories as $category) {
//...display each categories name
echo '<li><a href="#">'.$category->name;
echo '</a></li>';
// Fin.
} ?>

</ul>

5. Now, that our taxonomies are displaying up above, let’s display the actual content from this Custom Post Type. Since it’s a Page Template, I want to just show the “featured image” and the title of the Post. The code for that looks like this:

<ul id="portfolio">

<!-- Start the loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<li>
<!-- Since I want to show the featured image, check if it's available -->
<?php if (has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>" rel="nofollow" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail('portfolio-image', array( 'title' => ''.get_the_title().'' ) ); ?></a>
<?php } ?>
<!-- Next we show the title of the Post -->
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></h3>
</li>
<!-- End the Loop -->
<?php endwhile; endif; // End Portfolio ?>
</ul>

<!-- Adding the closing div and get_footer to close out the template -->
</div><!-- Portfolio Container -->
</div>

<?php get_footer(); ?>

Almost done…

6. You might want to add this to your functions.php if you want to use the above code in your Page Template:

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio' ),
'singular_name' => __( 'Portfolio' ),
'add_new' => _x('Add New Project', 'portfolio item'),
'add_new_item' => __('New Portfolio Project'),
'edit_item' => __('Edit Portfolio Project'),
'new_item' => __('New Portfolio Project'),
'view_item' => __('View Portfolio Project'),
'search_items' => __('Search Your Portfolio'),
'not_found' =>  __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
),
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => array('slug' => 'portfolio'),
'capability_type' => 'post',
'supports' => array('title','editor','thumbnail','comments','excerpt'),
'taxonomies' => array( 'category ')
)
);
}

register_taxonomy("projects", array("portfolio"), array("hierarchical" => true, "label" => "Project Category", "singular_label" => "Category: ", "rewrite" => true));

Could you just give me the final code already?! (the filterable action needs some additional jQuery and magic, which will probably be shown in another tutorial)

Here’s the final Page Template code:

<?php
/**
* @package WordPress
* @subpackage Your Theme Name
*/
/*
Template Name: Portfolio
*/
?>

<?php get_header(); query_posts('post_type=portfolio&showposts=-1') ?>

<div <?php post_class('portfolio-page taxonomy-portfolio') ?>>

<h1><?php the_title(); ?> <?php edit_post_link('Edit', ' | ', ''); ?></h1>
<div id="portfolio-container">

<ul id="portfolio-filter">
<li><a href="#">All</a></li>
<?php
$args = array( 'taxonomy' => 'projects' );
$categories=get_categories($args);
foreach ($categories as $category) {
echo '<li><a href="#">'.$category->name;
echo '</a></li>';
} ?>
</ul>

<ul id="portfolio">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li><?php if (has_post_thumbnail() ) { ?><a href="<?php the_permalink() ?>" rel="nofollow" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail('portfolio-image', array( 'title' => ''.get_the_title().'' ) ); ?></a><?php } ?><h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></h3>
</li>
<?php endwhile; endif; // End Portfolio ?>
</ul>

</div><!-- Portfolio Container -->

</div>

<?php get_footer(); ?>

Here’s a working example of the template in my Craft WordPress theme.

If you found this tutorial helpful please leave a comment and let me know how you’ve used it. A tweet or like would be just as awesome, thanks!