Raising a child (Theme)

Raising your first child theme

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Raising your first child theme

First off, what is a child theme?

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Why should I use a child theme for my WP site?

  • Developing a child theme is an excellent way to begin learning how to develop themes for WordPress.
  • It is a great way to rapidly develop themes.
  • Developing a child theme allows you to “lean” on the development of other programmers (some of whom are more detail-oriented than you are). It allows you to develop highly advanced themes in very little time.
  • It’s trendy.

Before you get started:

First off I’m assuming you have some experience with PHP, MySQL, and WordPress. This includes some experience theming for WordPress.

Ready, Set, Go!

The first step is to go to WordPress.org and download a fresh WordPress code base (click on the blue “Download WordPress” button).

Fire up your local web development environment using XAMP or similar service. I have an actual LAMP (Lynux Apache MySQL PHP) stack on my development machine. I find this to be a bit cleaner and less buggy. However you do it, install and get WordPress running in an environment you have access to.

Find a theme you’d like to work with. In this tutorial we’ll work with the twenty thirteen theme that shipped with WordPress. The most recent version of WordPress does not include Twenty Thirteen. To get it click to: https://wordpress.org/themes/ and search for twenty thirteen. Download it and add it to your themes directory in the wp-content/themes folder.

Getting down to it…

  1. Select a theme you’ll make a child of.
  2. Create a folder and give it a name that matches the parent theme. Place this folder in the wp-content/themes directory of your installation. In this example, I’m using the twenty thirteen theme that ships with WordPress. My folder name is twentythirteen-child.
  3. In your new folder create a style.css file and add information to the top of the page, so WordPress knows which theme is the parent.

/*

Theme Name:   Twenty Thirteen Child Theme
URI:    http://example.com/twenty-thirteen-child/
Description:  Twenty Thirteen Child Theme
Template:     twentythirteen
Version:      1.0.0
License:      GNU General Public License v2 or later License
URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentythirteen-child

*/

(This bit of code in your css file tells wordpress about the theme)

Note: The Template should be the same name as the parent theme directory, and the Text Domain should be the same name as the child theme directory.

4. Create a functions.php file and add it to your theme directory.

Add the following code:

<?php
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is parent’s style.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

(This bit of code points any parent javascript or css to your new theme.)

Don’t forget to add the opening and closing php tags: <?php … ?>

5. That’s it. You now should see your child theme in the Themes directory.

Well, that’s great. Now what??

Now you start making modifications to the theme. For example, in the twenty thirteen theme there is a tan color for the navigation bar background. If you wanted to change that to a different color, add a rule for that style.

Yikes! How do I find what the rule is called??

Firefox and Chrome both have a code inspector. If you’re using either of those browsers, right-click on the element you’re interested in, than click “inspect element.” A split screen will appear showing you the html and css for that spot in the code. It’s a super handy way to inspect site designs.

Once you’ve determined what the class for the nav bar (or whatever element you might want to style), add the new rule to your style.css file (under the header that you added in a previous step) in your child theme directory (e.g. wp-content/themes/twentythirteen-child/style.css).

For changes in the structure of pages, you’ll create template files in your child theme directory. For example, if you wanted to change the format of the footer, you’d copy the footer.php file from the twentythirteen theme directory into the child theme directory (twentythirteen-child). Your child theme directory would now have three files (style.css, functions.php, and now footer.php).

Any template file in the child theme directory will overwrite the parent template file. Just like any rule in the child theme’s style.css file will overwrite any rule in the parent style. If the file is not there the child theme defaults to the parent’s files and rules.

…and that folks is how it works.

For further reading…

This is just scratching the surface of theming for WordPress, but it’s a great way to get started.

Please see the following links for more information about theming:

Codex Page for child themes: https://codex.wordpress.org/Child_Themes
WordPress Codex Main Page: https://codex.wordpress.org/Main_Page
Theme Development: https://codex.wordpress.org/Theme_Development
Template Files: https://codex.wordpress.org/Stepping_Into_Templates
Infographic on the Anatomy of a Theme: https://yoast.com/wordpress-theme-anatomy/