Child themes

As you gain experience and confidence in using WordPress you may want to try new techniques such as theme design and plugin development.

Theme design is probaby the one you will start with.

You can learn how to create a theme from the ground up but there is a method that has a lower learning curve and provides you with a safety net along the way – that’s child themes.

The way it works is that your parent theme will read the css in your style file and prepare the layout. However if it then detects a child theme it will read the css it contains and will overwrite the parent theme’s css where appropriate.

As ever there are a number of techniques to simplify this procedure, including a clever plugin to create and edit child themes.

There are a number of advantages of a child theme:-

Requirements to build a child theme

  1. A live WordPress website
  2. A current theme that you want to use as the parent theme
  3. An installation of the plugin Orbisius child them creator
  4. An installation of the Firefox Developer edition browser on your computer
  5. An Internet connection

For this blog I am going to use a website I have already mentioned, harrogateaccessplatforms.co.uk and the Vantage theme.

The first step when logged into the Admin screen is to go to Appearance->Orbisius Child Theme Creator and from Available parent themes choose the one you want. Tick all three boxes and then click ‘Create Child Theme’.

Orbisius creator screenshot

Orbisius child theme creator screenshot

Now go to the site by clicking on ‘Visit site’ which will drop down when you hover your cursor over the site name top left next to the Home icon.

Now right click on the white background and choose ‘Inspect element’ from the drop down menu. Two sections will open up at the bottom of the page, html on the lift and css on the right. Find #masthead and {background followed by a circle. Click on the circle and choose a colour from the colour scheme which opens (I chose red #F64414). The masthead shoud now have changed to red.

HAP header in red

Now copy the css from #masthead to the curly bracket after border-box;

#masthead {
background: #F64414 none repeat scroll 0% 0%;
padding: 0px 35px;
box-sizing: border-box;
}

Go back to the site’s dashboard, choose Appearance -> Orbisius Theme editor. On the left is a text area called style.css. Scroll to the bottom and add the css copied from the browser #masthead to border-box;}. Click the teaxt area’s Save button.

Red header with white text

Now go back to your browser where the masthead is red and the grey text ‘Working at height’ would show up better if it was white. Highlight the text, right click and choose ‘Inspect element’. On the right you will find a css section beginning ‘#masthead .hgroup .support-text’. Scroll down to color, click on the circle and chnage the colour to white or #FCF7F7.

Copy the section:-

#masthead .hgroup .support-text {
line-height: 1.2em;
position: absolute;
right: 0px;
top: 50%;
margin-top: -0.6em;
color: #FCF7F7;
max-width: 50%;
font-size: 2em;
}

Paste it into the text area of style.css after clicking on Appearance -> Orbisius theme editor and again save it. Visit the site again and you now have a red masthead with white text.

Orbisius theme editor

In this way you can work through a site changing all manner of properties such as font, font size, font colour, background colour of the masthead, body, pages and posts.

I hope this post has been useful.

Get in touch if you have any questions.