Child Theme Training Module

Child Theme Module: make.wordpress.org/training/modules-in-progress/child-theme-module/

Slides: slides.thetracyl.com/burbs/

What is a Child Theme?

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.

/*
Theme Name: [Your Theme Name]
Theme URI: [Your URL]
Description: The custom theme [Your Theme Name] using the parent theme Twenty Thirteen.
Author: [You]
Author URI: [Your URL]
Template: twentythirteen
Version: 1
*/

@import url("../twentythirteen/style.css");

Step 2: A style.css file

Template: twentythirteen

@import url("../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?

1. Core WordPress files
2. Plugin files
3. Theme files
4. All of the above

Quiz

1. When developing for WordPress what files should you never edit?

1. Core WordPress files
2. Plugin files
3. Theme files
4. All of the above

Quiz

2. What file must you create to make a child theme?

1. functions.php
2. index.html
3. style.css
4. readme.html
5. license.txt

Quiz

2. What file must you create to make a child theme?

1. functions.php
2. index.html
3. style.css
4. readme.html
5. 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?

1. Theme Name: [Name] and Template: [parentfolder]
2. Theme Name: [Name] and Version: [#]
3. Description: [Theme description and @import url("../parentfolder/style.css");]
4. Template: [parentfolder] and @import url("../parentfolder/style.css");
5. 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?

1. Theme Name: [Name] and Template: [parentfolder]
2. Theme Name: [Name] and Version: [#]
3. Description: [Theme description and @import url("../parentfolder/style.css");]
4. Template: [parentfolder] and @import url("../parentfolder/style.css");
5. 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?

1. Upload screenshot.png to the /images folder of the parent theme
2. Upload screenshot.png to the /images folder of /wp-admin/
3. upload screenshot.png to the /images folder in /wp-content/
4. 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?

1. Upload screenshot.png to the /images folder of the parent theme
2. Upload screenshot.png to the /images folder of /wp-admin/
3. upload screenshot.png to the /images folder in /wp-content/
4. Upload screenshot.png to the /images folder of the child theme

THE END

Questions?

Child Theme Module: make.wordpress.org/training/modules-in-progress/child-theme-module/

Slides: slides.thetracyl.com/burbs/