Start a FREE 7 day trial! Get training videos and books, plus expert support:  

WordPress Tutorials and Blog Posts

How to Create a WordPress Child Theme

Child themes are the professional way to modify WordPress themes. Matt Mullenweg who founded WordPress said that "child themes are the only way you should build your WordPress site on top of a [another theme]".

A child theme can use all of the functions, CSS and design features from a parent theme. The child themes only needs to contain the details it wants to change.

In this tutorial we'll use the default Twenty-Eleven theme as an example parent theme.

Step 1. Create a folder for your child theme

tutuploadstutuploadsmedia_1330465605143.png
  • Go to /wp-content/themes/ and create a new directory for the child theme. You can name the directory anything you want. I chose /2011_child/ for easy identification.

Step 2. Create a new style.css for the child theme.

  • Create a new file in a script or CSS editor.
  • Add the code below.
  • Save it to /wp-content/themes/2011_child/style.css

 

/*
Theme Name: 2011_child
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: twentyeleven
Version: a-number--optional
.
General comments/License Statement if any.
.
*/
@import url(../twentyeleven/style.css);

 

If you don't use the line that begins with @import, the site will still show up, but there will be absolutely no styling included. By importing the original style sheet it will save you the time of creating an entire new style for every single element With this included you can just add the changes you want to make to a clean style sheet and but still use the best of the original. The child theme will take your changes first, and anything you don't specify it will grab from the parent theme.

Step 3. Activate the stylesheet

tutuploadstutuploadsmedia_1330469071931.png
  • Go to Dashboard > Appearance > Themes.
  • You'll see the child theme is now listed. There is no preview image, but the information we typed in the style sheet title, author and description do show up. You can click Activate to make this the working theme.
tutuploadstutuploadsmedia_1330467500918.png
  • You'll get a confirmation, but no preview. You could add a preview image, but it's not really necessary so we'll skip it.

Step 5. View the site with the child theme

tutuploadstutuploadsmedia_1330467660307.png
  • If you take a look at the site, it looks exactly like the original twentyeleven theme. That's because we imported all the styles from the original style sheet. But we want to make changes. First use Firebug to look at the styles for the site-title in the header.

Step 6. Change the header text style

tutuploadstutuploadsmedia_1330467784626.png
  • Firebug shows you the site title font color. To change it all we need to do is change this in our new style sheet and it will override the default style we imported.

Step 7. Add these lines to our style sheet.

tutuploadstutuploadsmedia_1330468602122.png
  • Simply changing the color: #111111 to red, or any color you want, and typing this into the new style sheet will change the color to red. Notice that the title isn't simple text, though. It's anchor text, and when you hover over it or click on it you get different effects. (You can copy and paste more complete code from Step 8, below.)
tutuploadstutuploadsmedia_1330468188500.png
  • Here's what you see in Firebug if you hover over the words of the title. You can see there is more to the CSS for this element than is readily apparent.
  • If you want to change all aspects of the title, open /wp-content/themes/twentyeleven/style.css/ in a script or CSS editor.

Step 8. Find the header section in the CSS stylesheet

Look at lines 16-49 in the original, and you'll see everything you need for the header title text and tag line is grouped together for you.

 

/* =Header
----------------------------------------------- */

#branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
}
#site-title {
    margin-right: 270px;
    padding: 3.65625em 0 0;
}
#site-title a {
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
    color: #1982d1;
}
#site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 3.65625em 0;
}
#branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
}

This may not be true for all elements in all templates. There may be inheritance issues, other style sheets, or just individual developer preferences in different templates that also affect a particular element. If that's the case you may have to search harder to gather everything.

Copy and paste all the styles for the header section into the new style sheet, and you can now manipulate every facet of the site title. It also includes the site-description and branding image. Anything you add to this new style sheet should override anything in the old one.

There is still something missing from the list we just made though. The font for the site-title. That's because it inherits the type face from another tag. You don't need to use Firebug to find the font style to change it. You can just add a line to #site-title to dictate what font you want. Changing this will be good practice for you.

Step 9. Changing the font family

tutuploadstutuploadsmedia_1330471331419.png

Specify the font family with another line added to your css style by adding the font-family attribute and specify your font.

#site-title {
     margin-right: 270px;
     padding: 0 0 0 0;
     font-family: Georgia;
 }

You might also have to change it in all the states for the a tag hover, visited, etc. It just depends on what you want.

 

#site-title a {
     color: #111;
     font-size: 30px;
     font-weight: bold;
     line-height: 36px;
     text-decoration: none;
     font-family: Georgia;
 }

