Creating a Child Theme

Topics covered in this WordPress tutorial:

Adding a custom header with the theme name, author, etc., Importing style sheets using wp_enqueue-script()

Exercise Preview

Exercise Overview

In the last exercise, you added the Obscure theme to the Monteith Restoration & Performance blog. This theme is very close in color and structure to what Monteith wants for their site, so it’s a good one to use as a starting point. In this exercise, you will customize that theme to match MRP’s style. While you may be tempted to jump into the Obscure theme and start changing the CSS, this is not the preferred method of modifying an existing theme. It is better practice to create a child theme, override specific files, and leave the parent intact. This method helps prevent your work from being overwritten when updating the parent theme in the future.

Creating a Child Theme

First, we need to create a new folder for the child theme.

1. Open a Finder (Mac) or Explorer (Windows) window.

2. Navigate to the appropriate folder for your system:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrpBlog > wp-content > themes
   • Windows: C: > xampp > htdocs > mrpBlog > wp-content > themes

3. Create a new folder and name it: obscure-mrp

   Now let’s create a new style sheet for the child theme.

4. Open your code editor.

5. Create a new file.

6. Save the file as style.css into the obscure-mrp folder you just created:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrpBlog > wp-content > themes > obscure-mrp
   • Windows: C: > xampp > htdocs > mrpBlog > wp-content >
     themes > obscure-mrp

Adding the Header Information

At the top of every WordPress style.css file is a header containing information about the theme. This information is what WordPress displays in the Theme section. Let’s add it to our style sheet.

We saved the header information in a text file so you don’t have to type it all in.

1. In your code editor, open Header-Info.txt from Desktop > Class Files > WordPress.org Class > Child Theme Files.

2. Select all the text in the file by pressing Cmd–A (Mac) or Ctrl–A (Windows).

3. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.

4. Close the file. You should be back in style.css.

5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the text.

6. You should now have the following code:

   /*
   Theme Name:     Monteith Restoration and Performance
   Description:    Custom theme based on the Obscure theme. Obscure must be installed in order for this theme to work. 
   Author:         Your Name
   Author URI:     http://www.nobledesktop.com/
   Template:       obscure
   Version:        1.0
   */
   

7. Next to Author, where it currently says Your Name, change it to your name.

8. Save the file.

Importing Style Sheets

We want to use most of the parent styles but replace some of them with styles from our child theme. In order to use styles from the parent theme, we have to enqueue the parent and child theme’s style sheets using wp_enqueue_script(). This has to be done in a file named functions.php. Let’s create this file in our child theme folder.

1. Create a new file.

2. Save the file as functions.php into the obscure-mrp folder:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrpBlog > wp-content > themes > obscure-mrp
   • Windows: C: > xampp > htdocs > mrpBlog > wp-content >
     themes > obscure-mrp

   We saved the necessary information in a text file so you don’t have to type it all in.

3. In your code editor, open enqueue-script.txt from Desktop > Class Files > WordPress.org Class > Child Theme Files.

4. Select all the text in the file by pressing Cmd–A (Mac) or Ctrl–A (Windows).

5. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.

6. Close the file. You should be back in functions.php.

7. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the text.

8. You should now have the following code:

   <?php
   
   add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
   function theme_enqueue_styles() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
   }
   

9. Save the file.

   Awesome! Our child style sheet will now load all the existing styles from the parent.

Activating the Theme

1. Open Chrome and go to:
   • Mac: localhost:8888/mrpBlog/wp-admin
   • Windows: localhost/mrpBlog/wp-admin

2. If asked, enter your username and password.

3. On the left side of the Dashboard, mouse over Appearance and click Themes.

   You should now see the Monteith Restoration and Performance theme listed as one of the available themes.

4. Mouse over it and click Activate. Once the file has successfully been activated, it will say Active: before the name of the theme.

5. Click the Monteith Restoration & Performance link at the top of the page to preview the theme. It should look exactly like its parent, Obscure. In the next exercise, you will begin adding your own styles to this theme.