Child Themes

Tools we will be using in these sessions – Dreamweaver, Google Chrome developer tools.

Okay on with the tutorial…

Why Create a child theme in the first place?

Well wordpress has an enormous amount of functionality on tap and this is really good news. It means that you can find a theme that already does most of what you want and then customise it further using the sites css and templates.

Why not just edit the parent themes CSS?

Good question but there are good reasons why you would not do that…

1) by first creating a child theme that builds on top of the selected (parent theme) its possible to just change the bits of CSS that you want without compromising the original CSS. The way the cascade works is that it first loads the parent theme e.g the selected theme and then loads the child theme over the top of it and because any CSS contained in the child theme is loaded last it overwrites the parents CSS.

2) This is a great idea because when the parent theme is updated you get all of the benefits but without it over-writing your modifications as they are all contained in the child themes style.css.

3) To create a child theme we need to first create a folder in the themes folder in your wordpress site. So go to your folder then into wp-content then themes (you will see the twenty twelve, twenty thirteen and twenty fourteen theme folders there).

This is where you create your new folder – name it twenty fourteen-child – it doesn’t actually need to be called that but that is the convention so let’s stick with it as it is pretty logical anyway.

4) Once the folder is named you need to create a style.css file and save it in your new folder. IMPORTANT: This file must be called style.css not Style.css or styles.css it must be style.css

5) Splendid so far so good (hopefully) next thing to do is add a set of /*  */ comments and between these comments put the following info – you can even cut and paste it from here if you like :

Theme Name: Child Theme Name Goes Here
Description: child theme based on twenty fourteen
Author: Trev
Version 0.0.1
Template: twentyfourteen

Right let’s have a look at what we have here:

The first line Theme Name: Put Your Desired Name Here

This will show up as the name of the theme that will eventually show up in your themes area in the wordpress dashboard.

next line is :

Description: child theme based on twentyfourteen theme

In fact all of this info will show up in the new theme in your dashboard  and note: although you do not actually have to enter all of the information for things to work,  there are two lines that you must include – You must add the template line where you supply the name of the template your child theme will be modelled on and you must include a Theme Name.

Template: twentyfourteen

as you must supply the name of the template you wish to base your child theme on.

If you load this CSS file into your new folder and then go through dashboard to view available themes you will see yours  so find it, select it and install it.

It will look horrible as your new style.css will have over-ridden the parent themes CSS but this is quite cool as you can now see that it is possible to build your own theme using the parents functionality from scratch if you like.

Ok the next step is to add one line of code outside of the comments in the style.css

and the line is:

@import url (‘../twentyfourteen/style.css’);

Ok let’s see what its made up of and what it does… well first it needs to go up 1 level to get out of your child theme folder via the ../  then it looks for and finds your parent theme folder in this case twentyfourteen and finally it imports the style.css from the parent theme – now when you upload the style.css If this is a good day, you’ll find that the child theme now looks identical to the twentyfourteen parent theme.

This means that you can now start doing stuff with the child theme css that will over-ride the main (parent) themes CSS  but without compromising the code the parent is based on.

To be continued…

Posted in Wordpress Tutorials