Best practices for WordPress coding

by Jean. 44 Comments -

Coding a WordPress theme or plugin can seem to be an easy task at first, but if you want to produce work that is more professional, you have to worry about things such as internationalization and security. In this article, I’m going to show you the best practices I have learned in 3 years of developing with WordPress.

Think International

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.

Additional resources:

Don’t reinvent the wheel: Use a framework

While many people thinks that a good developer is someone that can create quality code, they’re wrong: A good developer is a person who can write quality code, quickly. Being fast is a quality, because clients don’t want to wait, and time is money.

Being fast doesn’t mean writing crappy, untested code in order to get things done as soon as possible. Instead, being fast is all about not wasting time. In development, the most important waste of time someone can do is when you’re reinventing the wheel, i.e. recreating something instead of using the original.

Theme frameworks appeared in 2008. A theme framework is a WordPress theme which can be extended by a child theme. While there are many available frameworks, both free and premium, my favorite is definitely Thematic. You have to learn how Thematic works, which can take some time at first, but once done, you’ll be surprised by how fast you can create robust and optimized themes.

And for those who think that a framework doesn’t allow enough modifications to create any type of layout, you’re wrong: This site and CatsWhoBlog are both using Thematic.

Additional resources:

Speed up development using community tools and templates

As a WordPress developer, most client requests I got were similar: They wanted a custom theme or plugin. The process of creating files and fill it with the required info (Such as plugin name, url, etc) is very simple but time consuming.

For this reason, you should definitely make use of what the community created for you: Themes and plugins templates, as well as a really interesting plugin called WP Dummy Content, which can automatically generate a bunch of pages, sub-pages, posts, etc for you to test the look and feel of the theme you’re building.

Resources

  • The WordPress Starter Theme Project: A very useful set of files containing a blank style.css with theme name, author, URL, etc. tags at the top, a content-ready 404, archive, search, index, single post, and page files, a full, working comments.php file, a complete header.php set up with links to RSS, a stylesheet, and JS file and all you need to start developing a new WordPress theme.
  • WP Dummy Content: a WordPress plugin that will generate a bunch of pages, sub-pages and posts which you specify. Titles and content are automatically generated for you as well, and you have a few choices as to the type and length of content.

Debug your code efficiently

As a developer, debugging code is something that you should be used to. Although debugging is rarely a bunch of fun, WordPress has some useful functions that will definitely make your life easier.

The WP_DEBUG constant has to be placed in your wp-config.php file. If defined and set to true, error messages will be displayed.

define('WP_DEBUG', true);

If you’d like to modify WordPress built-in Javascript, you can enable debugging by defining the SCRIPT_DEBUG constant.

define('SCRIPT_DEBUG', true);

Additional resources

  • WordPress debug techniques: An interesting guide for those who don’t want to spend hours debugging their code.
  • Debug Theme, by Joost: The “Debug Theme” is a very special WordPress theme: instead of making your blog looking good, its purpose is to display useful information such as WordPress constants, security key-phrases, etc. A very handy tool when it comes to debugging!
  • Theme Tester plugin: If you need to modify or create a new theme on a production site, this is a must have: This plugin allows you to show the regular theme to your visitors while you’re working on a new one.

Make use of hooks, actions and filters

WordPress has very interesting an useful features called actions and filters. While those are intensively used by Theme frameworks and some plugins, most newcomer’s in WordPress development are ignoring them.

Actions and filters allow you to modify, overwrite or surcharge an existing WordPress function, without having to edit the core files. For that reason, you should always make sure that both the wp_head() and wp_footer() functions have been implemented in the theme you coded:

<?php wp_head(); ?&gt
    ....
<?php wp_footer(); ?&gt

Using hooks, you can for example add a favicon to your theme without editing the header.php file. The following example is what I use to add a favicon to a Thematic child theme.

function add_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png"/>
<?php }
add_action('wp_head', 'add_favicon');

Additional resources

Code markup like a pro

A very important aspect of the quality of a WordPress theme is definitely how it is coded. In fact, I know many developers which are very good in PHP and other back-end technologies, but suck at front-end coding.
WordPress is XHTML valid and standard-compliant, so always make sure that your theme or plugin is as well before selling it to your client.

