Powering Your Design With WordPress

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.

Table of Contents

1. The Powered By Theme
2. Starting From Scratch or Forking a Theme
3. Where To Find Awesome WordPress Themes
4. The Toolbox Theme
5. Building The Powered By Theme
6. Custom Post Types
7. Creating a Custom Taxonomy
8. Making Custom Page Templates
9. Making Your Own WordPress Query
10. Featuring Content on the Home Page
11. Making a WordPress Tumblelog Theme
12. Download the Powered By Theme

The Powered By Theme

I came up with some fun sample client criteria that we can use to demonstrate some expert WordPress theme techniques in a theme I’m going to call Powered By. Just to amuse myself I wrote them up email style. Here’s what we’ll be working with.

• We’d like to publish our team’s TPS reports on the site, separate from our blog
• Could the home page show at a glance the things we’re doing? Feature some deeper sections of the site, our blog posts, and those reports?
• We’d like to spice up our blog a bit. Maybe like a tumblelog? That’s what the kids are calling it, right? A tumbler-ey-thingy?
• Our secretary’s nephew has a copy of Photoshop and a new computer and if he could maybe have some input that would be just super.

OK. We, er, probably won’t have time to get to that last one so let’s just get to the first three and take a look at our home page and blog page design in what I’m calling the Powered By theme.

We’ve got a design here that, I’ll be the first to admit looks kinda theme-ey, and maybe not unlike the type of premium theme that some of you are buying and tweaking right now for your clients. I’m going to take that as a plus though because you’re going to learn how to build this sort of thing for yourself. We’ve got a section just under the menu for featuring three pages with custom thumbnails that your clients can set themselves. They can move pages, and images in and out of this section all on their own without having to edit any templates. We’ve got some recent articles on the bottom left and over on the bottom right a separate list of what I’m sure are some highly entertaining TPS reports.

Here’s the blog page.

We’ve got a simple tumble-ey, er, thing. We’ve introduced some visual variety to our blog with a shorter blog post format and image post format, mixed up with the longer posts — the essence of a tumblelog. Also, go back up and look at the home page screenshot again. The longer posts are featured on the home page while these shorter, more ephemeral posts aren’t.

Now all we have to do is build this thing.

Starting From Scratch or Forking a Theme

I’m pretty sure that there isn’t a web designer beginning every project from scratch without reusing any code from a previous project or taking any code from another library. Well, maybe there is. And that person is crazy. It’s the same with WordPress themes. It’s a rare occasion when you build one completely from scratch and that’s not what I did with the Powered By theme. It was forked — taken, renamed, and tweaked — from another WordPress theme. That said, I think every web designer should take a crack at building their own WordPress Theme.

Creating your own WordPress theme from scratch means you’re going to make mistakes and break things. And that’s good! Every error you wind up making is going to teach you something about WordPress. If your theme throws up the dreaded PHP white screen of death while you’re learning how to build a theme, congratulations! You just made something happen.

That experience is going to take you a long way when you’re working on other projects. Better yet, if you keep at it you’ll wind up with your own starter theme, marked up just the way you like, ready to adapt for any project.

And WordPress theming, in the end, isn’t really very difficult to wrap your head around if you look at it the right way.

What does a WordPress Theme look like? Download a WordPress Theme and crack it open. It’s a pile of templates that WordPress requests whenever someone visits a particular page on a blog. If you’re looking at the front page, it’ll probably be the index template. A category page, the category template.

And then, typically, these templates are broken up into three sections. Let’s take a look at index.php as an example. Right at the top of the file you’ll see a template tag. get_header(). The markup for your header isn’t going to change much. The parts that need to be dynamic, WordPress will help you take care of that. So that gets shunted off into its own template. If you name that template header.php WordPress has a template tag for you called get_header() that you can use to, well, get that header template.

Right around the middle of every template is the heart of pretty much every WordPress project. It’s the loop.

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

	<!-- Your awesome content is going to be here. -->

<?php endwhile; ?>

As long as there are posts to loop through — have_posts() — we’ll run the_post() for every post and set up things so we can grab stuff from our posts and do awesome stuff.

And usually two more template tags right near the bottom for grabbing other common templates. A sidebar.php template and a footer.php template for, well our sidebar and our footer.

But WordPress themes usually have tons of templates. There’s a great image on the WordPress codex that shows all the different types of templates you can have in your WordPress Theme.

I love this graphic. You can see why so many WordPress themes use a lot more than just an index.php template — you can be super specific and as a theme author really tailor your layout to the specific request being made. The only required template, index.php can be replaced by WordPress for any page a visitor might view on your blog. For example, if you’re running a movie site and want a custom design with custom markup for your Tarantino category archive you can do that. Just copy the index.php or category.php template from your theme, rename it category-tarantino.php, and go to town on it.

But that brings up an important question. What theme are you going to use? If you’re going to build your project on top of another WordPress theme where do you get the awesome ones?

