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. :)

62 thoughts on “Powering Your Design With WordPress

  1. For your linking pleasure I’ve added an id to every h2 element in this post. You can now link to any section using that id and the permalink for this post; adding a hash mark and the h2 heading in lowercase with dashes instead of spaces. Like so.

  2. Pingback: WordPress Theme Releases for 5/25 « Weblog Tools Collection

  3. Really wonderful post, Ian. It’s great to get a birds eye view of the whole process rather than piecing together a number of different tutorials. So thanks.

  4. Pingback: Powered By WordPress Theme | WP Tuts

  5. Rob says:

    Ian, you are the man!

    Could you just clarify: When you say:

    “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.”

    Do you mean I can tweak them a little and then actually SELL them again? Or just USE them again and again?

    • Hey, Rob. It’s both. Though it’s good form to modify a theme substantially before re-selling it; making some justification for creating a fork of the original project.

  6. Pingback: Anyone Can Work with WordPress | David A. Kennedy

  7. This is an awesome in-depth theme, I can’t wait to try it out.

    One observation: the theme package itself contains hidden __MACOSX and .DS_Store files that could likely be excluded (ie, if I wget the zip to my server and extract, it creates a __MACOSX directory in my themes directory).

  8. Pingback: Wordpress - Resources - Page 6 - DesignersTalk

  9. Lionel says:

    Nice non-basic base theme, thanks! :-)

    But it seems it’s not fully internationalized (e.g.: “Posted on … by … This entry was posted in…”, “Leave a comment”, “Proudly powered by WordPress…”).

  10. Ian -

    This is a very well written, easy to follow post for a newbie WP themer like me. ;-) Just what I’ve been looking for. Thank you!

    I really hope to see more posts like this. It’s so incredibly helpful, I think I may actually print out. LOL

  11. Pingback: Segnalibri al 29 maggio 2011 | Ubuntu block notes

  12. Ian, thanks for the outstanding post and theme. I want to create some themes, and your post has given me a lot of good ideas, and understanding.

  13. Pingback: 101 Essential Free WordPress Resources for Building Your WordPress Website | WordPress News at WPMU.org

  14. Thanks for the stats. It’s incredible that WP is now powering 14% of websites. And the last I looked at Google Trends, it’s still trending upwards! If the trend continues WP websites will be roughly about 30% of the internet in 5 years time!

  15. First of all a great blog. Somehow I did not subscribe to it earlier (I know, I do not know which world I was living in!).

    Is it me or the website or the blog does not have the RSS feed link? Sorry if there is one and I did not find it.

    Best of luck!

  16. Ed says:

    Hi Ian,
    oooo, i like the “powered by” especially your explanations of howto make the homepage look differently from the posts. Not “bloggy” as you put it.

    How does this theme fit (or not, as the case may be) in with Thematic?
    I’m also curious how things get into the wordpress theme directory? why for example is thematic in there, but powered-by is not (maybe just too new?)

    I’m also trying to unravel (i’m new to looking at themes) how it works, just for example the header — i can’t for the life of me see how the search box thingie gets implanted in the header, yet there it is. Looking at header.php, i desperately commented out this line “”. yet still it appears!?

  17. Ed says:

    oops. now i feel silly! i was using the wrong format for comments (i foolishly thought c-style commenting would work /* */

  18. Pingback: Better way to do Featured Posts | unhack WP

  19. Really useful stuff, Ian! I will def use this in my next project, tweak the TPS Report feature a bit — peharps to a Events’ post type thing. :)

    By the way, there’s a small glitch with the search field in which the text appears misaligned in Chrome. Adding #branding #s { line-height: 1em; } should do the trick.

    Regards!

  20. Awesome article! Actually, I didn’t know much about how to create a theme. But, with the framework you’ve shared, I wish I could make a theme. And yes, I can realize it. With this article of course. Thanks, Ian!

  21. A2daK says:

    I wondered if there was a way to change the featured content on homepage to allow posts as well as pages? I have been trying without any sucess.

    This is an excellent theme and a wonderful article. I’ve been a longtime fan of thematic and your work there so and this new theme (using WP3 features) is fantastic too.

    Hopefully you have a simple way to push posts or custom-post-types to the frontpage too.

    • If you check out functions.php you want to enable the featured taxonomy on an array of posts and pages and similarly with the custom metabox. Just a few lines of code to change.

  22. A2daK says:

    Sorry to hit you with another question. Really sorry. I have decided to use this as a base for a new project so hopefully you can help me. These are probably questions others will ask. I changed the custom post type and custom tax and everything was working fine until I changed the permalink structure to be “/%postname%/”.

    It breaks when I try to click on what used to be the link to the latest report from the homepage. Does code need to be adjusted or added to support the postname permalink structure?

  23. A2daK says:

    Thanks for your answers. Much appreciated. Im still having a small problem with the custom permalink structure and the hardcoded custom post type link but I’ll work it out. It doesnt seem to work when exchanging the names for other post types. Thanks

  24. Wow, I really like the theme you have shown here. I’ve taken a lot of time to learn more CSS tricks, and your templates will be a useful resource to how I customize and adapt my WordPress themes for my needs. The post loop example is really good, as I often struggle with grasping the whole “loop” concept, and I really fail at creating my own loops.

  25. Thanks so much – this is a great tutorial!

    Definitely going to subscribe to your feed. I actually only stumbled across your site by going to a link at the footer of another site – clearly they are using your theme.

  26. özel ders says:

    Wow, I really like the theme you have shown here. I’ve taken a lot of time to learn more CSS tricks, and your templates will be a useful resource to how I customize and adapt my WordPress themes for my needs.

  27. Hey Ian, another awesome theme you got here. Just want to ask though, I really like the powered by layout , big banner image , 3 columns with images below. I was thinking of customizing my present thematic child theme like this or start from scratch and use the powered by theme?

  28. Hi Ian. I’m fairly new to the WordPress themes, but after reading your informative article, I feel more confident to start using themes. I’m definitely going to start researching how to customize themes, just as you’ve mentioned in your post. I’d love to learn more about it since it’s such a powerful tool for the blogging and sites I already created! Thanks again.

  29. Florin says:

    Hi, just wanted to tell you that this article was a goldmine for me. I’ve used some of your techniques in my first web-site ever made, as I was needing some kind of “custom post type” features and taxonomies and the info I found here was simply great and unique! Thank you and I hope to see more articles on the topic of premium themes and WordPress features.

  30. Yes, more and more people choose WordPress as their publishing platform these days, as a theme developer, I have learned a lot from you Ian!

  31. Pingback: A Free wordpress newsletter » 20 Really Handy Tutorials to help you build WordPress Themes

  32. Best Vaporizer says:

    Thanks Ian. I’m still a newbie and learning a lot everyday. This stuff here, I thought my brain was going to explode… Bookmarking this for future reference. Thanks again!

  33. I’m trying to unravel (i’m new to looking at themes) how it works, just for example the header — i can’t for the life of me see how the search box thingie gets implanted in the header, yet there it is. Looking at header.php, i desperately commented out this line “”. yet still it appears!?

    • The search form is popped into the header through the magic of get_search_form() (that’s what creates the markup) and a little bit of CSS to make it look nice. Removing the get_search_form() line from the header will successfully nuke it.

  34. Pingback: Wordpress Minutia @ Arizona Bike Law Blog

  35. Wow, thanks for sharing this theme, I’ve learned a lot of stuff just going through functions.php…

    What I thought was odd was your use of both a custom field and a custom taxonomy for the “featured” feature. Why not either (1) just use a taxonomy and check if the page has the ‘featured’ term when loading the edit UI, or (2) just use the meta field and filter based on that in the showcase.php -template?

    I can imagine option 2 would be less efficient than 1, but I’m curious to hear if you had a good reason for using both. :)

  36. Hi, just wanted to tell you that this article was a goldmine for me. I’ve used some of your techniques in my first web-site ever made, as I was needing some kind of “custom post type” features and taxonomies and the info I found here was simply great and unique! Thank you and I hope to see more articles on the topic of premium themes and WordPress features.

Comments are closed.