A Guide To The Options For WordPress Theme Development

Advertisement

At the recent WordCamp Edinburgh1, 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 repository2.

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 Codex3.
  • Files that contain the loop4, 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 pages
    • single.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 work5, and the WordPress Codex6 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 Eleven7:

/*
   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.8
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 tutorial9 or guide to integrating the theme customizer into your own themes10.

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
  • style.css
  • page.php
  • single.php
  • archive.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

In the example above, WordPress would use the following files to deliver content:

  • style.css from the child theme,
  • page.php from the child theme,
  • single.php from the parent theme,
  • archive.php from the parent theme,
  • header.php from the child theme,
  • sidebar.php from the parent theme,
  • footer.php from 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: twentyeleven

This 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 Magazine11, but the main ones are listed below.

Free WordPress frameworks:

  • Theme Hybrid12 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.
  • Wonderflux13 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.
  • Carrington14 is the most established of the free frameworks, and it has a number of child themes.
  • Thematic15 is developed by Automattic, which develops WordPress itself. It includes a number of hooks, filters and widget areas.

Premium WordPress frameworks:

  • Its developers describe Genesis16 as “the industry standard.” It comes with a wide variety of child themes, options to customize without writing code, and SEO features.
  • Thesis17 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)

Footnotes

  1. 1 http://2012.edinburgh.wordcamp.org/
  2. 2 http://wordpress.org/extend/themes/
  3. 3 http://codex.wordpress.org/Theme_Development#Functions_File
  4. 4 http://codex.wordpress.org/The_Loop
  5. 5 http://yoast.com/wordpress-theme-anatomy
  6. 6 http://codex.wordpress.org/Theme_Development
  7. 7 http://wordpress.org/extend/themes/twentyeleven
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2012/08/wordpress_theme_customizer.jpg
  9. 9 http://www.youtube.com/watch?v=vD8v6u3noPg
  10. 10 http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
  11. 11 http://www.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/
  12. 12 http://themehybrid.com/
  13. 13 http://wonderflux.com/
  14. 14 http://carringtontheme.com/
  15. 15 http://themeshaper.com/thematic/
  16. 16 http://www.studiopress.com/
  17. 17 http://diythemes.com/

↑ Back to topShare on Twitter

Advertising
  1. 1

    Good 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.

    41
  2. 3

    Thank you, it’s a great post to have an idea what way I have to chose.

    -10
  3. 4

    I feel more free on creating a theme from scratch. And when I need a responsive theme I bundle it with the Foundation framework.

    4
  4. 5

    Nice article. It’s complete and interesting

    5
  5. 6

    Thanks 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.

    4
  6. 7

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

    3
    • 8

      Can’t believe Bones didn’t get a mention! O.o

      3
    • 9

      Rachel McCollin

      June 7, 2013 1:21 am

      I 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!

      1
  7. 10

    Great article.

    0
  8. 11

    In 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/

    4
  9. 12

    Nice 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.

    3
  10. 13

    A very good and informative article for basic development. Please publish more of it!
    Best regards, Jonathan

    1
  11. 14

    Laurence Knutsen

    March 14, 2013 12:12 am

    Hi

    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

    0
  12. 17

    Thanks 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

    2
  13. 18

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

    0
  14. 19

    Very 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.

    0
  15. 20

    I tough it is going to be about making an theme option’s page in back-end and different approaches of do so…

    0
  16. 21

    It is very very very strange little understood article
    Though I am learn from programmer in a decent college.

    0
  17. 22

    This 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.

    0
  18. 23

    Vajrasar Goswami

    March 15, 2013 2:14 am

    Very detailed and informative piece. Thanks to the author.

    0
  19. 24

    Giancarlo Marcelli

    March 15, 2013 7:36 am

    Thanks so much–this is perfect timing for me because I have to complete a project and develop a theme!

    0
  20. 25

    I 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/

    1
  21. 26

    Real good information on WordPress theming..Thank You..!!)

    0
  22. 27

    Brianna Deleasa

    March 16, 2013 9:00 am

    What 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!

    0
  23. 28

    Looking at a theme as separate from its content is the quickest way to design a terrible theme.

    0
  24. 29

    Thematic 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!

    0
  25. 31

    If 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

    0
  26. 32

    This 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!

    0
  27. 33

    Great article as usual.

    0
  28. 34

    Great!! Thanks for share.

    0
  29. 35

    Nice article. It is short and complete. Look also http://gumoti.com. Gomuti is also a good and precise website for WordPress web development.

    0
  30. 36

    Hi 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!”

    0
  31. 37

    Nice explained article. I’ve just got another idea in WordPress theme development.

    Thank you! :-)

    0
  32. 38

    Hi 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!

    0
  33. 39

    Pantho Bihosh

    May 8, 2013 4:24 am

    Really awesome tutorial I ever seen of WordPress theme. Thanks.

    0
  34. 40

    Mohannad Khasawneh

    May 11, 2013 3:27 pm

    this is some good read :D
    thanks.

    0
  35. 41

    actually 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!

    0
  36. 42

    Good Work Rachel. I liked the post.

    -1
  37. 43

    Thanks for the insightful post. I am starting with a new theme, and it helped me choose development method for my current requirements.

    -1
  38. 44

    thanks rachel :)

    1
  39. 45

    I recognize this from your book ;-) which I bought and enjoy.

    1
  40. 46

    Very deep knowledge article for WordPress theme development, thank you! If any one wants the latest WordPress themes with reviews then check out http://premiumthemesclub.com

    0
  41. 47

    Superb content Rachel! Thanks a metric ton!

    0
  42. 48

    I was very happy to find this web-site.I needed to thanks to your time for this excellent read!! I definitely having fun with each little little bit of it and I’ve you bookmarked to check out new stuff you weblog post.

    0
  43. 49

    great helpful

    0
  44. 50

    Hi Rachel, what an excellent, thorough post. I found some additional items that may be helpful, check out redux framework and theme options, also lightimagestudio.com/theme-zero – this is a cool multi purpose theme that uses theme options which is free to use commercially .

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top