Bruce Lawson’s personal site

WordPress PHP help wanted

(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 navprevious and 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.)

11 Responses to “ WordPress PHP help wanted ”

Comment by paul haine

WCAG forbids multiple examples of the same link text going to different places

I thought it was acceptable so long as you used the title attribute to give further details?

Comment by Bruce

The guidelines say

If more than one link on a page shares the same link text, all those links should point to the same resource. Such consistency will help page design as well as accessibility.

If two or more links refer to different targets but share the same link text, distinguish the links by specifying a different value for the “title” attribute of each A element.

Trouble is, JAWS doesn’t show you the title attribute without some serious tinkering, and Theofanos and Redish have shown that screenreader users don’t customise their kit. So, rather than wrestle with WordPress to add titles, I’ll add unique identifiers to the link text, then replace it with an image. (I’m looking to add some visual splendour to the site as well as enhance its accessibility).

Comment by Derek Featherstone

Hi Bruce,
Not sure about the class thing on your “read more” links, but here’s what I use on my blog for mine:

the_content("Continue reading " . the_title('','',false), 0);

Yours should be similar…

As for the next/previous links, we should be able to fix that up as well… send me an email and I’ll hook you up…

Comment by Bruce

That worked, thanks Derek!
Now to find out how to put a class on it .

Worked out how to style my next and previous links, witha revolting kludge. Basically, I can’t stop WordPress outputting the dummy links, but I can make it output a non-semantic span inside then link text:

<div class="navprevious"><?php posts_nav_link('','','<span>« Previous Entries</span>') ?></div>

(I could dispense with the surrounding divs and put the class on the span, if I didn’t have future plans for the divs.)

The CSS is then

.navprevious span /* or span.navprevious if the class is on the span */
{
background: url(/punk-images/nav-previous.jpg) no-repeat;
float: left;
height: 51px;
width: 150px;
text-indent: -5000px;
cursor: hand; /* otherwise IE won't, for some fucked-up reason */
}

It breaks in IE5 as the text-indent method doesn’t work, and it vaguely offends me, though it validates: it’s not the non-semantic span that makes we weep like a weepy thing, but the empty link that WordPress spews out – and my uselessness in PHP which makes me unable to fix it.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.