WordPress PHP help wanted
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.)
if you can wait for a week while i’m slumming it in denmark, i may be able to have a stab at it.
June 26th, 2005 at 12:47 pm
I thought it was acceptable so long as you used the
titleattribute to give further details?June 27th, 2005 at 9:53 am
The guidelines say
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).
June 27th, 2005 at 12:04 pm
Is http://faq.wordpress.net/view.php?p=59 any use to you?
June 27th, 2005 at 8:27 pm
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…
June 27th, 2005 at 9:01 pm
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.
June 28th, 2005 at 9:17 pm
[…] e_content which is scary PHP. Fortunately, Derek Featherstone is much cleverer than me and he’s worked out what you need to change: Uniquifying th […]
May 3rd, 2006 at 5:59 pm
Looks like you sorted it! Site’s looking great. I need to get to grips with CSS !
May 18th, 2006 at 12:42 pm
Well Bruce I don’t know much about PHP,But i am sure my friends and colleagues can help you out. contact me.
July 25th, 2006 at 1:06 pm