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.
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.
- Log into cPanel and access the File Manager program
Select Web Root and click ‘Go’.
As per the instructions from the WordPress site http://codex.wordpress.org/Child_Themes, we need to:
- Create a directory in the themes directory to hold the child theme files.
- Create a file called ‘style.css’:
- 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
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:
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).
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.
Check back for Part 3, where I will show you how to customize your child theme files.