Installing Wordpress Child Themes and Customizing the Byty Theme

Source byty.ro

Since I’ve launched by first Wordpress Child Theme based on Thematic I thought writing about how you can make small changes to the theme and put your own graphical logo, add css for other plugins, basically create a customized version of it.

This post is divided in 4 different parts, particularly:

1. Installing Wordpress Child Themes
2. Adding your Own Logo
3. Adding a standard top ad banner to your page
4. Creating css to style plugins that do not display perfectly on your theme

1. Installing Wordpress Child Themes

Wordpress Child Themes are a new concept introduced not a long time ago that allow you to inherit all of the functionality of a parent theme and overwrite the css style, change the images and some parts of the html through the use of functions.php file. We won’t go in a lot of detail on how to create a Child Theme here, but if you are interested and want to find out more please have a look here, here and here.

To get started you need to Download the Thematic Theme (this is the parent theme), then Download the Byty Child Theme.

Once this is out of the way you have to upload both of the themes to your server in the /themes folder, just like you would do with any other theme. After the parent and child theme have been uploaded you can now activate the child theme (you don’t have to setup anything for the parent theme).

This is it! Now you know how to install a Wordpress Child Theme. Easy isn’t it!

2. Adding your own logo

I’ve designed the Byty Child Theme to be easy to customize. With this in mind you can add your own logo in no time through the use of CSS.

First thing you need to do is to make sure that your logo is 205px by 60px or something similar. You need to upload the logo into the wp-content/themes/byty/images folder.

Next open wp-content/themes/byty/styles.css file and find the #blog-title and #blog-title a declarations.

In the #blog-title declaration remove the comments (/* this is a css comment */ ) from background:url(images/logo.gif) 0px 63px no-repeat; and replace logo.gif with your own personal logo.

In the #blog-title a declaration remove the comments from filter:alpha(opacity=0); -moz-opacity: 0; opacity:0;. This will make the title of your blog transparent, basically hiding it and letting the logo to be displayed in the back. This is good from an accessibility point of view since if you disable the CSS you can still see the text from your Blog Title.

In the end this is how that particular piece of css should look like:

#blog-title{
background:url(images/my_personal_logo.gif) 0px 63px no-repeat;
width:205px;
height:84px;
text-indent:0px;
padding:0px;
padding-top:60px;
border:none;
}
#blog-title a{
display:block;
height:60px;
font-size:60px;
color:#2772b3;
font-family:"Trebuchet MS";
font-weight:normal;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity:0;
}

If everything is in order, once you reload your page you should see the logo displayed on top of the Child Theme.

3. Adding a standard top ad banner to your page

For this we’ll use the functions.php file that comes with the Byty Child Theme.

Once you open that file you’ll see the flowing code:

<?php
/* Register Top Add Wiget */
function add_top_ad() {
?>
<div id="top_ad">

<!-- Please add a 728px by 90px Standard Banner -->

</div>
<?php
}
add_action('thematic_belowheader', 'add_top_ad');
?>

In place of < ! -- Please add a 728px by 90px Standard Banner -- > you can add your own Google Adsense ad or leave it unchanged if you don’t what Ads on your site. You can add more ads to your site in the sidebars or in the content of your site through the use of text widgets.

4. Creating css to style plugins that do not display perfectly on your theme

If you have a plugin that isn’t displaying perfectly with the Byty Child Theme I recommend you open wp-content/themes/byty/extra.css and add any other css that you might need in there. This way you have separated files for the theme and your plugins.

As you can see there isn’t that much to say about this and I hope I’ve been clear with my explications.

If you’ve customized or used the Byty Child Theme please let me know! I’m interested to see for what you are using it!

Further Reading:

1. Byty the Free Child Theme – Built on Thematic
2. Green anyone? Try Commune – Thematic Child Theme!
3. Use Wordpress as a CMS with Thematic Theme- Part1
4. Early Morning Child Theme
5. 10 design tips for your custom wordpress theme built with thematic