A presentation from the Rockford WordPress Meetup on basics of child themes.

1. Child Themes

2. What is a Child
Theme?

3. A Child Theme Is a Theme
Built on Another Theme
You pick your theme, then you can customize it using a
child theme, so it still is essentially the same theme, just
*your* way.

4. A Child Theme Needs a
Parent
A child theme inherits the characteristics of the parent
theme, from the function to the appearance. The only
changes to the parent are what you make in the child
theme.

5. A Child Theme Only Needs
One File
At its core, a child theme only needs a style.css file in a
folder to be a child theme. You can have as many files
as you need or want, but you only need a few lines of
CSS to make a child theme. You should do it using a
functions.php file, but that is not strictly necessary.

6. Why Child Themes?

7. Safe Upgrading
• If you make any changes to your theme, all
your changes can be lost when you update.

8. Quickly Get a Customized
Theme
• You’re not reinventing the wheel; the core
development is done for you.
• You only have to change the things you want,
you can leave everything else.

9. Learn Theme
Development
• You can learn how themes work by modifying
code that others have written.

10. How to Child
Theme?

11. Select Your Parent
Theme• Perhaps you are using an existing theme (you
already mostly like how your theme works)
• If not, you’d need to select a theme to customize
how you want.
• I’d recommend using a well-known theme that is
a solid base, and isn’t elaborate (so you can
customize it how you want)
• One of the default (twenty themes), Genesis, or
Storefront (for a WooCommerce site)

12. Create Your Child
Theme
• Create the folder on your development site
(locally or development online) in `wp-
content/themes`
• It might be easier to keep things straight if
you name it `parenttheme-child` (no spaces!)

13. Create Your Child Theme
Pt. 2
• Create a text file, and name it style.css
/*
Theme Name: Rockford WordPress Meetup Child
Theme
Description: Twenty Seventeen Child Theme
Author: Andrew Wikel
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar,
responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/

14. Create Your Child Theme
Pt. 3
• This will give you a completely styleless site
right now.
• Create a text file named functions.php

15. Create Your Child Theme
Pt. 4
• If you want to get all fancy, you could add a
theme image. This image will show up in the
theme menu in WordPress.
• All you need to do is create a PNG file, named
screenshot.png, and place it in your theme’s
folder (in our case, twentyseventeen-child).
Make sure to put it in the top-level directory and
not in a subdirectory such as images.
• The recommended size is 880 × 660 pixels,
although it will be shown as 387 × 290. The
larger dimensions ensure that the image will
show up well on high-resolution screens.

16. How to Use Your
New Child Theme

17. How It Works
(technically)• Your child theme’s style.css will override the parent style.css if they
have the same rules.
• Other than the functions.php file, any file you add to your child
theme will override the same file in the parent theme.
• In most cases, it’s best to create a copy of the template files you
want to change from the parent theme, then make your
modifications to the copied files, leaving the parent files
unchanged. For example, if you wanted to change the code of the
parent theme’s header.php file, you would copy the file to your
child theme folder and customize it there.
• Your child functions.php is loaded in addition to (right before)
your parent functions. That’s why we don’t copy the contents of
that.