Build Your Own WordPress Themes the Easy Way

WordPress is by far one of the most favored blogging tools, and WordPress themes are certainly popular. A custom theme is a handy service to sell to a client, while creating your own theme for your blog is a fantastic way to let your personality and skills shine through — much more so than downloading some run-of-the-mill theme already being used by five hundred other blogs.

Creating an entirely new theme from scratch is complex and time-consuming — explaining how to write your own is a job too large for one little blog post! Fortunately, WordPress’s parent and child theme feature is a fast and easy way to start using themes. Simply grab a parent theme framework that suits your needs, add a child theme with your own CSS and tweaks, and you’ll be on your way to theme domination.

How Themes Work

If you’re unfamiliar with the way WordPress themes work, here’s a quick primer: in general, themes are made up of a collection of PHP templates, style sheets, images, and JavaScript files. They’re all bundled together in one directory, and uploaded to the WordPress themes directory, which is in wp-content/themes. An administrator selects the theme from the site dashboard.

For a child theme, however, all that’s necessary is that style sheet, style.css. We’ll define our theme’s details as above, and add one more line which will specify a parent theme to use. WordPress will then use our style sheet, along with the templates, functions, and scripts from the parent theme. We can also optionally add our own templates or functions to customize the markup that the theme produces.

Choose a Parent Theme

We’ll need to choose a base theme, which we’ll use as the parent theme for this exercise. It’s possible to use any theme as a base for yours, although there are several framework themes which are designed specifically for this purpose. Of course, you should make sure that you choose a theme with permissive copyright, such as a Creative Commons or GPL license. Although making a child theme leaves the original untouched, it’s fair to say that a theme designer would be fairly unhappy if you riffed on a premium theme.

For this exercise, I’ll use Thematic. It’s reasonably mature, available to edit, and full of classes and IDs to use for CSS. It also has a number of widget areas — places to add my own content or code in the template — without having to alter the markup.

Install the Parent Theme

Let’s assume that you already have a copy of WordPress to play with — if not, you should grab it and install it now. Next, to install Thematic, download the theme, unzip the file, and then upload the thematic folder to your WordPress installation’s wp-content/themes directory.

In your administration interface, visit the Appearance screen, activate that theme, and go and view your WordPress site. Quite sparse, right? It’s okay, we’ll be adding to this shortly. For now, though, have a look inside the markup. We’ll be using this markup to lay on our CSS. In Thematic, there’s absolutely loads of classes and IDs on everything — plenty of scope to add all kinds of bells and whistles.

Start Designing

This is the fun bit: let’s add some CSS to the mix. I like to work with WordPress themes’ CSS by saving the different kinds of pages — the home page, individual posts, category listings, and so on — as a series of plain, old HTML files. I modify these locally to refer to a style sheet of my own and use these to test out the look when laying on the styles.

The parent theme you’re using will almost certainly have a number of base styles, which you could use as a reference for your own efforts. In Thematic, there’s a built-in series of styles for a CSS reset, images, typography, plugins, and more. I’ve chosen to keep the reset, plugins, and the images CSS from the theme, using @import to grab them from the parent. These are located in the thematic/library/styles folder, and I’ll include them like so:

/* Browser reset */
@import url('../thematic/library/styles/reset.css');

/* Image styles for posts, etc. */
@import url('../thematic/library/styles/images.css');

/* Styles for plugins */
@import url('../thematic/library/styles/plugins.css');

Easy, right?

Install Your Child Theme

Now that we have some CSS in place, it’s time to create and install the child theme. Create a new folder, choosing a simple name without spaces.

Inside it, create a new CSS file, style.css. Edit that file, and add the theme’s details:

/*
Theme Name: My Child Theme
Theme URI: http://example.com/child
Description: My first child theme
Author: Tech Times Reader
Author URI: http://example.com
Template: thematic
Version: 1.0
Tags: your, tags, here
.
Add any comments here!
.
*/

The important line there is the one marked Template: thematic. This is how I’ve defined the Thematic templates as a basis for my theme: the value you enter there should be the name of the directory in which your parent theme lives. Customize these to your heart’s content — the Theme URI and Author URI is only required if you plan to release your theme, but the others should be filled in.

Now, drop in the CSS you’ve been working on, and copy over any images or other goodies you might require. Upload that whole folder to your blog’s wp-content/themes directory, and go look for your theme in the Appearance section of the admin dashboard. Activate your shiny new theme and test it out on a real live blog. If you’re happy with what you see, it’s time to sit back and admire your handiwork!

What’s Next?

Now that you’ve had a tiny taste of using a WordPress theme, you’re ready to go a little further. Here are a few tricks to try:

• Are you cool with PHP? Feel like getting into the guts of a WordPress template? Take a look at the template documentation and learn how that works. Using child themes, it’s possible to add your own custom functions, or even override them with your own templates.

• Feel like showing off? Release your theme into the wild for others to use! Take a look at the guidelines for releasing themes.

• Feel like showing off even more? Keep your eyes peeled for theme design contests, and throw your hat into the ring. Lots of design blogs run contests for theme designs with cool prizes up for grabs (not to mention bragging rights) — and if cash prizes are more your style, there’s usually several requests for themes over at 99designs.com!