The Artistic Outlaw

I’ve been working with WordPress off and on for the past year and one thing that really bothers me—there are others, but for today just this one—is the fact that the previous and next page links that appear on the index, archive and search results pages still display even if there are no other pages to be navigated.

This would not normally be a problem, unless you want to wrap the links with some css styling. Out of the box with Kubrick the links don’t show, but if you put any exterior css styling on them it will still show even when the actual previous or next links don’t.

With me so far?

This is a before and after shot of the problem, the top two images are what occurs when a style has been applied outside the links, as you can see in the top-right image the box around the links is still visible yet empty, this should not be showing. The bottom shows what it will look like once we’re done fixing it, hence as seen in the bottom-right image the empty div is no longer displaying.

To combat this minor problem we need to somehow get WordPress to hide the whole navigation div when there are no additional pages, and show it only when there are. Even if you don’t use a background or exterior styles wrapped around the links, it’s a nice attention to detail type solution.

In order to do this as simply as possible, which is how I roll. First I broke the navigation div into it’s own template file, I call it main_nav.php and it contains the following;

<div class="navbar cleaner">
	<p class="shift"><?php posts_nav_link('','','older articles') ?></p>
	<p class="shaft"><?php posts_nav_link('','newer articles','') ?></p>
</div>

This is a little different than the default Kubrick default skin version of the same code, but again, I needed to simplify it. Here’s what your’s probably looks like;

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
</div>

As you can see mine is a bit cleaner.

Now that we have the navigation div in it’s own template we can include it in any other template we want/need and save ourselves from having to update/alter the code for that reused bit more than once.

To include the main_nav.php template in another template I use the following line;

<?php include (TEMPLATEPATH . '/main_nav.php'); ?>

I put this anywhere that the orignal navigation div lives within the templates. This is usually found in the index.php, archive.php and search.php template files.

To recap, we moved the navigation div into it’s own template file, and included that new template within other templates in order to create a better maintainable situation and to simplify our templates. But, we still need to tell WordPress to only show the navigation div when there is more than one page of results. In order to do this we’ll need a little PHP magic.

Basically, what we need to do is check to see if there is more than one page of results, and if there is show the navigation div, or if not show nothing.

In the main_nav.php template file, above the navigation div we are going to put the following code;

<?php
$max_num_pages = $wp_query->max_num_pages;
if($max_num_pages > 1) {
?>

This queries the database, to get the max number of pages available, and then asks if $max_num_pages (the returned result from the query) is less than 1 page.

Now we have to close this if statement or we will get an error, when we check our page. To do that simply place the following code below the navigation div in the main_nav.php template file.

<?php }else{ return } ?>

This closes the if statement and tells the page to just return and load nothing if the if condition is not met. The else part is not actually necessary for this to work, but it is a more complete solution for authorship and consistency sake.

Your main_nav.php template file should now look like this;

<?php
$max_num_pages = $wp_query->max_num_pages;
if($max_num_pages > 1) {
?>
<div class="navbar cleaner">
	<p class="shift"><?php posts_nav_link('','','older articles') ?></p>
	<p class="shaft"><?php posts_nav_link('','newer articles','') ?></p>
</div>
<?php }else{ return; } ?>

And that’s it, nothing more to do. Just save your edited files and revel in your new found ability to style and hide the previous and next links to your hearts content.

This was something very simple, yet seemingly overlooked in WordPress and the community itself.

Perhaps it’s not necessary 95% of the time, but I do hope that it helps someone pay a little closer attention to detail the next time they build a WordPress based web-site, or theme.