By default, most WordPress themes display a header text—usually the name of the blog blog description. This is a nice option for personal blogs. However, I personally believe displaying your own personal logo will make your blog look even more professional.
In this recipe, we shall learn how we can add a logo instead of the default blog name and slogan on a WordPress theme. The following screenshot shows the logo integration on a default WordPress theme:

Getting ready
For this recipe, you’ll need your own logo and a WordPress theme on which you’d like to integrate your logo. I shall be using the WordPress default theme for this recipe.
However, there are a few things to be kept in mind before getting on with this recipe:
Some recent themes don’t display blog name and slogan anymore—instead, they display a default logo which can be changed by editing the code or even by defining a new logo in a custom WordPress control panel (which shall be covered in Chapter 3).
Due to the fact that each theme is coded differently, the result of this recipe may vary from one theme to another.
How to do it
1. Open the header.php file and locate the part of code where the blog name and description are displayed. In the WordPress default theme, it looks like this:

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div><?php bloginfo(‘description’); ?></div>
</div>
</div>

2.  We can just put an html image tag between the <h1> and </h1> tags, but there’s a much better, SEO friendly, way to display our logo—by using CSS.
3.  Upload your logo into your wp-content/themes/default folder. Once you’re done, open the style.css file from the WordPress default theme. Go to line number 95. You’ll see the CSS properties for the #headerimg .description element:

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

4.  Now, replace the preceding piece of code by the following piece of code:

#headerimg h1 {
background: transparent url(images/logo.png) no-repeat 50% 30px;
text-indent:-9999px;
}
#headerimg .description
{
text-indent:-9999px;
}

5. Don’t forget to change the image name and path if your logo isn’t named logo.png or is not located at wp-content/themes/default/images.
How it works
As you have seen, we haven’t edited a single line of HTML to achieve our logo integration. We didn’t have to, and it’s better this way. Having h1, an html element, as the header text is good for your semantic and SEO. Due to the text-indent CSS property, we’re able to hide the text by indenting it—this is the reason why we added this property to both #headerimg h1 and #headerimg .description.
We do not want our logo to be hidden, this is why we used the CSS background property to display it.
There’s more…
Our logo looks good, but its usability can be improved even more by adding a link to the logo on the blog homepage.

Adding a link to the homepage
To add a link to the homepage, open the header.php and replace the following line of code on line 33:

<div id=”headerimg”>
With the following line of code:
<div id=”headerimg” onclick=”document.location.href=’<?php echo get_option(\’home\’); ?>’;”>