Where To Find Awesome WordPress Themes

Ready to hear my first-stop recommendation for getting rock-solid, awesome WordPress themes perfect for building your professional projects on top of? It’s The WordPress.org Free Themes Directory.

Yes, really.

You might think of the Free Themes Directory as home to a simple collection of somewhat random amateur themes but if you do I have a surprise for you. Every theme submitted there has been hand-reviewed by a real, live, human being. In fact, for the past year a team of volunteers has been reviewing all the themes submitted. The requirements have gotten more stringent, and the quality of the themes have gone up. These themes are free but I don’t think it’s fair to call them amateur efforts. There’s some serious high quality stuff here. The design work isn’t going to always be to your taste but that’s OK. You’re a designer. If you build on top of one of these themes you can take care of that.

That said, sometimes you want some human backup included with your themes and you’re going to buy a commercial theme. The folks listed on WordPress.org’s Commercially Supported GPL Themes page are selling WordPress themes with a support package included in the purchase price. There are more theme sellers out there than the ones listed here but they’re unfortunately limiting what you can do with the theme you’re buying from them. All the themes being sold here are Free — as in Freedom — software. All the code, all the images, all the CSS, once you download the theme, is yours to build on and use again — and again and again — in other projects.

What about all those themes you find when you Google around for WordPress themes. Well. I like to let people know that the themes on WordPress.org are human reviewed — but I have no idea who’s reviewing themes I find on random sites in Google. What I do know is that there are bad people out there putting intentionally bad code in their themes. Code that does stuff like inject spam links into your site. Would you want that on a client project? I wouldn’t. 🙂 Make sure you get your themes from a trusted theme seller or the awesome, official Free Themes Directory.

But back to the project. We need a theme to start on top of. Let’s take a look at the theme I used to build the Powered By theme.

The Toolbox theme

We created the Toolbox theme at Automattic for quickly building new HTML5 WordPress themes. But it was also built with you in mind. Yes, you. It’s yours for taking and making your own. Just like WordPress, it’s licensed under the GPL and you can use it for all your commercial projects. Download it from the Free Themes Directory or check it out from our public subversion repository.

Building The Powered By Theme

There are a bunch of WordPress features that went into the building of the Powered By theme but I’d like to go over the ones that are letting us tackle those client-requested items. I’ll just list off what we’re doing first and then go into the details afterwards. This is themer to themer talk though. If you talk to your clients like this they’ll either start calling you Gandalf or you’ll wind up with fewer clients.

We’d like to publish our team’s TPS reports on the site, separate from our blog

We’ll use a Custom Post Type with its own Custom Taxonomy to handle this.

Could the home page show at a glance the things we’re doing? Feature some deeper sections of the site, our blog posts, and those reports?

Yep! We’ll use a hidden Custom Taxonomy to create a new feature in the Edit Page views that will let us grab Featured Pages. We’ll also interact with WP_Query to create multiple loops on the front page of the site. And, to make that front page of the site, we’ll create a custom page template.

We’d like to spice up our blog a bit. Maybe like a tumblelog? That’s what the kids are calling it, right? A tumbler-ey-thingy?

The kids do indeed call them Tumblelogs. WordPress’ Post Format feature will make that a snap.

Our secretary’s nephew has a copy of Photoshop and a new computer and if he could maybe have some input that would be just super.

This joke wasn’t funny enough to bring up twice, was it?

Custom Post Types

If you’ve ever made a page in WordPress, uploaded an image, made a revision to a post, or used the new Menu system you’ve used a Custom Post Type. They’re sort of mutant versions of standard Posts. They’re all stored in the same place in your database, in the wp_posts table and differentiated by a column called post_type. That means interacting with a Custom Post Type is pretty easy. Even easier is making your own.

A few simple lines of code added to your theme’s functions.php template — or a custom plugin of your creation — are all you need to get started. The Custom Post Type used for our imaginary client’s TPS Reports are based on this barest of bare minimum implementations.

/**
 * Create a new Custom Post Type for Powered By's exciting TPS reports
 */
function powered_by_create_post_type() {
	register_post_type( 'pb_tps_reports', array(
			'public' => true,
		) );
}
add_action( 'init', 'powered_by_create_post_type' );

That’s it. You can read more about all the capabilities and features that can be added to your Post Types on the WordPress Codex but it really is that simple. With that you get a brand new section added to the backend of your WordPress installation that allows you to add and manage your TPS reports. You even create new page templates specific to that Post Type that let you add custom markup to further differentiate those items on the front end of your blog.

Creating a Custom Taxonomy

We’re also going to create a Custom Taxonomy for that new Custom Post Type. This will allow our imaginary client to organize those TPS reports by the Team creating them. Which is what taxonomies are all about. They sound complicated but really they’re just a “something” — in this case “Teams” — for organizing other “somethings” — in this case “Reports”. Think categories and tags. Those are both taxonomies for organizing posts. Here we have teams for organizing our reports.

