Customising your WordPress Theme the Right Way

Theme code

The theme is arguably the most important part of a WordPress site, after all it is the shop window for your site. There are many amazing themes available, both free and premium, for you to use but more often than not you need to make certain changes to your site’s appearance.

What not to do

Themes are like anything within the WordPress ecosystem – always updating and ever changing. Which means hacking away at theme, plugin or WordPress core files is a bad idea. If you make a tweak to one of you theme’s files it will be lost the moment you update the theme. If you have purchased and are using a premium theme then updates are a strong possibility and could happen often. You do not want to get into the situation where you lose your changes, can’t remember what you did, or worst still, apply them again after every update.

A better way

The right approach to customisation is decided by the type of change needed. If you need to amend functionality and the structure of your themes HTML then ‘Child Themes’ are best practice. Not heard of them or used them before?

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme.

WordPress Codex

So instead of editing the main theme’s files (we will call that the ‘parent’ theme), you are creating a separate theme that extends the parent theme, allowing you to make the smallest of changes through to an in-depth customisation. It is important to note that your child theme is completely in your control and will not be affected by updates and changes to the parent theme. It is this idea of extension and separation that is at the heart of the WordPress system and is what makes it such a powerful tool for just about any website.

Creating a child theme

A child theme can be a really simple one file theme that is very easy to setup. In your /wp-content/themes/ folder you should see the folder for the theme you want to customise. If you want to customise the ‘Twenty Thirteen’ theme all you would need to do is create a new folder for your child theme called twentythirteen-child.

Screen Shot theme directory

The only file that is required for a child theme in that folder is style.css, in which you need to have the correct header for it to be a valid child theme that WordPress will recognise:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://dev7studios.com/
Description: Sample Child theme for Twenty Thirteen
Author: Dev7studios
Author URI: http://dev7studios.com/
Template: twentythirteen
Version: 1.0.0
*/

Then below that you can make your CSS customisations. If you want to make tiny edits to the existing theme then you can make sure your child theme inherits the parent’s CSS with this line below the header and above your edits:

@import url("../twentythirteen/style.css");

This is not necessary if you are completely changing the style of your parent.

You can then go further by replacing any files from the parent in your child theme by copying them into your child theme’s folder and editing them from there. This can be the template files so you can alter the HTML rendering and PHP logic of your theme. The files will then be loaded from the child and not the parent theme.

The only file you can’t replace is functions.php. If your child theme has one it will be loaded before the parent’s, it does not replace it.

Pure CSS customisation

If your changes are purely CSS styling then sometimes a child theme can be overkill and the easiest way to make a change is with a plugin. This allows you to make your changes directly from your admin area without the need to edit the site’s files on the server.

There are many custom CSS plugins available but we have just released Custom CSS by Dev7studios which contains a number of helpful features to make CSS edits.

The plugin is free and available on the WordPress.org repository, so it is easy to install from your WordPress admin area. Once you have installed and activated the plugin you will see a new menu option called Custom CSS under the Appearance menu on the left.

Screen Shot of Custom CSS by Dev7studios

You are presented with an area where you can write you CSS code which is helpfully syntax highlighted like in your favourite code editor.

Once you have added your CSS you can preview changes in your site before saving. This is especially helpful if you are unsure about your CSS or to make sure you are targeting the right HTML element with your edits.

You can also choose to minify your CSS to enhance site performance. This plugin doesn’t just output raw CSS script inline into your site but creates an external script file that is registered and enqueued in the correct WordPress way.

Hopefully this has been helpful in showing different ways to make safe customisations to your WordPress theme. How do you usually make changes? We would love to hear from you in the comments below.

3 Comments

  1. Eddie

    Great article. I agree child themes are the best way to go if you’re editing the layout. It’s such a nightmare when a theme updates and all of your work is gone.

    Reply
  2. sebastianangeloperez

    useful info, thanks. Do you have any suggestions about how to send proposals to clients when you are a web designer who buy and customise themes from Themeforest or Elegant themes? What would you recommend as a workflow? Thanks in advance

    Reply

Leave a Reply