In part 1 of WordPress SEO with a Child Theme, I went through some issues with out of the box WordPress themes.

Now it’s time to get to the nitty gritty. I will be creating a Child Theme using the default WordPress theme ‘Twenty Fourteen’ as an example. Once created, I can then change the CSS freely without worrying that a theme update will undo my formatting changes. The parent theme can be kept up-to-date and the parent theme’s files will be updated independently of the child theme files.

Inigo-Montoya

Create Files Needed

You can use an FTP program like Filezilla or use the File Manager in cPanel to copy the files you will need. In this example, I will be using the cPanel File Manager.

  1. Log into cPanel and access the File Manager program

cPanel File Manager 1

Select Web Root and click ‘Go’.

cPanel File Manager 2

As per the instructions from the WordPress site http://codex.wordpress.org/Child_Themes, we need to:

  1. Create a directory in the themes directory to hold the child theme files.
    • Navigate to /wp-content/themes and click ‘New folder’. We will be naming this folder “twenty-fourteen-child”.Create Theme Folder
  2. Create a file called ‘style.css’:
    • Create Style CSS File 1Create Style CSS File 2
  3. Select the style.css file and click ‘Edit’. Copy these lines into the file and save it.

/*

Theme Name: Twenty Fourteen Child

Theme URL: http://example.com/twenty-fourteen-child/

Description: Twenty Fourteen Child Theme

Author: John Doe

Author URL: http://example.com

Template: twentyfourteen

Version: 1.0.0

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain:  twenty-fourteen-child

*/

 

 

/* =Theme customization starts here

————————————————————– */

 

With the above text in the CSS file, you now have the base of your child theme. You can now select the child theme from WordPress: Appearance->Themes, then activate the child theme you just created.

Go to Appearance->Editor and you should see something similar to below:

Wordpress Editor

As the style.css file is currently blank, it will load all the elements from the parent theme. Any elements of the parent style.css file that you copy to your child theme will be used when the child theme is activated. You can copy the elements you would like to change by switching between the ‘Select theme to edit’ option in the top right corner and selecting the parent theme.

To make this easier, I will switch to the Twenty Fourteen parent theme and copy the entire style.css file text (everything except the first comment block).

Copy styleCSS contents

 

Inspecting Elements

To find where you need to edit the CSS file, you can right-click on any part of the webpage and select ‘Inspect Element’. This will show you which part of the CSS file is being called to format that part of the page (some themes will have a mobile CSS file for responsive functionality).

You can also use this window to temporarily change the values in each element and view how it looks in real-time. This saves you having to save the file and reload the page each time you want to make a change.

Inspect Element

 

Check back for Part 3, where I will show you how to customize your child theme files.