Customise your WordPress theme

Customise your WordPress theme

Now there will likely come a time when you will need to customise your WordPress theme. If you are doing this yourself there are three main ways you can do this. Firstly by modifying the files in your theme, secondly by creating a new theme using the primary as a template and thirdly by creating a child template. Each has its advantages and disadvantages which the following article outlines.

All you need for any of these options to work is access to the source code of your site and a way to download & upload files.

 

Modify the existing theme

This is the quickest and easier way of modifying a theme and if you’re in a hurry this can be a perfectly acceptable way of making minor alterations. All you need to do is find the theme within the site code and modify the required template file/s.

While this is the simplest way of modifying the theme it is also one we wouldn’t recommend. The main reason is if the theme is updated your modifications will be overwritten, so if you want to keep the modifications you will have to manually edit the theme after each update. Now you could argue that you can avoid updating the theme however the primary reason for most successful attacks WordPress sites (or any other platform) is not keeping it up-to-date.

 

Make a copy of a theme

Another way to go is to make a copy of the theme and then modify it. This is a good way to go if you’re planning on making major changes, like when you’re using the theme as a base for your theme.

The upside of this option is you can heavily modify the theme however if you are going to do major modifications you may wish to create one from scratch as you are less likely to run into issues due to the way a theme was created. I’ve faced this is the past while learning how themes work, generally it is worth the effort to create a fresh theme, plus if you modify someone else’s you will have to keep it up-to-date anyway. So it will be much easier if you know how and why a theme was created in a certain way.

 

Create a Child Theme

Now if all you want to do is modify small sections of a website then creating a child theme is a good way to go. With this you create a second folder related to the origin folder which includes files that override the original.

The upside of this option is you can keep the original theme updated with patches from the original themes author. This will work quite well, as long as you haven’t done anything that will adversely effect the theme.

The first two options are straight forward so really don’t need any explanation, assuming of course you have basic skills in web development. Creating a Child Theme is a bit more involved however it is not that difficult once you get your head around the basic concepts.

To start you will need to find the theme you wish to modify within the site code. You will find this in the /wp-content/themes folder. Once you find the theme create a folder with the name of the origin with -child added to the end of the name. As follows:

 

create a child theme

 

Once you’ve created the file structure you need to create the file style.css. In this you need to put something like the below text in it:

 

*
 Theme Name: Hemingway Child
 Theme URI: http://example.com/hemingway-child/
 Description: Hemingway Child Theme
 Author: John Doe
 Author URI: http://example.com
 Template: hemingway
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: hemingway-child
*/
/* -------------------------------------------------------------------------------- */
/* 3. Header
/* -------------------------------------------------------------------------------- */

 

Just modify the relevant entries to reflect your chosen theme. This style.css above is from a working website using the hemingwaytheme.

Now that you’ve created your child theme all you need to do to modify your new child theme is to copy whatever file you wish to modify into the new folder. You can also add any style modifications to the style.css file create above.

Once you’ve created and uploaded the child theme you should see something like this in the admin page. Note the original theme below:

 

theme details

 

For the website in this example the original theme looks like this:

 

original site

 

When you activate the child theme you will see your modification as follows:

 

modified version

 

As you can see the menu has changed colour and the banner has been removed from the top image. Apart from that there is little difference between the child theme and the original theme.

 

Conclusion

Creating a custom looking theme is a important part of having a website that stands out. If you just go with one of the free themes you can easily add to your WordPress site you will have a very generic looking site. More importantly from experience these themes usually fit a very specific role and while they generally work quite well for the task they were created for it is likely not a perfect fit for your website.

If you are planning on getting a website up quickly and if you don’t want to invest allot of time managing themes I would recommend creating a child theme, if on the other hand you have the skills and time I would strongly recommend creating a theme from scratch, you will then have full control and likely not have any baggage from the theme you don’t need for your site.

If you have an questions or comments regarding this article please leave a message below. We’d love to hear from you.

3 thoughts on “Customise your WordPress theme

  1. train Info - March 21, 2016 at 2:03 am

    Hello just wanted to give yyou a quick heads up.
    The text inn your article seem to bbe running off the creen in Chrome.
    I’m noot sure if this is a formatting issue
    or something to do with browser compatibility but I thought I’d
    post to let you know. The design look great though!

    Hoope you get the problem resolved soon. Many thanks

    Reply
    • ben - April 3, 2016 at 12:12 am

      That’s interesting. I couldn’t reproduce the issue on either a Windows or a Mac machine.

      Reply

Leave a Reply