WordPress Tutorials Index | Web Page Design Tutorials Home

Creating a New WordPress Child Theme (Part 3)

Now we are going to customize the new WordPress child theme without modifying the stylesheet of the parent theme. The basic concept is that we will write styles on the stylesheet of the child theme to override the styles of the parent theme. This can be illustrated in the diagram below:

customize wordpress child theme

Okay! Let’s get started!

Space Above WordPress Blog Title

We already learned and did it before. The spacing (padding) is setting in the padding-top properties of the #header selector of the parent theme.

customize wordpress child theme

This time we will not edit the stylesheet of the WordPress parent theme. In stead we write a new style rule in the stylesheet of the new alexten child theme.

Open the styesheet of alexten child theme. Remove the space above the Blog Title by writing a new style rule by setting zero to the padding-top properties:

#header {
    padding: 0px;
}

The stylesheet of Alex ten child theme now becomes:

/*
Theme Name: Alex Ten
Theme URI: http://wordpress.org/
Description: This is a Child theme create with TwentyTen theme.
Author: Alex
Version: 1.0
Template: twentyten
*/

@import url(“../twentyten/style.css”);

/* Remove space above blog title */
#header {
padding: 0px;
}

This way the new style rule of #header’s padding of the child theme will override the style of the parent theme.

Visit the WordPress Blog again and see how it looks:

customize wordpress child theme

 Let’s customize the new child theme a bit further that we did before.

Modify Spaces on Two Sides and Top of Header

The spaces on two sides of Header and the space on the top can easily be modified.

customize wordpress child theme

Modify Spaces on Two Sides of WordPress Header

The spacing on two sides of WordPress Header can be removed by writing a new style for the padding properties with #wrapper div tag setting to zero. This way, there will be no any padding for the #wrapper.

The stylesheet of Alex ten child theme now becomes:

/*
Theme Name: Alex Ten
Theme URI: http://wordpress.org/
Description: This is a Child theme create with TwentyTen theme.
Author: Alex
Version: 1.0
Template: twentyten
*/

@import url(“../twentyten/style.css”);

/* Remove space above blog title */
#header {
padding: 0px;
}

/* Remove spaces on two sides of header*/
#wrapper {
padding: 0px;
}

Now the new style rule of #wrapper’s padding of the child theme will override the style of the parent theme.

Visit the WordPress Blog again and see how it looks:

customize wordpress child theme

Modify Space on Top of WordPress Header

Similarly the spacing on the top of Header can be modified by writing a new style rule for the margin-top properties. How about changing the spacing on the top to 5 pixels?

The stylesheet of Alex ten child theme now becomes:

/*
Theme Name: Alex Ten
Theme URI: http://wordpress.org/
Description: This is a Child theme create with TwentyTen theme.
Author: Alex
Version: 1.0
Template: twentyten
*/

@import url(“../twentyten/style.css”);

/* Remove space above blog title */
#header {
padding: 0px;
}

#wrapper {
/* Remove spaces on two sides of header*/
padding: 0px;
/* Modify spaces on top of header*/
margin-top: 5px;
}

The WordPress blog now looks like:

customize wordpress child theme

By repeating the same customization we did before, the new WordPress child theme can be further customized to a new look completely different from the parent theme. Hm… It seems that this is not too difficult to create a new WordPress child theme.