WordPress Tutorials and Blog Posts

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

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

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

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

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

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

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

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

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.

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

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 http://html5doctor.com/the-hgroup-element/. You can use any global css attributes with this and treat it as any other selector.

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

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

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.