Post navigation

How to Modify a WordPress Stylesheet for a Child Theme

WordPress has many outstanding attributes that have helped to make it the most popular blogging platform in the world and one of these is the parent and child theme format. The introduction of this means that when modifications are made to a WordPress theme, upgrades to newer versions can be made without losing any of the new code. This is a huge bonus for website developers, who in the past, would have to spend hours finding customised code and applying them to upgraded themes.

Modifying a WordPress stylesheet for a child theme is a relatively simple process. The first step is to ensure that the child theme itself has been set up. To do this, you will first of all need to login to your FTP client and look at the WP content directory for the installed WordPress. Once there, enter the “themes” section and you will see a list of the themes available. If, for example, there is a theme there called “holiday” and you wish to create a child for it, you will now need to create a new folder and call it “holiday-child”.

The next step, is to create a valid stylesheet called style.css and put it in the folder. The easiest way to do this is to simply create one using your favourite text editor, save it and then transfer it via the FTP. The new stylesheet should contain the following minimum information.

Although much of the information in the lines above is generic, the one thing that must be altered for the child theme to work is “parenttheme”. In the example we are using, this should read “holiday”. The theme name should also be renamed holiday-child.

Whilst the above stylesheet is valid, what will happen when it is activated is that the site will load without any new formatting, as of course, the stylesheet does not have any actual CSS in it at the moment! Adding the following code would load the parent themes CSS file inside the child theme, thus making the site formatted.

@import url(“../parenttheme/style.css”);

Again, the phrase “parenttheme” would be replaced with “holiday” in the example that we are using.

Once this has been done, it can be uploaded to the site via FTP.

The second step is to then activate the child theme. Having logged into WordPress admin area, you should navigate over to “Appearance>Themes” where you will see that the parent theme is currently active. If everything has worked correctly, you should also be able to see the new child theme listed below. Clicking on “Activate” will send this theme live.

Keen observers, upon checking their website, will notice that there has been no change. The reason for this is because at this stage no actual modifications have been made to the theme. All that has happened is that a child theme has been created.

To make modifications to the child theme, you now only need to edit the style.css file that you originally created in a text editor, and then upload it via FTP again.

The wonderful thing about doing it in this way is that any changes that are made do not impact on the parent theme. This means that if a massive mistake is made, then, the parent theme can simply be reactivated in order to get the site back up and running again. At the same time, if there is a core code update, the child theme will be unaffected. Due to the fact that the site cannot be “damaged” in any way by using child themes, it also provides a great opportunity to experiment with code and develop some web design skills in a safe environment.

Creating a child theme for your WordPress blog takes just a matter of minutes, and after that, editing the child theme is, to use a pun, child’s play itself. In no time at all, you will be able to create unique looking sites that when built upon a good parent theme, will rival any commercially available themes for none of the cost.

Guest author Richard McMunn is founder of How2become.com, the UK’s leading training and recruitment website for public sector careers. You can also find How2become on Facebook.