With that single line I changed the font family to Georgia, which is a serif font. You can add any other attributes. I didn't change the tag line font. I'll need to modify #site-description to do that.

But what if there are complex styles or multiple style sheets so this simple change doesn't seem to work? In that case you can mark something a s ! important, and it will take precedence.

! important
Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight.

This would be used with 2011 especially in regards to the dark.css styles. The twenty eleven dark theme stylesheet and the link color option are loaded after the child theme stylesheet, therefore some color changes might not show as they are loaded earlier. The last style loaded wins. To break this rule, we have to label the earlier rule as being important.

There is no need to change the dark stylesheet or code in the twenty eleven parent directory, as we can correct this by giving our color change priority, we do this by adding !important to the style in our child theme. Do it for every attribute you want to take precedence. In the sample code below, the site title will show up red whether you are using the light template or the dark one.

#site-title a {
     color: red ! important;
     font-size: 30px;
     font-weight: bold;
     line-height: 36px;
     text-decoration: none;
     font-family: Georgia;
 }

The same techniques apply to the site-description or other elements in the header. If you don't add the font family to the site description, it will use the default font it inherits from the body tag..

#site-description {
 color: #7A7A7A;
 font-size: 14px;
 margin: 0 270px 3.65625em 0;
     font-family: Georgia;
 }

Step 10. Changing the header margin and position

tutuploadstutuploadsmedia_1330475988945.png

If you want to change the margins of the header text, you can do it by adding a line to #site-title and changing a line in #site-description.

Change padding to 0 in #site-title

Original:

#site-title {
     margin-right: 270px;
     padding: 3.65625em 0 0;
 }

Change to:

#site-title {
     margin-right: 270px;
     padding: 0 0 0 0;
     font-family: Georgia;
 }

The template authors define the rules in In "#site-title" and also in #site-description - this can get confusing if you miss one of these rules or don't know it exists.

Change the bottom padding in #site-description from 3.65625em to 0. The bottom spacing is defined in margin.

Original:

#site-description {
 color: #7A7A7A;
 font-size: 14px;
 margin: 0 270px 3.65625em 0;
     font-family: Georgia;
 }

Change to:

#site-description {
 color: #7A7A7A;
 font-size: 14px;
 margin: 0 270px 0 0;
     font-family: Georgia;
 }

Now there will be no padding above the title or below the tag line. Using Firebug to search out the rules is invaluable. Changing the horizontal position is a little different in this theme.

The right margin is set separately for each line using #site-title and #site-description. just as the top and bottom margins were (270px for each each) and you can change the lines in the code above.

The left margin is treated differently. It's worth noting because there is a new HTML5 tag that is controlling the left margin. There is a selector called hgroup. This is setting the left margin for both lines at the same time.

#branding hgroup {
     margin: 0 7.6%;
 }

Just FYI this is new to HTML5. The only thing you can put in an hgroup is h1-h6 tags. It's intended as an aid to outlining and may have some utility on mobile layouts. It's not going to mean much for the purposes of this tutorial, however. You can override it with left margin attributes in #site-title and #site-description. Or you cold add the #brading hgroup code to your style sheet and change it there.

If hgroup peaks your curiosity you can read this discussion https://html5doctor.com/the-hgroup-element/. You can use any global css attributes with this and treat it as any other selector.

Step 11. Complete style modification

tutuploadsmedia_1330547171385.png
  • Copy twentyeleven/style.css to 2011_child/style.css.
  • Change the name and version of the template.
  • You will not need  @import url(../twentyeleven/style.css);

In this example, we used a blank style sheet in the style and imported the original. The reason we did this was to make it easy to see and manage changes without the confusion of the entire stylesheet. It's also a good way to just make changes to selected elements. But if you want to completely revamp the entire style, copy the entire parent theme style.css file to the child theme directory, and make changes there. All of your CSS will be in one place which will make it little easier to find everything, and is probably the preferred method for experienced developers.

There may be other style sheets associated with the theme. You have two choices for including them. You can import them with lines similar to these,

@import url(../twentyeleven/rtl.css);
 @import url(../twentyeleven/editor-style.css);
 @import url(../twentyeleven/editor-style-rtl.css);

Make sure these are at the top of the file.

tutuploadsmedia_1330547372305.png

You can also copy any or all the style sheets to the child theme and work with them individually.

Conclusion

Using a child theme, a new style sheet and Firebug you can find the keys to managing the text in the header of the twentyeleven them. Using these same techniques, you should now be able to find and modify any CSS in a theme. There is an excellent video on child themes and CSS in our WordPress Intermediate course. It would be a good idea to watch that, then try this tutorial. With all that training, you should be able to fly solo from here.

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: