How To Customise Your WordPress Theme The Right Way

One of the major appeals of WordPress is you can set your clients up with a website that gives them control over their own content and a bunch of custom options for layout, features and plugins. Better yet, there is a huge collection of WordPress themes for all types of business and you can guarantee there is a theme out there designed with your clients in mind.

Sadly, that doesn’t always mean the perfect theme is available and there comes a time where you need to get your hands dirty with some WordPress customisation. That might sound like a bad thing, but it’s actually another benefit of this platform because WordPress makes it a easy to customise themes for beginners and pros alike. That said, you have to go about it in the right way if you want to keep things secure, running smoothly and protect your client’s site from updates.

In this guide we will run through child themes and modular CSS, as well as some more advanced customisation using filter and action hooks – plus a brief word on custom CSS plugins.

An Introduction To Child Themes

Wordpress-Child-ThemeChild themes have been with us for a while now and if you delve into any custom WordPress theme you should already be using them. Basically, instead of directly editing any code, you create a child theme that overrides the style and structure of its parent, leaving the original theme untouched.

This means that when a publisher releases an update for your chosen theme you don’t lose all your hard work – or have a client on the phone asking what happened to their website. It’s also a more secure approach to customising themes and it’s highly recommended you start any custom WordPress project by creating a child theme to work with.

There are countless tutorials on how to set up a child theme, so rather than repeat what many have already said, let’s move onto some customisation techniques. If you need a more in-depth look at how to set up a child them check out this Tuts+ tutorial for a step-by-step guide.

Using Modular CSS

Modular-CSS--Fields_0

With your child theme up and running you can import style sheets and override rules to create custom layouts and styles. With some themes you will have to upload the main style sheet and all the styles that come with it, but more commonly you can use modular CSS for a faster, more dynamic process.

Thematic is a theme framework with exactly this in mind, allowing you to import a number of smaller style sheets to create a base for your custom project. First of all this keeps your code tidy because you’re not calling an entire style sheet and a bunch of unnecessary rules, but it also cuts your workload. With specific style sheets for layout, typography and other design aspects you can import a combination of styles to get your project under way, without starting from scratch.

The typical approach is the use the @import function in your child theme’s CSS file, but this can hit performance when you are asking the browser to import multiple style sheets. The best solution I have seen so far for this is to filter the parent theme with a bit of custom code in a new functions.php file of your child theme. Ian Stewart offers up a handy intro to theme filters and modular CSS over at themeshaper.com.

Functions, Filters and Action Hooks

Custom CSS will give your theme a new sense of style, but it does little for editing the HTML output or the functions of your custom WordPress theme. If you want to create, remove or edit content you will need to get your hands dirty with some PHP, but luckily there are a number of WordPress features to make it easier.

We have already mentioned the function.php file and this is where all of your custom functions will go for your child theme. We have also filtered our first WordPress function to import multiple style sheets and this is something you will use time and again to replace existing functions with your own code. Many WordPress themes now also come with action hooks – empty functions for you to attach custom code and call upon when needed – and between filters and action hooks you have an intuitive way to add, remove and edit content for supported WordPress themes – like Thematic. At this point I have to give another mention to Ian Stewart for two quality guides on using filter hooks and action hooks in child themes.

A Note on CSS Plugins

If custom functions and filter hooks are more than you need from a custom WordPress theme then you might prefer the idea of a custom CSS plugin over the child theme approach. Equally, some clients will like the overall structure of a specific theme and only want a few stylistic changes to meet their needs. While it’s also worth noting that the above techniques have varied support and some themes still don’t support child themes – although very few.

There will be times where you might consider using a custom CSS plugin and there are a number of free options available to get the job done. You could save yourself a bit of work too, if all you need is custom CSS – just remember that plugins slow your site down and the extra work you put into creating a child theme will pay of in the long-run. That said, if you decide to take the plugin approach, Custom CSS by Dev7studios outputs very clean CSS into an external cachable file and allows you to “minify” your custom styles to improve performance.

Your Own Customisations

Have you come across any killer solutions for customising WordPress themes? Share your ideas or favourite techniques with us to help your fellow developers.