WordPress Post Navigation Looks Bad On Single Pages

You may have seen it on some blogs and maybe even your own: The navigation links to next and previous posts appear to be jumbled or even wrapped around each other looking terrible. This is usually in the WordPress default theme but can happen on other themes as well. This simple WordPress Guide will make your next and previous navigation links look much better in single posts.

To check your blog open a post in the loop that has posts before and after it. Here is a sample of good navigation links shown on the single post page or single.php:

If the links don’t look like they do in the above image the fix is quite simple. Open the single page template for your theme and find the below code. Simply place a break between the previous and next posts as shown in red text below. It may also be necessary to place another break at the very end of the code to push the post content down away from the navigation links. (not shown)

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”navigation”>
<div class=”alignleft”><?php previous_post_link(‘« %link’) ?></div><br>
<div class=”alignright”><?php next_post_link(‘%link »’) ?></div>
</div>

In order to edit your themes template files from the WordPress dashboard the proper file permissions(CHMOD) must be set in your blogs hosting account. Usually changing them to 666 is good enough to be able to edit them. The proper path to edit the theme’s files are your blog’s directory, the wp-content folder, themes, your theme. In that folder, you should at least CHMOD the single.php file or the entire folder if you want to change other files.

blog/wp-content/themes/CurrentTheme

At the WordPress dashboard go to Presentation, Theme Editor. Look on the right for single.php or the Single Post file. Click it, make your changes and click Update File on the bottom right. If you are uncomfortable editing these files and don’t want to render your blog useless you may want to make a backup copy of any file before you edit it.

To make a backup, copy the contents of the file and paste it into a text file on your computer and save it. Then should things go wrong just paste the original file back into the Theme Editor to restore its original state.

If you want me to customize or fix a specific problem with your blog Click Here to send me an email, you will find my fees are very reasonable.