Creating a Child Theme in WordPress

If you want to modify a WordPress theme, you should create what’s called a child theme. A child theme allows you to make updates that would not be overwritten by updates to the theme. Theme updates occur on a regular basis, usually in response to updates to WordPress.

If the modifications were made to the main theme, then they would be erased upon the theme update. The child theme allows you to avoid losing your modifications. The following article takes you through the steps needed to create a basic child theme.

How to Create a Child Theme

    1. Login to the cPanel.
    2. Open the cPanel File Manager and then go to your WordPress installation directory. Look for the wp-content/themes folder.
    3. Create a New Folder and name it 2014child. You can actually name this folder any name, but to keep things simple and easy to understand we will name it 2014child.
    4. In File Manager, click on the newly created folder to open it. Click on Create New File to create a new file named style.css.
    5. Using the same steps, create another file called functions.php.
    6. In File Manager, click on your newly created CSS file and edit the file by clicking on Code Editor in the menu. Add the following into the blank style.css file:

      /*
      Theme Name: 2014-Child-theme
      Author: My Child theme
      Template: twentyfourteen
      */
    7. Click Save Changes in order to save the changes to the style.css file.
    8. Next, you will edit the functions.php file that you just created. Click on the file, and edit it with the Code Editor as you did the last file. Add 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' ) );
      }

      This code is the final step in creating the child theme. As per WordPress, the code in the functions.php allows you to enqueue the parent theme stylesheets. NOTE: The previous method of using “@import” is no longer considered best practice for importing the parent theme stylesheet. For more information, please see WordPress Codex: child themes.
    9. Click Save Changes in order to save the changes to the functions.php file.
    10. Activate child theme

      Go back into your WordPress dashboard. In the menu, select Appearance >Themes. When you look at the list of themes, you should see your Child theme listed under available themes. Click on ACTIVATE under your child theme to make it the active WordPress theme.

    11. Optional step: In order to provide a thumbnail of your Child theme in the theme list, you will need to add an image in the folder that you created for the child theme. The image is typically a screenshot of the theme and should be either a PNG, JPEG or GIF file. Make sure that the size of the image is 300 px wide by 225 px high. Once you have the file, name it screenshot.jpg and copy into the child theme folder.
    12. We will be adding code to the CSS file of the child theme in order to change the font, font color and alignment of the site title. The code also centers the entire site since the 2014 theme was designed to be left-aligned.

      #site-title
      #site-description {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight:bold;
      text-align: center;
      margin:10px auto;
      color #e56c07
      }
      #site-title a {
      color: #0c8fbe
      }
      .site {
      margin: 0 auto;
      }

The code above changes your fonts and centers the site orientation. To see a before and after view of the WordPress site with the changes take a look at the screen captures below. The original site is left aligned, so you will see a white space on the right. The child theme is centered so that content is centered in the screen.

BEFOREAFTER
Unmodified 2014 Theme

Child theme modifying the 2014 theme

  1. Click the Save Changes button to save our new CSS declarations.

This completes the tutorial on creating a child them using the WordPress twenty-fourteen theme. Note that this is only the foundation upon which you will base all of your future changes to the site. Child themes are used to preserve modifications to a theme so that theme updates do not destroy your changes.

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

9 thoughts on “Creating a Child Theme in WordPress

  1. Thanks for info. Other blogs provide code that wasn’t working on my website, but your code fixed the problem!

  2. I am not managing to get this to work.

    I’m working on the temp url provided by inmotion and I can’t see the child theme when I am on dashboard?

    Also – can I edit the header.php file in the same way? By making a copy in the child folder?

    Thanks

    Kay

  3. I just want to say… This was exactly what I was looking for. Thank you so much for this post. So glad I signed up with InMotion Hosting. 🙂

  4. Hello,

    I have followed the steps to install a child theme but I have the following message in my wp dashboard:

    Broken Themes

    2014-Child-theme

    The parent theme is missing. Please install the “twentyfourteen” parent theme.

    Install parent theme

    But my current activated theme is “empathy”, I have deleted twentyfourteen.

    What can I do ?

    Thanks,

     

    Gaby

     

  5. Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    NameDescription 
    jobrollerThe parent theme is missing. Please install the “jobroller” parent theme.

    Does anyone have an idea on how to resolve these.

    1. Hello Michael,

      Thank you for contacting us. It sounds like the Theme you are installing is missing the stylesheet, or .css file.

      Are you following the guide above? What step are you getting that error on?

      Thank you,
      John-Paul

Was this article helpful? Join the conversation!