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!

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

18 thoughts on “Installing WordPress Child Themes and Customizing the Byty Theme

  1. Thank you so very much for this site. It explains more that I have been able to find out to date. Written for people just like me – a dumby when it comes to customization of my site.
    I will be visiting often . I honestly think that I have progressed more in the last 5 minutes than in a total of 3 weeks.

  2. Pingback: Parent/Child Themes in WordPress: The Future of WordPress Themes « Lorelle on WordPress

  3. Pingback: Add a header image to Thematic - the easy way | Cozmoslabs

    • You will have to make some modifications to the css as well. That is because the blog title is to big to allow for a banner to be displayed in the header.

  4. Pingback: Parent/Child Themes in WordPress: The Future of WordPress Themes « Lorelle on WordPress | digidisaster.de

  5. Hi,

    my website, based on the byty template (http://www.femable.com) is not shown correctly with IE 7.0 and below. With IE8.0 its okay, altough the typeface in navigation looks different than in firefox. Any idea what I did wrong?
    Plus: when a page is activated, the menu bar does not stay highlighted. Any idea on that as well?

    Many thanks for you help!

  6. I really appreciate your Byte theme.

    How would it be possible for me to collapse one sidebar and have the content area larger?

    I’ve searched your website, but have not found any answer.

  7. Pingback: Developing with Child Themes « 1001 Weblogs

  8. Hi,
    The theme use PNG images which causes problems when using internet explorer 6 which does not support PNG format.
    I can not see the horizentan menu as the header image is not transparent.
    Is there a way to solve it?
    Thanx
    Micha

    • The theme doesn’t use png images. However IE6 isn’t supported and I haven’t done any testing for it if I remember correctly.

      I’m afraid I can not / will not help you with IE6 issues. Not supporting IE6 might force users to upgrade to a better browser.

      If IE6 users are a big market share of your website I would recommend you hire a developer to get it fixed for you.

  9. I tried selective implementation on the child theme. It is for the header logo and the advt banner. The advt banner shows up, but the logo doesn’t. Here is the code:

    =============================================
    }
    #blog-description{
    position:absolute;
    top:10px;
    padding:0 0 0 10px;
    margin:0;
    border:none;
    color:#989796;
    }
    #blog-title{
    background:url(images/logo.gif) 0px 63px no-repeat;
    *width:205px;
    height:83px;
    text-indent:0px;
    padding:0px;
    padding-top:60px;
    border:none;
    }
    /******************************************** Ad areas */
    #top_ad{
    width:728px;
    height:90px;
    position:absolute;
    top:46px;
    left:50%;
    margin-left:-245px;
    background:#2772b3;
    }
    ======================================================

    The functions.php is same as yours but I added:

    function remove_stuff() {
    remove_action(‘thematic_header’,’thematic_blogtitle’,3);
    remove_action(‘thematic_header’,’thematic_blogdescription’,5);
    }
    add_action(‘init’,’remove_stuff’);

    to it.

    Logo is at images folder. Kindly let me know why the logo is not visible?

Leave a Reply

Your email address will not be published. Required fields are marked *


× 3 = twenty four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>