How to Display (Navigation) Links to Previous and Next Posts on your Blog Entry (WordPress)

Many WordPress themes by default do not have the previous post and next post buttons on the single post page, that is when you open a particular post from the main WordPress blog. If I like a particular post that I come across, its very likely that I’ll dig through the rest of the posts on that blog. And for that, I don’t like to load the blog-home-page each time after reading a blog entry.So, previous and next post navigation-buttons are quite an indispensible features of a blog that I love to see on whatever blog I read.

A template file of a WordPress blog is basically a PHP file and the way your single post page displays is determined by a file called single.php which is present in your \wp-content\themes\yourtheme\ directory. So, you get an idea that for adding the previous and next post links (or buttons, whatever you choose) , we’ll have to edit this file called single.php

Now let’s see how we do it. Take a look at how a most basic single.php file can look like

<!–single.php–>

<!–This is the loop that checks if there are any posts to display. If there’s no post a custom error message is displayed.Else the requested post shows up!–>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!–This is the navigation that we intend to add to a blog entry. As this is placed above the title of my post (see the next piece of code) , the previous and next buttons appear above the title of my blog post–>
<p><?php previous_post_link(‘« %link |’) ?> <a href=”<?php bloginfo(‘url’); ?>”>Home</a> <?php next_post_link(‘| %link »’) ?></p>

<!–This shows the post title–>
<h1 id=”post-<?php the_ID(); ?>”><a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a></h1>

<!–This displays the author name below the title of the post–>
<p><b>By <?php the_author(); ?></b> | <?php the_time(‘F j, Y’); ?></p>

<!–This part shows the main blog entry–>
<div class=”postspace2″>
</div>
<!–content with more link–>
<?php the_content(‘<p class=”serif”>Read the rest of this entry »</p>’); ?>
<!–for paginate posts–>

<!–This part is the footer of the blog-post that shows the categories and comments–>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<p><b>Topics:</b> <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>

<div class=”postspace”>
</div>
<!–almost all options over and out–>

The text inside <!– –> in the code are comments that only describe what a piece of code does. I have elaborated them for your convenience, here. They may not be exactly the same in your template.

So what you basically need to add navigation (like on my blog’s single blog entry) is this piece of code:

<p><?php previous_post_link(‘« %link |’) ?> <a href=”<?php bloginfo(‘url’); ?>”>Home</a> <?php next_post_link(‘| %link »’) ?></p>

<?php previous_post_link(‘« %link |’) ?> : This part shows the name of the previous post, hyperlinked to it. The | character after %link shows as | to separate this link from the rest of the links we are going to add. That is link to the home page and to the next post.

<a href=”<?php bloginfo(‘url’); ?>”>Home</a> : This part shows the text Home linked to the home page

<?php next_post_link(‘| %link »’) ?> : This part shows the name of the next post, hyperlinked to it after the | symbol.

This is a simple and very useful navigational aid. But thats not all about it. Only a few people know that this is a good way to improve your internal linking for SEO purposes. Your post will always link to two posts and the homepage with the very appropriate anchor text, that is the title itself.

So, if you don’t have this feature on your blog’s single blog entry page, go ahead, add it as shown above and reap the benefits 😉 I hope this PHP tutorial helps you.

Subscribe to Inspirit’s RSS feed for receiving any future updates right in your e-mail.