10 tips for creating high quality WordPress themes

by Jean. 21 Comments -

Every week, hundreds new WordPress themes are released. Unfortunely, some of them lacks quality: Bad or bloated code, non respect of programming standards, and so on. I’ve compiled a list of 10 tips every WordPress theme developer should know and apply in order to create top-notch quality themes.

Respect HTML and CSS standards

This statement may sound pretty obvious, but actually many publicly available themes don’t pass W3C HTML or CSS validation. When building a theme, it is important to respect HTML and CSS standards so your code will be clean and (mostly) cross-browser compatible. A valid HTML/CSS theme is also a proof of quality development.

HTML, XHTML and HTML5 code can be checked on theW3C website. The W3C also have a free tool to check your CSS coding, althought with the rise of CSS3 and its vendor prefixes, it is pretty hard to obtain a 100% valid stylesheet.

Respect WordPress coding standards

Like most other open-source projects, WordPress have its own list of coding standards. This meticulous coding style convention is here to keep harmony among the thousands of themes and plugins availables and maintain a consistent style so the code can become clean and easy to read at a glance.

For example, the coding convention forbids to use PHP shorthand tag:

<? ... ?>
<?=$var?>

Instead, use full PHP tags:

<?php $var; ?>

The complete coding standard guide can be read on WordPress codex. On a personnal note, I really think that WordPress should recommend coding CSS in “blocks” instead of “lines”.

Don’t forget wp_head()

Within the <head> and </head> tags of most WordPress themes, you’ll find a function named wp_head(). This function may look useless to newcommers, but it is extremely important: Many plugins use this function to “hook” code in WordPress header. Without this function within your <head> and </head> tags, lots of plugins will not be able to work.

A similar function named wp_footer(); can be found in the footer.php file of most themes. Don’t forget it as well, it is used by plugins to hook code in your theme footer. For example, analytics.

Be careful when including hacks

Do you know my blog WPRecipes? In case you don’t, it is a place where I share WordPress hacks and code snippets. The site is quite popular among the community and I’m happy that many people seems to enjoy my hacks.

But last year, Gravity Forms developer Carl Hancock let me know that one of my hacks (Named Disable WordPress automatic formatting on posts using a shortcode) was intensively used on themes sold at Themeforest, and caused conflicts with Gravity Forms.

Of course, I felt sorry for the countless hours Carl and his team wasted in support due to the conflict between their plugin, and my hack. This is why hacks may be used on your own theme, or on a client theme, but you should not include hacks in a theme you’re going to distribute, excepted if you know exactly what you’re doing.

Start from something solid

In order to save time, most developers prefer starting coding from an existing theme. For example, I’ve used Cris Coyier’s Blank Theme as the starting point of most of the themes I’ve created in 2010 and 2011.

But don’t start from a finished plugin. I’ve seen themes coded over WooThemes and then re-released. Let me tell you, the code was an absolute nightmare!

If you’re looking for a rock solid basis to create your theme, give a go to Constellation: It is a “blank” HTML5/CSS3 theme, which the current CatsWhoCode theme derives from.

Use localized strings

When coding a WordPress theme or plugin, you have to think about those that doesn’t speak English. Using the PHP language, two very useful functions are available for you to create a translatable theme or plugin:

The first is the function _e(), which prints on screen the desired text, translated into the user language:

_e("Text to translate", "textdomain");

The second is __() wich is basically the same than _e(), but returns the text:

function say_something() {
    return __("Text to translate", "textdomain");
}

By using those functions, you make your work translatable in any language, which is a very great thing for people that blog in another language than English. Don’t forget to read my guide about making multilingual WordPress themes if you want to know more about the topic.

Prefix your php functions

It may looks like a detail at first, but prefixing your php functions is always a good practice. Why? Because most people would name their functions using common names such as display_stuff(). And if a theme developer named one of his functions with the same name that a function from a plugin the end user is using… Boom, the site is broken, and the user is not happy.

A bad example is to name your functions like this:

function display_stuff($stuff){
...
}

Instead, add a prefix such as your initials:

function cwc_display_stuff($stuff){
...
}

It do not require a big effort and it can avoid big problems for the non tech-savvy user.

Test content formating

A blog is used to display content. Then, why so many available themes do not comes with a style for HTML lists or blockquotes? To make sure users will be happy with your theme, you should make sure that all HTML elements looks good.

To do so, you can use a plugin named WP Dummy Content, which allow you to create posts, pages, categories and more so you can check how good you theme looks when it’s full of content.

Another tool to have in your tool box is the WP Lorem Ipsum Post Pack, a XML file that contains categories, sub-categories, pages, sub-pages, 30 test posts, tags, thumbnails via custom fields, and a “Testing the Elements” post so that you can test html elements, such as <h2>, <blockquote>, so you can test your theme in depth. Importing this XML is easy: Login to your dashboard, navigate to Tools → Import, and select the file.

Make sure your theme supports the latests functions

