A Child Theme is a theme that overrides and adds elements to another theme (the “Parent” theme) without touching any of the Parent theme’s code.
Why use a Child Theme?
The #1 Rule of WordPress development is never modify WordPress files.
This means do not edit:
WordPress core files
Plugin files
Theme files*
Creating a Child Theme
We are going to create a Child Theme of default WordPress theme Twenty Thirteen named “Awesome“.
Step 1: A Theme Folder
Every theme for WordPress needs its own folder.
Step 2: A style.css file
At a minimum, your Child Theme needs a style.css file. The style.css file tells WordPress to load the Parent Theme’s files after the Child. Place this file inside the Child Theme’s folder. Make sure it is in the root level of the theme folder and not inside a subfolder.
This is the folder name of the parent theme. If this variable is not correct the Child Theme will not work.
@import url("../twentythirteen/style.css");
This line of code tells WordPress to load the parent theme’s style sheet after the Child theme. This line needs to point to the Parent Theme’s style.css file "../twentythirteen/style.css"
Step 3: A screenshot.png file
A theme’s screenshot is the thumbnail image that shows up under Appearance > Themes in the WordPress admin.
The recommended image size is 880×660.
Activate your theme!
After the theme folder is added to /wp-content/themes go to Appearance > Themes in the admin.
You should see your theme listed there.
Where we are now
The 2 files currently in our example Child Theme illustrate how a Child Theme’s files affect the Parent’s files — they either override elements and add functionality to its identically named file, or completely replaces it.
Overriding the Parent Theme’s CSS
The Child Theme’s style.css file will override styles in the parent theme’s style.css file with the same selectors.
Overriding the Parent Theme’s Templates
Inside the twentythirteen folder are all of Twenty Thirteen’s the template files. You can create your own versions of these files in your child theme.
Adding new Templates
In addition to being able to override existing templates with a Child Theme, you can also create new templates.
Summary
Our Child Theme has 1 file that overrides elements in a file in the Parent Theme, 2 files that replace files in the Parent Theme and 1 brand new file that does not exist in the parent theme.
Group Exercises
1. Create a child theme of Twenty Fourteen
What folders and files did you need to create?
Did your theme show up under Appearance > Themes in the dashboard? If not, what steps did you take to troubleshoot?
Group Exercises
2. Change all the links in your theme to red, active links to green, and visited links to orange
What file did you need to edit to do accomplish this?
What selectors did you apply the new color styles to?
How did you determine the selectors to use?
Group Exercises
3. Change the “Proudly powered by WordPress” message in the site footer
What file did you need to create?
What steps did you take to create the file and change the message?
Group Exercises
4. Make a new template for the home page with no sidebar
What file did you create?
What steps did you take to create the file?
What code did you add to make it a new template?
How did you remove the sidebar?
How did you assign the new template to the home page of your site?
Quiz
1. When developing for WordPress what files should you never edit?
Core WordPress files
Plugin files
Theme files
All of the above
Quiz
1. When developing for WordPress what files should you never edit?
Core WordPress files
Plugin files
Theme files
All of the above
Quiz
2. What file must you create to make a child theme?
functions.php
index.html
style.css
readme.html
license.txt
Quiz
2. What file must you create to make a child theme?
functions.php
index.html
style.css
readme.html
license.txt
Quiz
3. What two lines must be included in the style.css file of your child theme in order for it to work properly?
Theme Name: [Name] and Template: [parentfolder]
Theme Name: [Name] and Version: [#]
Description: [Theme description and @import url("../parentfolder/style.css");]
Template: [parentfolder] and @import url("../parentfolder/style.css");
Theme Name: [Name] and @import url("../parentfolder/style.css");
Quiz
3. What two lines must be included in the style.css file of your child theme in order for it to work properly?
Theme Name: [Name] and Template: [parentfolder]
Theme Name: [Name] and Version: [#]
Description: [Theme description and @import url("../parentfolder/style.css");]
Template: [parentfolder] and @import url("../parentfolder/style.css");
Theme Name: [Name] and @import url("../parentfolder/style.css");
Quiz
4. How do you get a picture of your theme to show up under appearance > themes in the dashboard?
Upload screenshot.png to the /images folder of the parent theme
Upload screenshot.png to the /images folder of /wp-admin/
upload screenshot.png to the /images folder in /wp-content/
Upload screenshot.png to the /images folder of the child theme
Quiz
4. How do you get a picture of your theme to show up under appearance > themes in the dashboard?
Upload screenshot.png to the /images folder of the parent theme
Upload screenshot.png to the /images folder of /wp-admin/
upload screenshot.png to the /images folder in /wp-content/
Upload screenshot.png to the /images folder of the child theme