WordPress Tutorials Index | Web Page Design Tutorials Home

Creating a New WordPress Child Theme (Part 4)

Up to now, the customization of the new WordPress child theme is only limited to modifying the stylesheet. What if we also wish to modify the layout of the child theme, for example, delete the blog title, delete the navigation menu, or move the navigation menu to other location, etc… Let’s see how to do it…

WordPress Child Theme Header Section Customization

In order to modify the layout of WordPress child theme, a header.php file is also required in the directory of child theme folder, i.e. alexten. The most easiest way and quickest way is copy the header.php from parent theme (twentyten) to the child theme.

Create wordpress child theme

Open the header.php file of WordPress child theme. Now we can customize the header layout by modifying the header.php as before.

Remove the Header Blog Title and Description

Create wordpress child theme

We already studied the file structure of the header.php before, the blog title and blog description section can easily be removed by removing the codes as shown below:

wordpress child theme remove blog title and description

Here’s how the WordPress child theme look likes:

wordpress child theme remove blog title and description

In order to provide more space for the contents, this is a good idea to use a background image for the banner. This way, the blog title can be on top of the banner. Let’s go…

Upload the banner image to the child theme directory, for example:

home/wp-content/themes/alexten/images/headers

modify wordpress child theme

Remove all codes inside the #branding div layer and replace with the codes as shown in the diagram below:

modify wordpress child theme

The codes simply use a new div layer (alextenBanner) with the banner as background image. Therefore the blog title can float above the banner.

The next step is to open the child theme stylesheet and write codes for the alextenBanner div layer and the blog title.

/* new div layer for banner background banner */
#alextenBanner {
    width: 940px;
    height: 198px;
    background-image:url(‘images/headers/alexten-banner.jpg’);
}

/* styles for Blog title */
#alextenBanner p {
font-size: 24px;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}

The stylesheet of the alexten 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;
}

/* new div layer for banner background banner */
#alextenBanner {
width: 940px;
height: 198px;
background-image:url(‘images/headers/alexten-banner.jpg’);
}

/* styles for Blog title */
#alextenBanner p {
font-size: 24px;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}

Refresh the browser and see how the WordPress look likes now:

create wordpress child theme

By using the same techniques, an interesting WordPress themes can be created.