InMotion Hosting Support Center

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;
    }

  13. 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

  14. 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.

Was this article helpful?
Continued Education in Course 105: Changing the Wordpress Appearance
You are viewing Section 1: Creating a Child Theme in WordPress
Section 2: Add New Media in Wordpress 3.5.1
n/a Points
2018-03-20 12:50 pm
Thanks for info. Other blogs provide code that wasn't working on my website, but your code fixed the problem!
Staff
11,043 Points
2019-02-12 11:14 am
Glad to hear that you were able to get this working! Thanks for the feedback.
n/a Points
2016-10-10 2:19 pm

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

Staff
31,595 Points
2016-10-10 5:05 pm
I recommend testing a WordPress site with a host file modification. Just be sure to remove it when you go live.

Here is a helpful link to the official WordPress guide on Designing Headers.


Thank you,
John-Paul
n/a Points
2016-09-14 10:01 pm

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. :)

n/a Points
2016-09-12 4:05 pm

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

 

Staff
43,761 Points
2016-09-12 4:33 pm
You will need to reinstall the 2014 theme in order to use that child theme.
n/a Points
2015-05-21 5:39 am

Broken Themes

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

NameDescription  jobroller The parent theme is missing. Please install the "jobroller" parent theme. Delete

Does anyone have an idea on how to resolve these.

Staff
31,595 Points
2015-05-21 10:30 am
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

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

10 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!