How to Add Header Image and Blog Description to Thematic Theme

Recently I started working on Thematic theme for my friend’s blog. Thematic is free theme from ThemeShaper. It pretty flexible theme and one can customize it according to one’s need. By default thematic does not support header image. Thematic have Blog title and blog description fields in header. one needs to manually edit css and php files or create child theme to add header / logo image.

Here is step by step guide to add logo / header image.

First step is to remove blog title. Here is code to do that

function remove_blog_title() {
remove_action(‘thematic_header’,'thematic_blogtitle’,3);
}

add_action(‘init’,'remove_blog_title’);

Next step is to remove blog description (If you do not remove description, it will appear above logo image)

function remove_blog_description() {
remove_action(‘thematic_header’,'remove_thematic_blogdescription’,5);
}

add_action(‘init’,'remove_blog_description’);

Above steps will remove blog title and description.

Now lets add header / logo image

function add_logo_image() {
echo ‘<a href=”‘.get_bloginfo(‘url’).’” title=”‘.get_bloginfo(‘name’).’” ><span id=”header-image”></span></a>’;
}
add_action(‘thematic_header’,'add_logo_image’,6);

Place above code in functions.php file.

Next modify style.css file and add following code. Tweak the settings according to theme design.

#branding {
height: 75px;
padding: 25px;
position:relative;
border-bottom: 1px solid;
}

#header-image {
background:url(“images/logo.png“) no-repeat transparent;
height:100%;
width:100%;
position:absolute;
cursor: pointer;
top:10;
}

Remember to change logo / header file name to logo.png or put the correct name in css file. By default there is no images directory in thematic folder. You need to create it manually and place image there.

This will add logo / header image but if you want to also have blog description below header / logo image, no need to worry. There is a function childtheme_override_brandingclose() that needs to be defined in functions.php. This function is called from thematic.

function childtheme_override_brandingclose() {
$blogdesc = ‘”blog-description”>’ . get_bloginfo(‘description’, ‘display’);
if ( is_home() || is_front_page() ) {
echo “\t<h1 id=$blogdesc</h1>\n\n”;
} else {
echo “\t<div id=$blogdesc</div>\n\n”;
}
}

Also add following code in style.css file

#blog-description {
margin: 70px 0 10px 5px;
}

Thats it. Let me know if you face any problem.