Can you use WordPress to power your web design work? Of course you can. But how? That was the subject of a talk I gave at the 2011 Future of Web Design conference this May in London. If you missed FOWD you missed a great time and some awesome presentations but you didn’t miss everything. The video is available on WordPress.tv and I’m going to share some of the ideas I brought up in my talk right here. Including a free custom theme for you to use in your own projects.
I’ll presume here that you’re already interested in WordPress if you’re reading this but in case you’re not, why WordPress? What’s the big deal? Well, right now, about 14% of the web is built on top of WordPress. That means, as web designers, it’s important that we get this whole theming thing right. Tipping point numbers like that mean more and more of your clients are going to be asking for WordPress. It’s probably starting to happen to you right now.
You’re already a web design expert. You should be a WordPress theme expert too.
Tutorial: Using the WP_Filesystem
Writing files from code, whether it be from a theme or from a plugin, is generally bad mojo. However understanding why you shouldn’t is confusing to many, and then understanding why you shouldn’t do-it-yourself and should use the WP_Filesystem is even more confusing.
A great writeup by Otto on how, why, and when to use WP_Filesystem to write files from a WordPress theme or plugin, including code samples and a demo plugin.
Besides being an absolutely stunningly beautiful design it looks like Jessica Hische’s Daily Drop Cap is built on top of our Toolbox theme. Nice!
If you’re like me and dread reading detailed specs for web technologies, but want to dig into and learn the details that matter to your work, check out the WHATWG HTML5 specification for web developers by Ben Schwarz.
The focus of this specification is readability and ease of access. Unlike the full HTML specification, this “web developer edition” removes information that only browser vendors need know.
Lead developer for WordPress core and WordPress security expert Mark Jaquith’s presentation on Theme & Plugin Security from WordCamp Phoenix 2011 is a must-watch video for all Theme Developers. Check it out.
Version control is a key part of a successful software project, and we use Subversion heavily at Automattic. All our themes, side projects, and even PSD files go into SVN repositories.
We often talk to theme designers that are getting into more advanced theme development who need a quick crash course on using Subversion. As part our tips for version control we recommend keeping a handy reference guide at your fingertips for common Subversion commands.
In our themes on WordPress.com we often hide text from screen display but still want it to remain for screen readers. Typical techniques like
text-indent and absolute positioning work fine until you try to add RTL support to the theme. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE.
Here’s a technique I came across on Adaptive Themes (Professional Drupal themes and design services) that works really well for this situation.
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
In our testing it seems to work great across all our target browsers.
See the full post on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content.
Do you find yourself taking older themes and adding support for Custom Menus? Here are code samples that you can use for just that.
To be clear, this isn’t a full-blown tutorial for Custom Menus. See Justin Tadlock’s excellent post, Goodbye, headaches. Hello, menus! or the wp_nav_menu Codex page for all the juicy details.