(Last Updated on )
I’m trying to add some stylistic gorgeousness to my pages, but don’t understand enough PHP to make WordPress produce the markup I need. Can you help?
I want to add some pretty images to replace the “next” and “previous” links on archive pages, by having a CSS background image on the classes
navnext, then putting a span around the link text in and “floating” the text way off the screen. Classic image replacement.
Stop WordPress serving up empty unclickable navigation links
There’s two problems I have. The first is that, even when you’re on the most recent archive page so there should be no “next” navigation, WordPress offers up an unclickable “next” link (that has no link text) but which would erroneously take the CSS background image and thus be visible.
Take the archive page for the accessibility category, for example, and look at the previous link below the heading. No next link, right?
But in the html, you’ve got a the unclickable next link:
<div class="navprevious"><a href="/category/accessibility-web-standards/page/2/">« Previous Entries</a></div>
<div class="navnext"><a href="/category/accessibility-web-standards/page/2/"></a></div>
The code in the archive.php page (from the Kubrick theme that this is based upon) that produces this is:
<div class="navprevious"><?php posts_nav_link('','','« Previous Entries') ?></div>
<div class="navnext"><?php posts_nav_link('','Next Entries »','') ?></div>
I guess what I need is some kind of PHP statement that only writes it out if there is a sensible link to write out. Can anyone help me out?
Make the “Read the rest of this entry »” link include the post title, and give it a class
The “Read the rest of this entry »” links cause me accessibility problems, as WCAG forbids multiple examples of the same link text going to different places.
What I propose to do is change the link text to “Read the rest of ‘post title’ ” so that each is unique, and use CSS to replace the text with a background image.
So what I want to do is imperiously command WordPress to produce a link like this:
<a class="readmore" href="/2005/naughty-hedgehog/">Read the rest of 'ooh my hedgehog is naughty'</a>
Like all those who imperiously command, I’m too thick to do the work myself. Can you help?
(There’s other accessibility issues with the default WordPress theme, which is the subject of a future post.)