The web designer's guide to WordPress

The whole design community has a crush on Jason Santa Maria. And it's not difficult to see why. At the top of his resumé you'll find the WordPress Admin area. It's simple, clean, intuitive, and ultimately a pleasure to use. If I had to name one reason why WordPress is so popular, it would be this.

When you're looking at buying a new car, you test-drive it. You're going to be spending a lot of time in this thing and you want to make sure it feels as good inside as it looks outside. It's the same with WordPress. Take her for a test drive and you'll see how she feels to use. This is important.


CUSTOM URLS: Your pages will always exist at /slug/ (or /parent slug/child slug/ and so on), but you can choose a setting for your posts in the admin area

Working in a pleasurable environment makes our working lives all the better. It's equally important if you hand off the site to be maintained by a client. WordPress is easy to teach – it's fun to watch a first-timer get to grips with it. I find they 'get it' almost right away. That says a lot.

Below the area where you write posts and pages in the Admin area, there's a box called Custom Fields. Adding Custom Fields to a post attaches data to it, but it takes code in the theme to make use of this data.

To explain this, let's look at how I create pages for the screencasts on CSS-Tricks. After creating a new page, I title and write a description of the video in the main title and text areas.

Then through Custom Fields, I attach data to the page: URLs to the locations of the videos, their duration, and the file sizes. Then I select the specific page template I've set up for videos (see next section), choose a 'parent' page (placing it snugly into my site's structure), and publish it.

The result is a page like the one shown above. Notice the video player below the video description and links. That code appears nowhere during the creation and publishing of the page from the Admin – it's inside the template used. Here's the code that embeds my Flash video player:

var s1 = new SWFObject("/flash/
mediaplayer.swf", "mediaplayer","570","428","8");
s1.addVariable("height","428"); s1.addVariable("volume","100");
s1.addVariable("file",""); s1.write("container");

The line of code that references the URL location of the video is outputted using the get_post_meta() function. If I want to change the video player I use, I simply change the code in the template. I can change the player for every single video on my site by editing code in one place.


CSS-TRICKERY: The page for an individual screencast on

Remember all that Custom Field data I attached to the post? I use that to create the RSS feed dynamically. There's a special XML structure for RSS, and for a podcast, which includes an tag with information about the attachment:

I output the URL to the high-quality version and its byte size dynamically. Should the format/structure for RSS change, I alter the template to accommodate, not change each entry individually. The important part about Custom Fields is that you control the where, how, and even IF you display the data available. It's that infinite flexibility that makes WordPress a 'real CMS'.

Page templates WordPress gives you the ability to create any number of page templates. It's easy: just create a new file in your theme (I like the naming convention page-xxx.php) and start with this code:

Now this template will be available when creating a new page. On CSS-Tricks, I publish snippets of code using this special template. I do this because these pages have a different layout to other pages on the site.

They include a special header common to the snippets area, letting people know where they are. There's a search box to search the snippets area, a breadcrumb trail and a link for submitting snippets. All of this is included in the template itself. I also use a Custom Field to display 'reference URLs' for each of the snippets.

Nice URLs

WordPress makes nicely-formatted URLs and gives you plenty of control over them. For example, controlling the 'slug' of any particular post or page is easy.

Say you wanted to have the category, author, and year be a part of the URL, you could do that by using this setting: /%category%/%author%/%year%/%postname%.

The resulting URL for a post would be something like: I recommend always including %postname%, since that will help get keywords in the URL, which is good for SEO.

SEO slug

SLUG IT OUT: Short and relevant slugs are good for many reasons: SEO, memorability and aesthetics

Pages, by default, live at /page-name/, which makes perfect sense. You create a Contact page, the slug is contact, it lives at /contact/ on your site.

Say you had two authors on your site, and you wanted to have individual contact pages for each author. You could create a page called Contact Chris, make the slug chris, select the Contact page as the parent page. Then it would live at the URL 
/contact/chris/. Likewise, you could create a 

You can go as deep as you'd like with parent/child pages, so the sky's the limit with customising structure. Some URLs are automatically created by WordPress.

Parent page

HAPPY FAMILIES: Parent pages are easily created by selecting parent page from the drop down menu

For example /feed/ is always your RSS feed. If you use categories, the URL /category/birds/ is an archive page of all posts categorised with birds. If you don't like the word category, that's customisable as well!

Probably my favourite part about designing with WordPress is how easy it is to set up queries, loops and functions. Let's say I want to show three posts from the category pets (category ID 3):

By using the query_posts() function and passing it parameters to describe what I want, I can output what I want. To create dynamic navigation, there are a number of useful functions. Here's how to output a category list, page list, and a tag cloud:

Now let's say you want to display content from external sites – say, the last three articles on WordPress has an RSS parsing library built in called SimplePie that we can use:

Don't worry, it doesn't have to hit the third-party website on every page load: the results are cached and only pull once the cache runs out. To control how often the cache needs updating:

$feed->set_cache_duration (43200);

Remember, Twitter also has an RSS feed, so you can integrate your tweets this way. There are also RSS feeds on Twitter for searches and favourites.


First published in .net Issue 199

Liked this? Then check out 11 WordPress plug-ins every blogger needs

Sign up for TechRadar's free Weird Week in Tech newsletter
Get the oddest tech stories of the week, plus the most popular news and reviews delivered straight to your inbox. Sign up at

Follow TechRadar on Twitter