Today we have a few tips for you to help you when developing WordPress themes for yourself, clients or release to the public …

Not Developing Locally

I’ll admit I have been guilty of this one up until recently – I tend to get very stuck in my ways when working; I don’t upgrade my software or OS that often ( I still design mainly in Photoshop CS3 and use Vista as my desktop OS! ). So I have always developed my WordPress themes in a live environment by coding in Dreamweaver or more recently Sublime and then dropping the file I’m working on into my FTP program and refreshing the browser to see the changes. I always thought it was a hassle to install a local server environment until I just recently – I used XAMPP which installs Apache, MySQL, PHP and Perl or your local PC or Mac. The setup is really easy and after installing it prompts you to install an add-on called BitNami which provides one-click installations of popular scripts, one of which is WordPress.

1

Developing locally has really sped things up for me – saving and then refreshing the page is quick, downloading a plugin and then dropping it into a local folder is also so much quicker than having to upload it via FTP, if you have been putting this off – give it a try!

Not adding scripts and styles things properly

We know by now that we should be enqueuing all our scripts and styles the correct way by using  wp_enqueue_style and wp_enqueue_script. From the codex, the best way is to add a hook and list them within it as follows :

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

The reason for doing this is to help prevent conflicts between different plugins and your theme.

Not using WP_Debug and Theme Developer Plugins

You need to catch any errors as you go along – maybe you have copied some code from an online source and it uses deprecated calls or you have a syntax error etc, it’s easier to fix these as you go rather than find a load of bugs at the end of development. Firstly you should set WP_Debug to show any errors, open your wp-config.php and change the line:

define( 'WP_DEBUG', false );

to

define( 'WP_DEBUG', true );

That will throw up any PHP errors visually as you go. Next up you need to install a few plugins which will aid you in theme development, as follows :

  • Developer – “A plugin, which helps WordPress developers develop.” this will help you be recommending a further set of plugins to install.
  • Theme Check – The theme check plugin is an easy way to test your theme and make sure it’s up to spec with the latest theme review standards.
  • Log Deprecated Notices – This plugin logs the usage of deprecated files, functions, and function arguments. It identifies where the deprecated functionality is being used and offers the alternative if available.
  • Debug Bar – Adds a debug menu to the admin bar that shows query, cache, and other helpful debugging information.

Those are my main plugins, if you use those when creating your theme it should stay inline with the latest WordPress coding standards.

Not Browser Testing as you go Along

When you are creating the HTML for your theme it helps to browser test as you go along rather than waiting until the end where you could end up having to use hacks to correct something. The main culprit is usually Internet Explorer but there also other slight differences in browser rendering. I test as I complete each section of the page, so maybe after coding the header, after coding the blog display, the portfolio section, the footer and so on. Its easier to find a problem if you test in sections like that.

BrowserStack is an amazing tool which allows you to test in 300 different browsers but comes at a price of a minimum $39 per month or $19 for just desktop browsers. There are other free options such as IE tester for testing older versions of Internet Explorer, BrowserShots to get free screenshots from a lot of different browsers and Lunascape which is a browser where you can change rendering engines (Trident, Gecko, WebKit).

4

Not using Theme Unit Data & MonsterWidget

Releasing a theme publicly is different to creating a theme for your own or client’s site – with those you have more of an idea of how it will be used and can tailor some specific styles for their requirements etc. When a theme is released publicly you need to plan for a lot more different usage scenarios and try to make sure you have everything covered. You need styles in place for all the default elements, you need to make sure all default widgets are styled and so. There are two tools designed to help you test for this:

Theme Unit Data

To test your theme correctly, you need to import some test data to test for all the standard WordPress features like post formats, sticky posts, comments, image alignments and so on. WordPress make a file available which you can download and using the importer plugin, import this all into your test site. I dont think I have developed a theme yet which has passed this first time – just systematically go through any bugs you find, usually they only take a small tweak of your stylesheet to fix. There is another set of test data from a site called WP Test which also provides a file you can use.

3

Monster Widget

The Monster Widget is a nifty plugin which provides all 13 core WordPress widgets in a single widget which you can add to your sidebar and make sure your styling is correct for them all. This is another essential plugin I use when developing.

2

Conclusion

Hopefully these tips will help you if you are starting out developing WordPress themes – these are basically the minimum requirements to make sure everything is done correctly, you could cut corners but it will cost you more time fixing things in the long run. Some things like styling the default widgets, comments etc are code that you can reuse so if you take the time to do them properly at the start they will save you time further down the line – with some standard code in place, you can then tweak that for any new themes you create.

How about you – do you have any tips / tricks or techniques you use when developing themes?


Author:

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +

One Comment

  1. Another excellent tool for debug/development is Query Monitor: http://wordpress.org/plugins/query-monitor/

    I would highly recommend this to anyone doing plugin/theme development. It is also a great place to start when debugging a ‘slow’ WP site.

  • Comments are Closed

Our Sponsors

SEND ME FREE WORDPRESS STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!