Do you think your theme is ready for public distribution? If yes, you should always make a final checking using the Theme-Check plugin, which is an easy way to test your theme and make sure it’s up to spec with the latest theme review standards.

Theme Check can be installed as any other plugins, and will let you know about any coding mistakes such as the use of a deprecated function.

Release your theme as GPL

With the success of WordPress, people created companies and started to sell “premium” themes. Most of them with released under the terms of the GPL licence, but several theme vendors chose to go with a licence that may, in their opinion, give them a better protection against piracy.

Though, WordPress team stated numerous times that themes have to be GPL compliant.

Although I am not a GPL fanatic, most WordPress users are, and trying to release a theme that is not GPL compliant will make you a pariah, and might even get you a lawsuit. So, don’t do something stupid: Respect WordPress licence, or choose another platform to work on.

Any other useful tip? Feel free to share it in a comment!

  • http://hotgluemedia.com Dani

    Great list! For content, I use WordPress’ own Theme Unit Test (http://codex.wordpress.org/Theme_Unit_Test), which is what they recommend using if you plan to submit to the Themes Directory. I’ve found that even for private work (custom themes for clients, for example), their test data is perfect for making sure all your bases are covered.

  • http://www.webmastersessions.com James

    Many people are looking for some of the latest functionality in WordPress to be included in their themes. Make sure to include as much of that as you can. I prefer themes that have customizable menus, widgets, sidebars, and custom content types.

  • Pau

    Very handy summary. Thanks.

  • http://www.DebraWeissDesigns.com Debra Weiss

    I like making edits on the Twenty Ten theme so I know I’m using the latest and best. And, I like the coding behind the theme. ;)

  • http://www.sitepunk.com/ SitePunk

    Interesting tips – thanks for sharing.

  • http://www.computertechtips.net Xps

    Shortly after my site went live after developing my first WordPress template, I realized the WP Stats plugin wasn’t giving results. The problem? I had forgotten to add the wp_footer() function in my footer.php file. I ended up writing an article about it.

    Later on when I look to remake the template, I’ll be sure to use the theme tools you and Dani mentioned. This article is getting a definite bookmark.

  • http://superdit.com aditia

    how about starting with another framework like whiteboard or carrington are they bloated too, i’m currently learning them, thx

  • http://www.sarkidinlee.com Şarkı dinle

    Very handy summary. Thanks.

  • http://www.alistercameron.com Alister Cameron

    You didn’t mention Roots Theme. It’s also a HTML5 “starter” theme and I quite like it.

    http://www.rootstheme.com/

    The guy behind HTML5Reset WP theme says it’s not based on Boilerplate and suggests he has some good reasons for that but doesn’t elaborate :(

    If anyone wants to discuss the differences and relative merits of these different HTML5 “starter” themes I’ve initiated a discussion here…

    Hope it’s a helpful contribution :)

    Alister

  • http://www.industrialrollupdoors.com Samantha

    Aditia

    Personally I think Whiteboard is bloated. I Think there are other more efficient frameworks.

    • http://superdit.com aditia

      owh really? do you know any article comparing wordpress theme framework, I currently on a half way for my new blog theme with whiteboard

  • http://www.arttechstuido.com Raquel

    I can’t believe I never heard of Theme Check Thanks for the tip. I’ll give it a try when I need to check for coding mistakes.

  • http://www.durhamswebdesigner.com Chad Warford

    Another great read, I truly enjoy stopping in and seeing what you have to say regarding the website design industry as it is truly applicable to my everyday business. You make WordPress Resource information easily at hand and I thank you for it.

    Keep coding, creating and loving life. :)

  • http://www.intuito.biz rob Haskell

    Thanks for this. I’ve been working little by little on my own “blank theme”. I figured someone somewhere had done it but I didn’t bother to go looking for it. Ignorant question here, but doesn’t WP generate XML validated code? I don’t get why you are talking about html 5.0

  • http://seomalta.com Matthew

    Thanks for the tips! I am looking at learning on how to create wordpress themes therefore such tips are very helpful to me.

  • http://www.100webhosting.com Jasmine

    Great tips in developing good quality WordPress themes. Thanks!

  • lise

    Thank you. The link to the “constellation theme seems broken and a google search is not anymore helpful. Do
    you have another suggestion?

  • http://www.redesignyourbiz.com/ Maverick

    Hey Jean, thanks for those lovely tips… yeah these are really important ones. thanks!

  • Valerie

    I gave up making WP themes from scratch even though I learnt HTML and CSS because I realised the fastest way to make professional looking sites is to use first a flexible, user-friendly editor that generates WP themes, such as Lubith, and then intervene in the code whenever necessary. It saves you a lot of trouble and your work is done much faster.

  • http://forsberg-marketing.com Jonas

    Awesome post. That WP Dummy Content is gonna save my end in the future. :D

  • http://www.medzpro.com medzpro

    thank you, it is really helpful.. :)