One of the minor things I’ve been meaning to do on my WordPress site was to use a more visually appealing treatment on the “Previous Entries” and “Next Entries” links at the bottom of the site’s main index.php page template. These links appear on the bottom of every page of the blog, from the first page on to the “nth” page and help users navigate back and forth to see different posts. Scroll to the bottom of this page to see the “Previous Entries” link to see an example.
In looking around at different button styles, I settled on Richard Davis’ SexyButtons set because they were lightweight, flexible and offered lots of different color schemes that could be used in different circumstances on my site. However, when I installed the SexyButton code, there was a minor bug on the homepage of my site with the “Next Entries” button.
Problem
Since the posts on my blog’s homepage are the most recent posts (my most recent post through my tenth most recent post), obviously there are no “Next Entries” to go to, and therefore that button does not need to be displayed on the Homepage. The issue is that while the WordPress Loop code did not output any text, the SexyButtons still recognizes the code that is present on index.php template page and renders the grey background of the button style I chose (see highlight in red box above). To take this scenario one step further, if you clicked through the “Previous Entries” link at the bottom of the main blog page, you would get to “Page 2” of my blog that would have the next 10 posts I created, and at the bottom of that page, the “Previous Entries” and “Next Entries” buttons would be rendered and linked accurately. The code I originally used to render the above screen shot is below, which is the combined standard WordPress code and the SexyButtons code:
<button class="sexybutton sexysimple">
<span class="prev">
<?php next_posts_link('Previous Entries') ?>
</span>
</button>
<button class="sexybutton sexysimple right">
<span class="next">
<?php previous_posts_link('Next Entries') ?>
</span>
</button>My Solution (Or, My Hack)
The nice thing about WordPress is that since its built on PHP, there are tags and code for practically every element of your blog. In this case, the
php (is_paged ()) { ?> tag is available for you to specify functions or actions on the paginated pages of your blog (yes, poor English…but I digress). So knowing this, I just strung together a couple of PHP “if” statements that keyed off of the “is_paged” tag which is noted in the code below.
<button class="sexybutton sexysimple">
<span class="prev">
<?php next_posts_link('Previous Entries') ?></span>
</button>
<?php if (is_paged ()) { echo '<button class="sexybutton sexysimple right">
<span class="next after">'; }?>
<?php previous_posts_link ('Next Entries')?>
<?php if (is_paged ()) { echo '</span></button>'; } ?>
The first “if” statement basically says “if WordPress validates that the page is “is_paged”, then drop in the start of the button tag. Then, I left the “previous_posts_link” alone as was provided by WordPress. Then, I put in another “if” statement to close out the button tag.
I then took this code and I put it on my index.php WordPress template page, in place of the standard “Previous/Next Entries” code provided on most WordPress index.php templates.
I am not about to admit that this is the cleanest way to solve this minor issue, but it works for me. Hope this helps someone out there on the internet. Or, I hope someone can help me if there is a simpler solution out there.