I’m currently working a contract as a web designer and developer for a university, where web accessibility is vitally important for all web pages. I used to think I had a pretty good idea of how to make a web site accessible, until I started actually testing sites with a screen reader (JAWS). It’s not easy to navigate the web using your keyboard and your ears, and most web sites make the task unnecessarily complicated and frustrating.
It’s easy to find tutorials about the basics of WordPress theme design: the loop, comment forms, template files, etc. If you’re looking to add more advanced functionality to your theme, however, you won’t find help so easily. Sometimes I think commercial theme designers intentionally keep their secrets to themselves…
In this tutorial, we’re going to take a look at how to build a horizontal accordion slider using CSS 2D transforms and a bit of jQuery.
Typically, the trickiest part about this kind of horizontal accordion is getting the text on the accordion “spines” to display vertically, so people usually use images to display the text. It’s not simple, but using some CSS 2D transforms, we can actually make the text display vertically without using images.
2D transforms work in most modern browsers, but for those that don’t, we’re going to have our accordion degrade gracefully, without resorting to images.
I had a bunch of custom widgets to create for this theme, mostly for displaying ads, and then one to display twitter/RSS followers, and one to display a tabbed widget that included popular posts, recent posts, tags and comments. Creating a custom widget is surprisingly easy, after getting the first one done, I just modified it for the others. I thought I’d share a basic template for a custom widget, which can be modified to do all sorts of things. The possibilities are endless!
So I’ve had this WordPress theme PSD sitting around for ages, and I haven’t bothered coding it up for a long time… because I already did it. Word to the wise: if you find yourself needing to re-install MAMP, backup your htdocs folder. Anyways, so upon re-visiting this theme, I remembered that it took me ages to come up with a satisfactory content slider, and for the life of me couldn’t remember what my solution was. It involved popular plugin x… I think…