The idea of “pro front-end coding” is quite subjective, because not everyone has the same quality standards. However, any WordPress theme or plugin should be:

  • XHTML valid: Although their usefulness is often discussed, in clients eyes, respect of web standards makes the difference between a poorly skilled amateur and a professional web developer.
  • Semantically coded: When html tags are used semantically, this is not only the proper way to create a html document, it will also allow your client to get better search engine optimization results.
  • No inline styles or Javascript actions: In-line styles always seem extremely useful at first, but when you have to modify someone else’s work and it’s filled with in-line styles, it quickly become a nightmare. Same goes for javascript actions, such as onmouseover and so on. Always put them in a separate file.

To learn more about front-end coding best practices, you should definitely have a look to my recent “Top 10 best practices for front-end web developers” article.

Comments (44) - Leave yours

  1. Damian Jakusz-Gostom said:

    Thanks, this couldn’t have come at a better time, I’m just getting into the whole WordPress theming thing. A lot of what you said here is common sense if you think about it, but a few great links to look through now, thanks

  2. Alex Denning said:

    That’s a great post. I do like the way you’ve laid it out, explaining a bit and then adding in further reading. It allows one to cover a lot, allowing readers to read on if they so wish.

    You could also add things like widgetise everything, make sure you don’t hardcode URLs (use bloginfo etc) and don’t duplicate functions unnecessarily (ie don’t build some pointless image getting-from-a-custom-field function when WordPress has post_thumbnail).

    • Jean-Baptiste Jung said:

      Glad you like it :)

      I previously wrote about Thematic:
      http://www.catswhocode.com/blog/wordpress-theme-frameworks
      http://www.catswhocode.com/blog/wordpress-how-to-easily-create-a-thematic-child-theme

  3. Wordpress Wiz said:

    Awesome tips. I don’t know how to express how important it is to internationalize your templates. It comes in handy when you have a client who wants to blog in different languages or if you release a template under GPL and others want to port your work into their language.

    Also, at times I get templates that come into me that includes jQuery or any other javascript libraries statically. It’s easier to just use the wp_enqueue_script(‘jquery’); function to call the Jquery library into your template or use wp_deregister_script( ‘jquery’ ) and register the version of jquery
    wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’) that you would like to use in your theme.

    Thanks for the awesome article.

  4. Leon said:

    Glad I came across this post since we’re (Yummygum) have been thinking about making downloadable WP themes for a while. We’re pretty experienced in making websites that use WordPress as a CMS backbone so making themes is nothing new to us. But I’ll definately give the framework you mention a go when developing an official theme that’ll be up for download.

    Thanks

  5. Lorna said:

    What an excellent post. I haven’t been coding a WP theme for a while, so this is like a refresher course for me. That WP Dummy Content is one gem of a find, thanks for recommending it!

  6. Thomas Scholz said:

    You are right about I18n. I’ve seen “professional” themes where 50% of the text was translatable and the rest was hard coded. Bah!

    For my own themes I don’t use a framework. Most professional developers have a well tested and optimized default theme, I guess.

    Where I disagree is XHTML: There is no benefit for anyone, and it’s really easy to get nice clean HTML 4.01 or 5 out of WordPress.

    I would add three points to your list:
    • Widgetize everything.
    • Don’t pollute the global namespace with your variables.
    • Add a print stylesheet.

  7. Dimas said:

    Great tip about internationalization, it has been only recently that I figured out (rather cared to figure out) what those functions were: __( ) and _e() … enabling support will help others in contributing to your theme and/or plugin.

  8. Elizabeth K. Barone said:

    I’ll admit it, I was one of those people who insisted on coding themes from the ground up. Oh, how I’ve learned my lesson… I’m going to check out both Thematic and The WordPress Starter Theme Project. Thanks so much!

  9. Jill said:

    Coding is not my passion, but your tips and tutorials are amazing. I always make a lot of back-ups and use SVN for coding, I just make to many syntax mistakes.

  10. Daniel Cho said:

    Awesome post by the way. This was written a newbie like me can understand it. I’ll keep the WP Dummy Content Plugin in mind. So thanks for sharing.

  11. Andrea Borja said:

    For a noob like me, this was like handing me the cheat sheet for the finals. Thanks for simplifying everything out for those who are having a hard time figuring out complex WordPress coding.

  12. Brent M said:

    Jean – thanks so much for your insights here! I use Thematic on some of my blogs and your advice makes perfect sense to me. All the best, Brent M

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!