Child themes are essential to anyone who wants to modify a WordPress theme. If you do not create a Child Theme and instead modify the original theme, any future updates to that theme could completely overwrite your edits. Fortunately, creating a Child Theme is not overly difficult and is extremely flexible. You can keep things as simple as adding CSS to your Child Theme's style sheet or as advanced as adding templates or functions your Child Theme. In this example we'll keep it simple with some basic CSS changes to customize the look of our Site Title and Site Description.

  1. The first step in creating a Child Theme is to create a new directory inside your wp-content/themes directory using either the cPanel File Manager or an FTP program. You can name this anything you like (without spaces or reserved characters like slashes, percent signs, asteriks, etc.). In this example, we'll create a Child Theme of the default TwentyEleven theme and name it christi-theme. You can name your Child Theme whatever you like.

    wp-create-child-theme-directory

  2. Next, create a new file named style.css inside your new Child Theme directory.

    wp-create-style-css

  3. Open your new style.css for editing. In the cPanel File Manager you can use either Edit or Code Editor to edit the file.

    wp-edit-style-css

    In this example, we'll be inserting the following code into the style.css file:

    /*
    Theme Name: Christi's Theme
    Description: Christi's child theme for the twentyeleven theme
    Author: ChristiN
    Template: twentyeleven
    */

    @import url("../twentyeleven/style.css");

    Let's look at this line by line to fully understand what this does. (Note that /* and */ are simply opening and closing tags for the information header)

    Theme Name: The "friendly" name for your theme. This is what you will see displayed for your Child Theme when viewing your list of themes in your WordPress dashboard inside Themes > Appearance.
    Description: Short description of your theme (optional).
    Author: Your name. (Yes, this is optional, but why not give yourself credit?)
    Template: This specifies the Parent Theme (the directory name of the theme that your Child Theme uses templates from)
    @import url: This imports in the Parent Theme's style sheet. Adjust as needed to reference the correct Parent Theme style sheet.

    Please note, if your Child Theme needs to support Right-to-left languages, be sure to import the RTL style sheet. For example: @import url("../twentyeleven/rtl.css");)

    wp-begin-child-theme-style-css

  4. Click the Save Changes button to save the style.css file.
  5. To make sure our Child Theme is now available in our WordPress dashboard, go to Appearance > Themes in the dashboard and you should see it listed under Available Themes. Click the Activate link under your Child Theme to make it the active WordPress theme.

    wp-child-theme-available

  6. If you want to have a nice thumbnail of your Child Theme show up in the Theme view in WordPress, you can add a screenshot to your Child Theme's directory. It's best to wait until you've made your changes so that you can take a good screen shot of your theme. The file should be named screenshot.png (alternatively can be .jpeg or .gif). Recommended image size for a theme screenshot is 300W x 225H (pixels). The file should be placed just inside your Child Theme directory.
  7. Next, let's add something in our style sheet to change our Child Theme. In this example I want to change the font, font color and alignment of of my Site Title and Site Description. Here's how my theme currently appears:

    wp-child-theme-site-title-before

  8. In my Child Theme style.css file, I'm adding the following CSS after the @import line. It's important that rules be added after this line. If rules are placed before the @import line it will prevent the Parent stylesheet from being imported.

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

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

Here's the updated site with the new styles in action:

wp-child-theme-site-title-after

There are many things you can do with a Child Theme. If you would like to go further in depth with Child Themes, please see the WordPress Codex on Child Themes.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

News / Announcements

Update to SSL Certificates - Certificate Warnings
1969-12-31 11:00 am EST
Hits: 696

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

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

Not a Customer?

Get web hosting from a company that is here to help.