I really love WordPress (apart from a few minor niggles). It maintains all my links, archives, it’s customisable – it’s a splendid piece of software, and the fact it’s free is fantastic. WordPress conforms to the basic level of accessibility, but most WordPress blogs don’t pass all the WAI/ WCAG Accessibility guidelines, so I decided to hack around with the code to make it more accessible.
Continue reading WordPress accessibility hacks
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?
Continue reading WordPress PHP help wanted
Well, it’s not ready for primetime yet, but I got tired of not blogging, so here’s my heavily-customised WordPress-powered redesign. "A redesign?!?!", I hear you exclaim. "It looks exactly the bloody same!"
Well, yes, but my design skills are not exactly renowned, and when I checked my server logs, I discovered someone’s blog entry saying "I absolutely adore the site design of brucelawson.co.uk. So clean and simple, and yet it looks gorgeous. Fantastic stuff."
With praise like that, I decided to leave it pretty much as-is, though I’ve still work to do styling the new bits and bobs (comments, extra nav, post metadata etc).
There’s loads of stuff still to do, the biggest of which is the removal of all <br /> tags that snuck into the posts when I was copying from the notepad html source of my old site into the WordPress Post entry text box.
If anyone can donate me a PHP script that can replace <br /> with "" (only in posts), I will love you forever.
I’m enormously gratetul to Matt Mullenweg for WordPress as I now have categories, archives, permalinks, comments and all the trappings of your proper blogbloke. There were a couple of minor niggles that I’ll note in case they can be noted for WordPress 2.0:
Although my xhtml always validated, there were still presentational elements in the markup: for example, the #header div had an anchor to the home page that was coded
<a href="index.htm"><img src="bruce-logo"
height="xx" width="xxx" /></a>.
That was replaced by
<a href="index.htm"><span>Home page</span> </a>, using the css:
#Header h1, #Header a {display:block; background:url(images/bruce-logo.jpg) no-repeat center;width:auto; height:176px;}
#Header h1 span, #Header a span{margin-left:-5000px;}
That has the added semantic bonus that, on the homepage where has no link to itself (cos Jakob commanded me), the page title is a header, rather than a simple <img> in the header, thus paying me Google dividends.
Similarly, the "ransom note" images for main nav were just a collection of images separated by <br /> tags. That needed to be moved into the css so that the images could be changed on a stylesheet switch. This is a bit more cumbersome. Here’s the xhtml:
<ul id="mainnav">
<li><a id="home" href="index.htm"><span>Home page</span></a></li>
<li><a id="music" href="music.htm"><span>Bruce's music</span></a></li>
<li><a id="about" href="about.htm"> <span>Who is this wanker?</span> </a></li>
<li><a id="nav-photos" href="photos.htm"><span>Pics and stories</span></a></li>
<li><a id="writing"
href="writing.htm"><span>writing stuff</span></a></li>
<li><a id="links" href="links.htm"><span>links page</span> </a></li>
<li><a id="email" href="mailto:bruce%20AT%20brucelawson%20DOT%20co%20DOT%20uk"><span>send spam</span> </a></li>
</ul>
and here’s the CSS
ul#mainnav {list-style:none; margin-left:0px; padding-left:0px}
ul#mainnav a {display:block;}
ul#mainnav a span {margin-left:-5000px;} /* replace text for main nav buttons */
a#music {background:url(images/music.jpg); width:200px; height:72px;}
a#about {background:url(images/about.jpg); width:184px; height:46px;}
a#nav-photos {background:url(images/photos.jpg); width:200px; height:66px;}
a#writing {background:url(images/writing.jpg); width:200px; height:68px;}
a#links{background:url(images/links.jpg); width:190px; height:77px;}
a#email{background:url(images/email.jpg); width:200px; height:88px;}
a#home{background:url(images/nav_home.jpg); width:200px; height:88px;}
I don’t particularly like all the <span>s there for image replacement, and am toying with the idea of using the Image Replacement—No Span technique, but that requires polluting the CSS with box model stuff for IE5 (do I really give a shit about IE5?), so my internal jury is still out.