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 on 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 themes files are your blogs 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 it’s 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.
WordPress WordPress GuideIf you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Tagged with WordPress, WordPress Guide
Related Posts
2 Responses to “WordPress Post Navigation Looks Bad On Single Pages”
Discussion Area - Leave a Comment
If you have a question about your blog please leave a link to it. Please don't ask questions like "Why don't my blog work right?" and expect an answer.Two links or less are welcome, any more and your comment will be spammed! Nofollow has been disabled, all comments are moderated and will not appear until approved. Please submit only once.
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Or just copy the example below and change your details.
Example - <a href="http://www.YourSite.com">Title Of Site</a>











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 on the WordPress default theme but can happen on other …
Hi Jeff,
My theme is based on the default theme and this annoyed the hell out of me in the beginning. I came up with a different solution. What I did was two things:
1. Make the font-size smaller.
2. Force the left link to stay on the left half of the screen and the right side to stay on the right (with a break between them)
I feel this is much nicer than the default. For an example, see my Simple CSS Text Boxes post and look at the navigation links.
I did this by editing the style.css for my theme and changing the the alignleft class to:
.alignleft {float:left; font-size:.75em; width:230px; text-align:left; height:22px;}
and the alignright class to:
.alignright {float:right; font-size:.75em; width:230px; text-align:right; height:22px;}
Works really well for me. I found you via the Bumpzee WordPress Designers group (which I found through Dane). You got some very interesting stuff here!