A Guide To The Options For WordPress Theme Development
At the recent WordCamp Edinburgh, I took part in a panel discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that there isn’t a one-size-fits-all answer and that the best method depends on the needs of the website and the capabilities of the developer.
But if you’re starting out building WordPress themes or want to develop a system for building them more efficiently or robustly, how do you decide which approach to take? In this article, we’ll briefly describe how WordPress themes work and then look at some of the different approaches to developing them, with tips on which approach might be most suitable for your website and circumstances.
How Does A WordPress Theme Work?
In WordPress, themes drive a website and determine what it contains, how it behaves and what it looks like. The theme is separate from the content, which is held in the database. This means you can use the same theme on more than one website, regardless of the content of the websites — which you might already be doing if you’ve downloaded themes from WordPress’ theme repository.
A theme consists of a number of template files, all stored in the theme folder, which you’ll find in wp-content/themes in your WordPress installation. Every WordPress theme has to include at least two files: index.php and style.css. The index file defines what content is displayed by the theme, and the style sheet (you guessed it) styles it, as well as contains meta information about the theme that WordPress uses to make the theme work correctly.
Actually, most themes have a few additional files:
header.php
Contains the<head>section of each page, plus the header of the website’s design.sidebar.php
Contains the sidebar, including any widget areas.footer.php
Contains the footer, which may or may not have widget areas.functions.php
Contains any functions that are specific to your theme. You can find out about the functions file in the WordPress Codex.- Files that contain the loop, which call the content from the database. Depending on which part of the website you’re working in, this could be one of a number of files:
page.php
For static pagessingle.php
For individual posts (blog posts, for example)index.php,archive.php,category.php, etc.
For pages that list a number of posts
Yoast has written a great visual representation of how theme files work, and the WordPress Codex includes a detailed description of themes, including details on the various files and when they are called.
I would argue that the style sheet, however, is the most important file and the one you are likely to begin with, because a “child theme” (more of that shortly) needs a style sheet even if it contains nothing else. The style sheet contains important meta information about the theme itself, which is commented out before all of the styles. Below are the opening comments for WordPress’ current default theme, Twenty Eleven:
/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. …
Version: 1.3
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, …
*/This information is commented out so that it isn’t read by browsers, but it is read by WordPress, and it provides information to anyone using your theme. We’ll come back to this shortly when we look at how to create a child theme.
Now that you know how themes work, the next step is to figure out how to go about building your own. Before starting, it would be worth considering some points that will help you make that decision.
What To Consider When Developing A WordPress Theme?
Before deciding which approach to take to develop your theme, identify your constraints. These likely include the following:
- Time
How much time do you have to develop your theme, or to learn how to do it? - Budget
This is related to time but also has to do with whether you can afford to pay for a premium theme or a theme framework. - Capability
How familiar are you with theme development, with CSS and PHP and with how themes work? If you’re not familiar, how much do you want to learn? - Future-proofing
Will your theme need to be updated in future? Will other developers be working on it in addition to you? If so, then your approach will need to be as robust as possible. - Repetition
Do you see yourself developing a number of similar themes in future? If so, your approach will have to allow for code to be reused.
We’ll revisit these considerations at the end of the article and identify which development options are most suitable for various situations.
Theme Development: Your Options
A few options are available for developing your theme or themes, and investigating them before you roll your sleeves up and start coding would be worthwhile. Picking the right approach will result in a better theme, with more robust code, and it will minimize the amount of revisions you’ll have to do later. It will also help you to build the theme more efficiently.
The options we’ll look at here are:
- Build a theme from scratch,
- Edit (or “hack,” some might say) an existing theme,
- Use the theme customizer to tweak an existing theme,
- Create a child theme to make changes to an existing theme,
- Create your own parent theme (using one of the approaches above) and child themes,
- Use a theme framework.
1. Build A Theme From Scratch
This approach is the most difficult if you’re inexperienced. But if you’re a seasoned WordPress developer, it will give you the most control. It might be the most appropriate method if you’re importing HTML from an existing static website that is being upgraded to WordPress with no other changes.
However, when transferring a website to WordPress, conducting a review of it as part of the process, rather than simply copying the code across, is a good idea. If you are copying a static website, you’ll need to keep a close eye on your code to ensure that it’s clean, efficient and valid.
2. Edit (or Hack) an Existing Theme
This is how most people start with WordPress theme development: in working on a theme that they’ve downloaded, they see that some styling isn’t quite right, so they delve into the style sheet and make some edits. Starting like this is tempting because it feels like a quick and easy way to achieve the effect you want. But there are some dangers:
- If you ever switch themes, that update will override any changes you’ve made.
- It’s easy to add repetitive code by adding new styles lower down in the style sheet that override styles higher up, rather than removing what you don’t need.
- The website could end up with a lot more code than it needs.
- If the theme isn’t well coded or commented to begin with, you could get yourself into a bigger mess and find that you have to make a lot of fixes.
However, hacking a theme can work if you go into it with your eyes open. It may be an option if the following are true:
- The theme you’re using is well written, valid and commented (e.g., the default WP theme, Twenty Eleven);
- The changes you’re making are so drastic that you wouldn’t need to update the original theme;
- You understand the PHP and CSS contained in the theme and are comfortable editing, adding to and removing it without breaking the theme.
If you do decide to go down this route, keeping a backup of the original theme and commenting your code thoroughly are important. I would also advise commenting out any code that you don’t want and then testing to see what happens before deleting anything.
3. Use the Theme Customizer to Tweak an Existing Theme
The theme customizer was released with WordPress 3.4. It gives you the option to customize a theme without writing any code, simply by using a WYSIWYG interface. Depending on how well the customizer is written into the theme itself, you can use it to change images, titles, colors and even the layout. Expect to see more themes with the customizer integrated into them.
Using the WordPress theme customizer with the Twenty Ten theme.
The theme customizer stores your changes in a separate file, not in the theme’s style sheet, so there will be repetitive code.
For more information, take a look at Otto on WordPress’ video tutorial or guide to integrating the theme customizer into your own themes.
4. Create a Child Theme to Make Changes to an Existing Theme
This approach is similar to editing an existing theme, but safer. It consists of creating a brand new theme that is defined as a child of the existing theme. Where your child theme doesn’t have a particular file but the parent theme does, it will use that. Where the child theme does have a file, that file will override the equivalent in the parent. Let’s look at an example:
| Parent theme files | Child theme files |
|---|---|
|
|
In the example above, WordPress would use the following files to deliver content:
style.cssfrom the child theme,page.phpfrom the child theme,single.phpfrom the parent theme,archive.phpfrom the parent theme,header.phpfrom the child theme,sidebar.phpfrom the parent theme,footer.phpfrom the parent theme.
You can see how this would be useful if you wanted to use most of the parent theme’s markup but change the content of the header (adding, say, your logo and address details) and any static pages (maybe changing the way that meta data is displayed).
The one file that every child theme must have in order to work is the style sheet, because it contains the information that WordPress needs to make the child theme function correctly. To do this, add some extra code to the style sheet’s comments:
/*
Theme Name: Twenty Eleven Child Theme
Theme URI: http://example.com
Author: you!
Author URI: http://example.com/
Description: Child theme based on Twenty Eleven.
Template: twentyeleven
Version: 1.0
Tags: your tags (optional)
*/
@import url("../twentyeleven/style.css");Can you spot the extra lines? The first one is:
Template: twentyelevenThis line tells WordPress that the theme is a child theme and that Twenty Eleven is its parent. You would add the name of the parent theme’s directory, not its full name.
And the second one:
@import url("../twentyeleven/style.css");This line tells the browser to load the parent theme’s style sheet before rendering any of the styles in the current style sheet. This frees you from having to duplicate any styles in the parent theme that you want to use.
So, that’s how child themes work. But when is this the best approach? I would suggest using it in the following cases:
- You already have a theme (to be used as the parent) that contains most of what you need for your theme;
- You want to be able to update your parent theme (for example, when theme updates are released following a WordPress update);
- You don’t want to get tied up in knots from hacking an existing theme;
- You want the option to revert to the parent theme or to develop another similar theme in future (which would be a new child theme);
- You’re developing a number of similar websites with some minor stylistic or content differences (I did this when building similar websites for a client that owned multiple companies);
- The difference between your child and parent themes is not so huge that you need to start from scratch, or not so huge that your child theme’s code will override anything affected by updates to the parent theme.
5. Create Your Own Parent Theme (Using One of the Approaches Above) and Child Themes
The situation I just alluded to, of building a set of websites for a client with multiple companies, is an occasion when you might create a parent theme and then set up child themes for individual websites. You might also want to do this in the following cases:
- You plan to develop a lot of websites with similar content and markup in future (not just for one client);
- You manage a lot of websites and have to dip into each of them regularly, and you want the code to be very similar;
- You’re comfortable creating your own parent theme, editing the code to create a robust parent that will work well with child themes.
If you decide to adopt this approach, you could either build your parent theme from scratch or hack an existing theme. For most of the websites I build, I use a parent theme that I developed by hacking the Twenty Ten theme, the former default theme for WordPress. I made so many changes that I no longer needed to activate updates to the original theme. I was also comfortable with the code in the theme and wanted to make significant changes to it, reducing the code, restructuring it to fit the way I work and removing code that I knew I wouldn’t need.
You could also create a child theme based on an existing theme and then create child themes for that — effectively, grandchildren of the original theme. The advantage of this is that you will not overwrite the code in the original theme, while having the flexibility to make modifications to the child theme that will be passed down to the grandchild themes. A word of warning here, though: with three themes in use, it’s easy to get confused about what’s happening, and you could end up with a lot of unnecessary code.
6. Use a Theme Framework
The final option is one used by thousands of WordPress users and developers. A number of theme frameworks exist that you can use as a kind of parent theme, but with much more functionality, and in some cases with the option to make quite fancy layout and style changes without writing a line of code. Some frameworks are free, while others are premium. They have been reviewed in detail already on Smashing Magazine, but the main ones are listed below.
Free WordPress frameworks:
- Theme Hybrid includes a myriad of hooks and widget areas to help you customize your themes. It also has some child themes available. The framework and child themes are all free, but if you want support, you’ll have to pay for it by registering on Theme Hybrid’s website. Working with it can be quite complex unless you understand PHP or use one of the child themes.
- Wonderflux is based on a flexible grid system. It has options for adjusting layout and styles without having to write code, and it includes a lot of hooks and widget areas. It’s free to use and supported via the WordPress forums.
- Carrington is the most established of the free frameworks, and it has a number of child themes.
- Thematic is developed by Automattic, which develops WordPress itself. It includes a number of hooks, filters and widget areas.
Premium WordPress frameworks:
- Its developers describe Genesis as “the industry standard.” It comes with a wide variety of child themes, options to customize without writing code, and SEO features.
- Thesis is the other big premium framework, and it also gives you the option to customize child themes without writing code.
Summary: Choosing An Approach
Chances are that, having read this, you’ve got an idea of which approach to go with. But in case you’re still scratching your head, here’s a summary of when each method is appropriate:
| Approach | Time | Cost | Capability | Future-proofing | Repetition |
|---|---|---|---|---|---|
| Build from scratch | High | Low | High | Low | Low |
| Hack existing theme | Low | Low | Medium | Low | Low |
| Use theme customizer | Low | Low | Low | Low | Low |
| Create child theme based on existing parent | Medium | Low | Medium | High | High |
| Create parent theme | High | Low | High | High | High |
| Theme framework (free) | Medium | Low | Medium | High | High |
| Theme framework (premium) | Medium | High | Low to medium | High | High |
All in all, each approach has its place; it just depends on the website and on you. The important thing is to choose an approach after having weighed the pros and cons — not just to dive in and have a go, only to discover that you’ve broken a theme or that you’ve created a lot of rework for yourself.
And as always, whatever you decide, don’t forget to keep backups!
(al)
Vince
March 13th, 2013 5:41 amNice article. It’s complete and interesting
Kawsar Ali
March 13th, 2013 5:54 amThanks for the useful the post. Creating a child theme is not as hard as it looks. I like to stay away from frameworks. I feel like custom is theming take less time and has more freedom in terms of customization. For any framework, you have learn their hooks, documentation and so on.
Corey Megown
March 13th, 2013 6:56 amGood article! Certainly something worth reading if you’re interested in custom or commercial theme development.
**One nit-picky thing: the article should probably be renamed to something like “Methods of Theme Development”. I clicked into this article thinking it might provide some new ideas for theme options (custom settings available for the installed theme) but instead got something quite different. Still a very good read, but different from what I was expecting.
Carlo Rizzante
March 14th, 2013 3:00 amI agree. Good article, but I’ve been misled by the title.
Sergi
March 13th, 2013 7:13 amThank you, it’s a great post to have an idea what way I have to chose.
Klevis Miho
March 13th, 2013 9:01 amI feel more free on creating a theme from scratch. And when I need a responsive theme I bundle it with the Foundation framework.
milsorgen
March 13th, 2013 12:02 pmGreat article.
Batfan
March 13th, 2013 12:04 pmIn my experience, I’ve found that the method that works best for me is a combination of 1 and 2. I use a blank/stripped-down theme and modify it for my needs. My favorite so far has been Reverie – http://themefortress.com/reverie/
Jonathan
March 13th, 2013 3:05 pmA very good and informative article for basic development. Please publish more of it!
Best regards, Jonathan
Dominor Novus
March 13th, 2013 6:20 pmGreat article. Which of above categories would starter themes such as “_s” by Automattic and Bones fall under? Do you consider them frameworks? Personally, I consider starter themes as a category unto themselves and therefore worth mentioning as a separate approach mainly because I spend quite a bit of time musing over the pros and cons of choosing a framework like Thematic vs a starter theme like “_s”.
Nik
March 18th, 2013 3:34 pmCan’t believe Bones didn’t get a mention! O.o
Rachel McCollin
June 7th, 2013 1:21 amI would count these as starter themes. They’re designed to be used as a starting point, not as parent themes. I’d use them to build my own parent theme which contained the basics plus any extras I use all the time, and then build child themes based on that. But that’s just my personal preference!
Sami Keijonen
March 13th, 2013 11:11 pmNice write up, thanks!
But there seems to be couple of things I like to note.
First, current default theme is Twenty Twelve:)
Second, have you accidently confused Hybrid (Parent) Theme and the actual Hybrid Core Framework. They are totally different.
http://themehybrid.com/themes/hybrid
This is “normal” parent theme and yes it has child themes also. As Justin has told, it was not the best choice to even create those child themes because it’s hard to upgrade them. There are no grandchild themes.
http://themehybrid.com/hybrid-core
This is the actual Hybrid Core Framework. It’s not a theme, it can’t have children:) It’s just a code base that developer can use to create new parent themes.
Laurence Knutsen
March 14th, 2013 12:12 amHi
Can anyone suggest a good ‘starting from scratch’ resource. I’ve had no problem using templates in ExpressionEngine and more recently Statamic and Kirby but have always struggled to get my head around the default amount of bloat in WordPress. I’ve used it for two live sites but they’re just hacks to themes and I’d like to learn from a blank canvas. What level of php knowledge is needed? HTML and CSS is my comfort zone.
Thanks
Laurence
Ben MacAdam
March 14th, 2013 3:56 amHi Laurence,
Here are two free themes I recommend that give you a fresh un-styled start:
Chris Coyier’s “Blank” theme: http://digwp.com/2010/02/blank-wordpress-theme/
Elliot Jay Stocks’ “Starkers” theme is bare-bones as well:
http://viewportindustries.com/products/starkers/
Best,
Ben
Matthew Ruddy
March 14th, 2013 8:50 amAnother great un-styled starter theme is Underscores. I use it all the time, really helpful.
http://underscores.me
Alex
March 14th, 2013 1:11 amThanks for the good article.
From the customers point of view, I belong to this niche ;) I choose the ready-to-use themes that come with the plenty of theme features. The most important thing for me is a built-in page builder, it really helps to save my time while creating the page. Most developers now use/create such builders, the one I use now is GT3 page builder which is integrated in the theme I purchased recently on one of the wordpress marketplaces. Btw, here is video to better understand how it works http://www.youtube.com/watch?v=HyCCrv2KBxg
Ken
March 14th, 2013 6:09 amThank you for this article! It is exactly what I have been looking for.
So many clients want to update their sites on their own and
Wordpress is a great way for them to do that, but I didn’t know where
to start for customizing a WordPress theme. This helps a lot :)
Boni Oloff
March 14th, 2013 6:56 amVery good article, not just talking about good programmer, but also let the people that have little knowledge to code, made or customize their own style theme.
Charlie
March 14th, 2013 12:23 pmI tough it is going to be about making an theme option’s page in back-end and different approaches of do so…
HeLLen
March 14th, 2013 1:40 pmIt is very very very strange little understood article
Though I am learn from programmer in a decent college.
Yuki
March 14th, 2013 2:09 pmThis is great, thank you for posting the article! I’m especially glad to learn about the child theme method. Once we submit the wordpress to our client, I always worried that they might update the theme and override the customizations.
Vajrasar Goswami
March 15th, 2013 2:14 amVery detailed and informative piece. Thanks to the author.
Giancarlo Marcelli
March 15th, 2013 7:36 amThanks so much–this is perfect timing for me because I have to complete a project and develop a theme!
Razvan
March 15th, 2013 12:02 pmI usually use Starkers[1] as a starting point when working on a new WP theme. I feel that using a bare bone theme as a base goes well for those that aren’t that familiar with how WP works but have solid working knowledge of HTML/CSS.
[1] http://viewportindustries.com/products/starkers/
Binita Tamang
March 15th, 2013 9:57 pmReal good information on WordPress theming..Thank You..!!)
Brianna Deleasa
March 16th, 2013 9:00 amWhat a great article! I think you’ve covered all of the main approaches for WordPress Theme Development.
I used to create themes from scratch for clients, but I realized I was doing the same processes over and over (definitely wasting time). I recently put together my own parent theme with all of the functions and general HTML/CSS that I would re-use, and I use child themes to customize for each individual client. I prefer to work with my own parent theme rather than someone else’s because I can easily debug and fix my own code quicker than having to learn someone else’s coding style. It has been working really well for me!
Alan Hughes
March 16th, 2013 7:51 pmLooking at a theme as separate from its content is the quickest way to design a terrible theme.
Ian Stewart
March 17th, 2013 11:38 amThematic actually isn’t developed by Automattic — though our popular starter theme _s is. The home for Thematic is thematictheme.com which is linked out to from the legacy page on ThemeShaper for Thematic. _s is its starter theme descendant. It’s pretty epic — you should check it out!
Rachel McCollin
June 7th, 2013 1:23 amGood point Ian – thanks. I will correct it!
Dave
March 18th, 2013 9:56 amIf anyone’s interested, I create a responsive version of the well known Starkers theme, which includes a responsive menu: https://github.com/deeve007/starkers-responsive
Morten Jacobsen
March 18th, 2013 11:45 amThis article did finally unblock my inability to touch themes. The article together with the theme Frank, made the process of making a child theme so obvious that I in fact did create my first child theme today!
The link to Yoast’ visual presentation of a theme also helped a lot.
Thanks for bringing me forward!
Shaheryar
March 21st, 2013 12:56 pmGreat article as usual.
Abhimanyu Rana
March 25th, 2013 8:20 pmGreat!! Thanks for share.
Rejaul
April 4th, 2013 3:45 amNice article. It is short and complete. Look also http://gumoti.com. Gomuti is also a good and precise website for WordPress web development.
N8 McCo
April 13th, 2013 8:59 pmHi Rachel, I really liked where you were going regarding “importing HTML from an existing static website” and “transferring a website to WordPress” to build a theme from scratch, because you’d have more control. I’ve been waiting for an article like that, and is why I stumbled upon this one of yours; however, I was hoping for more detail in that process from importing html, transfering an existing static site into WordPress via “building a theme from scratch!”
Sovichet
April 30th, 2013 4:29 amNice explained article. I’ve just got another idea in WordPress theme development.
Thank you! :-)
Joao Crispim
May 6th, 2013 6:39 amHi Rachel! I found your article very interesting and useful. We’re a very small webcompany in Portugal and we’re starting to give our first steps in the wordpress ecosphere.
We’re planning to follow option number 5 (CREATE YOUR OWN PARENT THEME (USING ONE OF THE APPROACHES ABOVE) AND CHILD THEMES), and we’re searching for developers who could meet the requirements. Can you give me in idea (I know it’s and idea since it depends on many assumptions) of developing times for the parent theme and for the child themes?
Thanks a lot!
Pantho Bihosh
May 8th, 2013 4:24 amReally awesome tutorial I ever seen of WordPress theme. Thanks.
Mohannad Khasawneh
May 11th, 2013 3:27 pmthis is some good read :D
thanks.
amrinz
May 18th, 2013 4:17 amactually i came here to look for theme options which is this article title, but not what I am looking for.
Btw, good post!
Reading this make me re-remember what should I do when create WordPress theme, thanks!