6 Dirty Reasons Why You Suck At WordPress Theme Development

I’ve worked on many WordPress designs that someone else has build which I had to optimize to get a site loading faster. When I started looking at the WordPress template code I could see these guys did not know what they were doing.

I was in shock, how could you let someone build a WordPress theme and he does not even follow the WordPress Codex. I had a big task ahead of me to fix all the issues.

So you want to know why you suck at WordPress Theme Development?

1:  You copy your header code across each template file or you use a PHP include instead of the get_header function. Now this is really bad especially if you are copying the header code over to each template file.

2:  Your inserting your JavaScript code into the header instead of using the functions.php file with the WordPress enque functions to add it to the header.

When you should be doing it like this as an example in your functions.php file.


wp_register_script( 'colorpicker', get_bloginfo('template_url').'/zooker-theme-options/js/colorpicker.js');

wp_enqueue_script( 'colorpicker' );

3:  You have more than one stylesheet file in your theme. While you could have more than one but when you combine the CSS into one file will surely get some performance boost in the long run as browsers will cache your CSS file. I’ve seen people adding up to 20 style files in the header manually.

You could also use the @import command but you could read some disadvantages of using the css import command here

You should also add your style-sheets to the header in the same why as in number 2, here is some sample code.


$colorLayout = get_bloginfo('template_url') . " /styles/layout.css";

wp_enqueue_style('colorlayout', $colorLayout,'1.0','screen');

4:  You have more than one Javascript file in your header when you should actually combine your JS files in to one file. Your browser will cache your file making your site load faster for users. You can test your results over at Pingdom

5:  You don’t use image sprites in your theme when you should be using it where you can. Image sprites can make your site load faster as there are less image files to load and this also means less HTTP requests made by your browser.

Here’s a great article at css-tricks.com where they explain what images sprites are.

6:  You are hard coding URL links to images and other files instead of using the get_bloginfo('template_url') code.

Can you think of any other reasons why you suck? Let me know in the comments section below!

Related Posts:

  • rss
  • email
  • rss
  • email
I'm a full time PHP developer and I just love all things web related. If you need help I'm your guy.

14 Responses to 6 Dirty Reasons Why You Suck At WordPress Theme Development

  1. On item 6, using get_bloginfo() increases your portability (if the theme gets moved to a new folder, etc). However, it also increases php work and database hits which can turn into a performance hit if you aren’t cached or if you are high traffic and get lots of comments (continuous cache refresh).

    A better solution (imho) is to set a var for every get_bloginfo() call at the top and then use the variable throughout. This won’t help for something that is only used 1x, but for something like template_url or template_dir, it helps.

  2. Morné says:

    Hi Ed,

    Thanks for the comment! This is really a great tip you gave me, I never thought of it that way. It will definitely help to make less connections to the db and help shed the load from the server.

    I think I will start using your technique in my Theme :). Once again thanks for your contribution.

  3. Anonymous says:

    I’m thankful that you let me know I suck. However, would be awesome if you could tell me why I suck/should use your method. Most of the methods are probably suggested in the codex, but would be interesting to know what benefit it is to use them.

  4. Morné says:

    Hi there,

    Maybe you should actually read the article before leaving a comment 😉

  5. Anonymous says:

    haha I promised I read it! However I guess I was to eager to leave a comment… After rereading the only thing I really wonder is why I should use get_header instead of the PHP include… I do use get_header and get_footer etc, but never understood why.

  6. Morné says:

    Hi again, glad you read it :). The reason for using the get_header is because it’s part of the WP API. When you have multiple header files like header.php, header-alt.php and header-slider.php all you need to do is call it with get_header(‘alt’); or get_header(‘slider’);

    When you use include u will lose other functionality like the use of locate_template();

    Hope that sums it up.

  7. Awesome. Thanks. Just started making my first theme yesterday. Locksmithsnz.co.nz should in a couple of hours be wordpressified!

  8. Morné says:

    Hi Simon, the theme looks good. Good luck with that :). Please like the article maybe it could help someone else too.

    Thanks

  9. Ed Blogrescue says:

    Actually – I have to apologize for my earlier comment and completely rescind it. I was working on a new clean theme and was working toward minimizing queries, and I found that bloginfo() doesn’t actually add any queries at all.

    I wrote a test template and tested every single option and it seems that WordPress reads all of these options and uses cached values for the individual function calls. In addition, I checked the following:

    get_stylesheet_uri();
    get_stylesheet_directory_uri();
    get_template_directory_uri();
    site_url();
    home_url();
    is_rtl();
    get_theme_root();

    Not one additional query. I know it didn’t always work this way, but it does now – so feel free to use get_bloginfo() wherever possible.

  10. Morné says:

    Hi Ed,

    Thanks for coming back with some extra info. Did you get my email? I need you to respond to that email as quickly as possible :)

    Thanks again for your comments.

  11. 7. You publish a blog post called “6 Dirty Reasons Why You Suck At WordPress Theme Development”

    8. You comment on stuff without noticing that the blog post is several months old.

  12. Morné says:

    7. Thanks for your sarcasm, I’m sure you are just trying to get a link to your site 😉

    8. actually this was posted on Dec 5, 2011 so not several months old. Do your calculations :)

  13. World Idol says:

    Well, I’m not so sure about the point 5th. Performance is not everything and putting sprites like crazy is very bad idea. Separate image = separate image file. The only purpose for sprites I see is hover effect. I wouldn’t be so strict about points 3rd and 4th as well. Being performance crazy usually means being bad programmer, especially nowadays. There are multiple examples where using several CSS or JS files is a great solution.

  14. Morné says:

    Hi there,

    Could you send me some examples to prove your points, it will help other users that visit the site to understand and learn.

    Thanks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>