How To Develop A WordPress Child Theme That Performs

WordPress child themes are a great way to give your clients a customised website that gives them full control over their content, customisable options and a bunch of other features. The only trouble is the world’s favourite CMS can be a little slower than we would like.

With all that code going on behind the scenes it doesn’t take much to bring a WordPress site a halt. And this will soon cause your clients problems when visitors get bored of waiting and take their business elsewhere. Which ends with an unhappy client on the phone asking why their website acts like a slug.

There are generally three answers to this question. Either the original theme wasn’t developed in the most effective (or up-to-date) way, your own customisation isn’t as clean as it should be or the client has overloaded their site with images, plugins and other resource heavy additions. Luckily you and your clients can keep child themes up to pace though – as long as you follow the right guidelines and avoid a few common mistakes.

The Long-Term Solution

If you are (or plan to be) a fully-fledged WordPress developer and your current projects are turning out on the slow side, it’s worth going back to the basics and brushing up on the development process again. WordPress themes generally work fine if they’re developed properly and the most common reason for a slow child themes is the code could be better.

If you’ve been working with WordPress for a while you can guarantee some best practices have changed when it comes to child theme development – so go back and look for any areas where you can boost your code performance. On the other hand, if you’re still new to WordPress, you just need to make sure you learn from trusted sources and these two lists from wpmudev and Elegant themes are a great place to start.

Quick Tips To Boost Your Child Theme Performance

Although the above “solution” is the best way to improve your own skills as a WordPress developer, it’s probably not the answer you want to hear. We’re all pressed for time and trudging through a bunch of WordPress documentation and tutorials is a depressing prospect. So let’s look at a few quick tips you give your child themes a speed boost.

I still recommend you hit the WordPress books when you get a chance and experiment with your own projects though. This is by far the best way to develop your skills, but in the meantime I hope there will be a tip or two in this article to get you moving in the right direction. So here we go.

Start With The Right Parent Theme

Choosing the right parent theme for your projects is a stage you don’t want to underestimate when it comes to developing a child theme. First of all, it makes sense to go for a theme that is as similar to your design as possible – because less changes generally mean less additional code.

You should pick your parent themes carefully though, because you want to know you can trust the code of the original theme before you get started. It’s a good idea to stick to a trusted themes like Twenty Fourteen or Thematic┬áthat have been developed and optimised to best practices. Thematic in particular is a popular parent theme for developers because of its modular CSS architecture that makes development faster.

Screenshot 2014-09-30 at 18.17.25

Reconsider Using @Import

The standard procedure with child themes is to use the @import directive to load both existing and child theme styles. However @import is a bit of a slouch when it comes to loading times.

It takes roughly 200ms to load a parent theme’s style sheet and a further 200ms to load the child theme styles. In most cases browsers would load both files at the same time, but when it comes to @import and multiple style sheets this isn’t the case. The browser has to download, parse and execute one CSS file before it even sees there is a second to download.

Instead of using the @import directive you can get much better results if you open up functions.php and make use of the wp_enqueue_style() function. This approach is much faster than the @import approach and – although it takes a bit more code to do the magic – it’s a simple function that goes a long way. Check out this code snippet from Konstantin Koveshenin:

A Similar Approach To Fonts

Not long ago we ran an article on how to use Google Fonts in your WordPress theme and wp_enqueue_style made an appearance back then as well. Google Fonts is a great option for giving your child themes some typographic flare without slowing you down.

The good thing about Google Fonts is that browsers can cache fonts so that visitors don’t have to wait for them to load if they have already visited another site using the same font. This makes popular fonts like Open Sans and Raleway incredibly quick. While alternatives like Font Squirrel might have the better fonts (arguably) it takes you back to the @import option – which you can avoid with Google Fonts.

Once again we go back to the functions.php file in your child theme and add a small function to load our fonts. The example below shows the function to load Open Sans into your WordPress child theme:

Keep Your Code Super Clean

Clean code is essential for any web project these days and any developer needs to keep up with the best coding practices. This goes for all your code, but the most common trip-up for developers tends to involve javascript of some sort.

You can spend years not mastering javascript so don’t beat yourself up if you’re no expert, but be aware that your scripting is a minefield for sluggish site performance. It’s not just the code within your script files that can slow you down either, but also the number of .js files you have in your theme and where you put them.

Optimise Your Content

One of the WordPress basics is that you need to optimise your content to maintain site speed. This is pretty simple when it comes to images and graphics, but in the age of video things have changed a little.

It’s pretty common to see videos on a homepage these days and many designers are opting for the video hero background. It’s a snazzy look, but adding auto-play videos to your theme is a good way to slow down your WordPress site so use with care. Make sure you’re up to scratch with your HTML5 when it comes to video and stick to the basics when it comes to optimising images, title tags and the other standard stuff.

Take It Easy On The Plugins

Hopefully this doesn’t come as news to you, but plugins are one of the biggest drains on WordPress loading times and you want to keep them to an absolute minimum when it comes to developing your WordPress child themes.

Plugins aren’t just heavy on resources, but you’re putting a lot of trust in someone else’s code – so it’s a good idea to stick with trusted plugins if you really have to use them. Which brings us on to those loveable clients of ours.

Educate Your Clients

When the time comes to hand over your finished theme to clients, give them a run-down of the WordPress basics – especially when it comes to plugins and optimising content. The last thing you want is a client on the phone with a lazy WordPress site because they have added forty plugins and a library of HD images in the time it took you to drink a well-earned coffee.

Many clients won’t understand the impact a ton of plugins and visual content will have on loading time or maybe even the implications for mobile devices. It’s only fair to make sure they leave with a custom WordPress them that performs the way it should and enough instruction to keep it that way.