10 tips for creating high quality WordPress 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 the
W3C 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!
"
"
"
"
"
"
"
"