Build Your Own WordPress Themes the Easy Way

Three Colours 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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • pat

    Thanks for this, didn’t know about Thematic before. It’s great that it’s released Free.

  • http://armchaircritic.declarationend.co.uk armchaircritic

    Nice write up.

    I think most designers using WP probably have a ‘skeleton’ theme which they’ve created themselves and tend to use that as a basis for each new project. I know I do, but the downside is that usually it doesn’t have quite the number of features as one of the frameworks.

    It certainly helps to know how to build up a theme from scratch, but the very reason I was looking into frameworks was for a client who needed a quick and cheap update. I think that remains the primary benefit for using one.

    Not all frameworks are created equal, and some of the ones out there are overly complex for a simple project. Thematic is the one I stuck with too for the time being, as it is definitely designer-friendly.

    • Xander

      damn 5 years ago.. are you still alive dude?

  • http://www.heyraena.com raena

    Thanks, armchaircritic! :D

    I’d agree that lots of theme designers use their own skeleton theme, and I think anyone who plans to make a habit of WP theming ought to make their own. It’s handy for the learning factor, if nothing else.

    But if you’ve been out of the theme game for awhile or if you’re new to it, it can be really daunting (not to mention time-consuming!) to build your own. The current implementation of the parent and child feature makes it really easy to learn by example and get your bearings that way.

  • http://www.fogofeternity.com fogofeternity

    I think the article title is misleading. Really you’re just talking about tweaking existing themes, and that’s very different from building your own. Both in terms of the extent of customization you’ll be doing, and also the impact on potential future usage for commercial purposes, using an existing theme as a basis has a number of impacts. That’s not to say that the advice is bad, but it’s customization not creation.

    One practical point, rather than using @import to pull in other stylesheets, they should be called in the page code. While it won’t make a major difference on a smaller site, @import has a demonstrably negative impact on page loading performance.

    Creating WordPress themes from scratch isn’t that tough. Probably one of the best tutorials is still ‘So you want to create wordpress themes, huh?‘ despite being a couple of years old.

  • Anonymous

    Thanks for this! I’ve been struggling with WordPress for a month and as a SitePoint book buyer and coder I find it extremely complex and difficult to understand – if you’re trying to go beyond just plugging in someone else’s theme.

    One major thing this theme is missing is the ability to add your own header image, which I discovered myself, after reading through the code, is as simple as adding this to function.php:

    if ( function_exists('add_custom_image_header') ) {
    add_custom_image_header('header_style', 'admin_header_style');
    }

    For some reason this is a deep dark secret that no one will reveal in any post I’ve read on WordPress where people are begging for help on customization.

    You didn’t say exactly WHERE to place the import code. Which file does it go in?

  • charles_i

    Thanks for this! I’ve been struggling with WordPress for a month and as a SitePoint book buyer and coder I find it extremely complex and difficult to understand – if you’re trying to go beyond just plugging in someone else’s theme.

    One major thing this theme is missing is the ability to add your own header image, which I discovered myself, after reading through the code, is as simple as adding this to function.php:

    if ( function_exists('add_custom_image_header') ) {
    add_custom_image_header('header_style', 'admin_header_style');
    }

    For some reason this is a deep dark secret that no one will reveal in any post I’ve read on WordPress where people are begging for help on customization.

    You didn’t say exactly WHERE to place the import code. Which file does it go in?

  • sitehatchery

    WordPress is actually not too hard to manipulate. Simply copy your skeleton or parent theme directory and rename the copied directory to whatever you want. Edit away. Want to change the header HTML? Just edit the file called header.php, etc. Just as with any project, most of your design work should be in CSS anyway.

    Use view source as your HTML reference and then do a quick search of the CSS file to locate whatever class or ID you need to change. In this way, I can usually code a designed WordPress theme from scratch within 4 hours, on average.

  • ZZZ

    WordPress themes are easy to make, LOL

  • Dusan

    Even though I have some experience in web design and programming I couldn’t get this article or better to say to make this to works for me and I need that to mention as well.
    As a Sitepoint books customer and subscriber I am disappointed. I fill this article to be the cheapest one. Too short for weekly publication.

  • Salient

    Not to be too pedantic but a ten minute goggle elicits more information on making a theme for WP than this article does. Are SP now down to repeating what others have already said on the web?

    Disappointing article SP, it holds none of the detail required to make an actual theme and lacks technical details.

    For anyone wanting to make an actual theme then start with the WP documentation, ask a few questions on WP support sites, and heck google up a number of better tutorials that show the Author hasn’t just picked up a few minor tips off the net.

  • Grumpy

    Salient : Disappointing article SP, it holds none of the detail required to make an actual theme and lacks technical details.

    But the title of the article is :

    Build Your Own WordPress Themes the Easy Way

    The opening line of the conclusion “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:

    I read “the Easy Way” in the title, and “Now that you’ve had a tiny taste of using a WordPress theme, you’re ready to go a little further.” in the conclusion.
    So the article brings exactly what’s promised. Nothing more nothing less.
    Ndless to say that I enjoyed reading the article and trying out some of it. I’ve been too long away from WordPress and it is a good read to get back on track.

    Robert

  • http://www.heyraena.com raena

    fogofeternity and salient, well, I’m sorry you feel that way. I do agree that it’s handy to have a complete tutorial, and for my part, I really don’t find creating a new theme especially difficult (though I do find it time-consuming).

    I don’t, however, think you can encapsulate all that goes into a good theme in one small blog post.

    Additionally, we do have readers who are any or all of the following:

    a) new to WordPress
    b) new to PHP
    c) new to web development generally
    d) short on time

    It’s these people I was thinking of with this post.

    Of course if you think we ought to have a full sized tutorial, then feel free to inquire about writing us one. I’m not saying this to be a smart aleck, I mean it :D We run more detailed tutorials about all kinds of topics fairly regularly.

    @charles_i, the import stuff goes in the style.css file. :)

  • http://www.raymondselda.com/ raymondselda

    Learning how to develop WordPress child themes is next on my list and this article definitely helped a lot and got me motivated and excited.

    Back then I always start a new theme from scratch and don’t have any idea of child themes in WordPress. I came across child themes through ThemeHybrid by Justin Tadlock. This will definitely improve my development time and theme skills.

    Thank you so much for this article.

  • http://harikt.com Hari K T

    Its a wonderful post. It may have helped a lot of guys who are new to WordPress. It may have motivated lots of guys to make a custom template for wordpress.

  • Captain Fatnutz

    I stopped reading when I saw @import directions.

  • charles_i

    Thanks Raena for the info.

    There is a desperate need for up-to-date, accurate, precise, step-by-step instructions on how to build and edit a WordPress theme (just the way sitepoint books are written).

    The recommended WordPress tutorials are outdated and do not pertain to the latest version of WP, so some of the procedures are incorrect – as well as the layout of the Dashboard.

    There is quite an extensive forum but most of the answers from seasoned WP users are too vague for someone starting out to understand.

    The WP website is so blog-centric that its procedures are written about creating a ‘blog’ instead of a website which happens to contain (or be) a blog. They are also written like a blog with so many links within one article that you very quickly find yourself 10 pages from where you started (lost in a thread), which is a confusing way to learn. There are also some pages that have not been updated to reflect the latest version of WP.

    I would be happy to write an article myself if I could ever get my head around it, but dissecting the PHP code for so many different ways to write so many different template layouts in order to find the basics is not easy. It’s fine if you’re inside the Dashboard, but information on what’s actually happening behind the scenes in the complex PHP coding is not readily available. You can only get fragments of code explanation from the WP site or posts in the forum.

    WP is OK if you want to use one of their themes, but there’s no way to figure out how to start simply to build or alter a simple template to suit your own needs, and slowly build on it. If sitepoint published one of their excellent books on this subject I’d be the first to buy it.

  • Grumpy

    @charles_i:

    ….. I’d be the first to buy it.

    Oh, no you won’t! I would be the first to buy it. :)

    Robert

  • periklis

    Ok Thanks !!! maybe it’s more easy to build a word press theme
    than design a website from a scratch !!! i should try …

  • cretam

    I read your article as I have just finished adding my own template to WordPress themes. For those who are interested I found this site excellent and it worked first time http://www.jestro.com/web-design/convert-xhtml-css-to-wordpress/

  • Ashely Adams : Sticker Printing

    Very informative and helpful. Themes are a really cool feature on WP. To be frank, I was waiting for a tutorial like this for a long time. I think I’ll get busy changing the theme on my WP blog. Thanks.

  • charles_i

    Thanks cretam. The jestro article is excellent and covers a big piece of the basic setup puzzle. I’m finally getting somewhere with figuring out what the most basic pieces of PHP are, what is needed to setup a basic CMS for an existing site, and what parts of the Dashboard the PHP functions control. All by trial and error – stripping out pieces of code one at a time to find out what they control. I might try writing my own article when I get everything figured out.

  • http://www.facebook.com/people/Umer-Singhera/622816499 Umer Singhera

    nice