Adjacent Post Links Styling For WordPress

Providing adjacent post links on single post template helps visitors to stay on your blog. While wordpress document on this seems to me very dated, and not enough information for the styling it used. Here is my piece of code about showing previous and next post link at the bottom of a post.

<div class="navigation" style ="overflow: auto; width: 100%">
                <div style="float:left;  width: 50%;">
                    <?php previous_post_link(); ?>
                </div>
                <div  style="float:left; text-align:right; width: 50%;">
                    <?php next_post_link();?>
                </div>
     </div> <!-- end navigation -->

And here is a screen shot of a post.

Adjacent Links

Adjacent Links


A couple of points:

1.Use previous_post_link and next_post_link() instead of previous_post() and next_post() because the later version is deprecated. As it is stated in the article

2.Styles about ‘navigation’,’alignleft’,’alignright’ are not provided by the article, so above is my version with hand coded styles. It is important for wrapper to clear floats as the length of two adjacent post titles could be very different.

3.The container provided a wrapper of two columns which are two direction links.

4.Keep each column to 50% of total width. If a title is extremely long, the columns expand within its own column.

5.The template you can use this code is single.php of your theme

Tags:

This entry was posted on Wednesday, August 25th, 2010 at 3:01 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

*