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.
Similar Posts:
- Specify WordPress Navigation Page Links
- Customize WordPress Header Navigation Bar
- How To Add AdSense Ads To A WordPress Blog
- Adding AdSense Code Into A WordPress Theme
- Edit Modify Or Change WordPress Links
If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.
Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!
Comments
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!
Reply
Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.