And just like Custom Post Types it’s pretty simple to create your own Custom Taxonomies. Here’s the basic code that was first added to the Powered By theme’s functions.php template.

/**
 * Register a custom taxonomy for our TPS Reports
 */
register_taxonomy(
	'team',
	'pb_tps_reports'
);

That’s even simpler than the Custom Post Type code! Pick a name for your taxonomy and name the “something” you want to organize. With the code above you’re organizing your content similar to tags, without a hierarchy. To make you custom taxonomy more like categories simply do something like this.

/**
 * Register a custom taxonomy for our TPS Reports
 */
register_taxonomy(
	'team',
	'pb_tps_reports',
	array(
		'hierarchical' => true
	)
);

You can see all the available options on the WordPress codex.

Making Custom Page Templates

So, if you want to use WordPress to power your site design and you don’t want a “bloggy” looking theme you’re going to need to have a custom front page. Here’s my favorite method: create a custom page template and set it as the home page in Settings & rarr; Reading.

Simply add a PHP comment Template name: Some name to any custom page template and WordPress will let you use it instead of the default page template on any page. That means custom markup and content on any page with only a few clicks. Why is this my favorite method? It’s future proof. If you want or need to drop an existing home page simply un-publish that page and you should have a working blog theme left over.

Making Your Own WordPress Query

On our custom home page we’re using a custom WP_Query for displaying custom content — essentially three custom loops. What the heck does that mean? WP_Query is a PHP class in WordPress that takes in the queries WordPress sends it and fetches the correct posts and pages. If you’re looking at a category page on a blog, it’s WP_Query, accessed in the loop by have_posts and the_post that ensures you’re seeing posts in that particular category. When you’re making special custom loops or multiple loops on one page you can make a special custom instance of WP_Query. This is perfect for grabbing posts that were created with a Custom Post Type.

Here’s the dead simple implementation of that used to grab the TPS Reports on the custom home page template.

<?php
	$args = array(
		'order' => 'DESC',
		'post_type' => 'pb_tps_reports',
	);
	$tps_reports = new WP_Query();
	$tps_reports->query( $args );

	while ($tps_reports->have_posts()) : $tps_reports->the_post(); ?>
		<!-- Do stuff here -->
	<?php endwhile;
?>

There’s a whole whack of different arguments — all listed on the WordPress codex — you can use here for fetching content from your WordPress database. This is one of my favorite things to do with WordPress, it’s so simple with such cool results and it really gets at the heart of what WordPress theming is all about: displaying content at the right place at the right time.

Featuring Content on The Home Page

How do we get those pages featured on our home page? We know we can make our own custom loops and grab all of our pages but how do we only select a subset of those pages? This one is a little tricky but it’s really, really, cool.

The first thing we’ll do is make a new Custom Taxonomy just for pages. A hidden Custom Taxonomy. Just like this:

/**
 * Register a custom taxonomy for featuring pages
 */
register_taxonomy(
	'featured',
	'page',
	array(
		'labels' => array(
			'name' => _x( 'Featured', 'powered-by' ),
		),
		'public' => false,
	)
);

With that hidden Custom Taxonomy — 'public' => false, — I can choose when and how my pages get added to it. The only UI will be the one I make. Which I’ll do with add_meta_box. The code is a little complicated to get into here — you can see it all in the Powered By theme — but WordPress allows you to create your own modules on any edit screen. So that’s what I’ve done. 🙂

Whenever someone publishes a post with the checkbox in the “Featured Page” module selected that page gets “Featured”. I can then use that term to selectively display “Featured” pages in a custom loop. Which we’re doing on the custom home page in this theme. Nice and neat.

Making a WordPress Tumblelog theme

WordPress has a new way of categorizing your Posts: Post Formats. This lets you easily create a Tumblelog theme without having to hijack categories and tags or sell your soul — where I come from we only sell our souls for eternal youth. And like most WordPress features it’s pretty easy to implement. The most basic implementation is one line of code in your theme’s functions file. Here’s what I’m doing to add two post formats Aside and Image to our Powered By theme.

/**
 * Add support for the Aside and Gallery Post Formats
 */
add_theme_support( 'post-formats', array( 'aside', 'image' ) );

That’s pretty simple, right? Here’s what I’ll get on my post screens.

Each Post Format can be styled with custom CSS and you’ll see in the powered by theme that you can even create custom templates for each Post Format.

Download the Powered By theme

And that brings us to the theme.

I’m offering the “Powered By” theme as a download so you can learn from it and have free access to the code but in the end, it’s just another WordPress theme. There’s lots of other WordPress themes out there doing cool stuff. Download them and take a look at them. Some of them are good and some of them are really, really, bad. You’ll take something away from every theme. More importantly, you’ll learn more about how you can power your design with WordPress.

Download the Powered By theme and go make something cool. 🙂