Advanced styling of the prev/next post links

when you use the ‘previous/next post’ navigation in single posts, you will have noticed that these links appear empty when there is no previous or next post, as for the latest and the first article.

to keep your page design and to style these occurences by showing a special image or text, you can make use of the virtually undocumented wordpress function ‘get_adjacent_post()’.

see this screenshot of the navigation in a single post page:

prev_next_link

the example below is done for the default theme, and will show a greyed-out text in the place of the links.

<div class="navigation">
<div class="alignleft">
<?php if(get_adjacent_post(false, '', true)) { echo 'Previous older article: '; previous_post_link('%link'); }
else { echo '<span style="color:#bbb;">"'.get_the_title().'" is the oldest post, no further articles. </span>'; } ; ?>
</div>
<div class="alignright">
<?php if(get_adjacent_post(false, '', false)) { echo 'Next newer article: '; next_post_link('%link'); }
else { echo '<span style="color:#bbb;">"'.get_the_title().'" is the latest post: no newer articles. </span>'; } ; ?>
</div>
</div>

One Reply to “Advanced styling of the prev/next post links”

Leave a Reply

Your email address will not be published. Required fields are marked *