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
Step 2. Create a new style.css for the child theme.
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
Step 5. View the site with the child theme
Step 6. Change the header text style
Step 7. Add these lines to our style sheet.
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.
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
Specify the font family with another line added to your css style by adding the font-family attribute and specify your font.
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.
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.
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.
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..
Step 10. Changing the header margin and position
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
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.
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.
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.
Step 11. Complete style modification
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,
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.
All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means: