,

Change the logo in wordpress theme twenty eleven

We have discussed how to customize wordpress twenty ten in our previous posts. We also gave a detailed instructions about how to add logo and banner to your wordpress twenty ten theme. Since Twenty eleven is the updated version of twenty ten ( of course not exactly ) with its cool features like adjustable colors, look, HTML5 and speed we thought of writing how to add logo to this theme also.

If you want to know better about twenty eleven you can read my article features of twenty eleven. which helps you knowing better about one of the best theme of wordpress which comes default Twenty Eleven.

Before stepping in, I suggest you to create a child theme for twenty eleven, creating child theme is the best and recommended way so that you will get the updates of original theme and at the same time you can also customize as you wish. If you don’t know how create a child theme, you can read my article how to create a child theme for wordpress twenty eleven.

Once you are aware of creating a child theme you can follow the below procedure to add logo to twenty eleven theme
How to add logo to twenty eleven wordpress theme

#1. Login to your Dashboard.

#2.Click Appearance -> Editor

#3. Open header.php file and check for below line
1

<?php bloginfo( ‘name’ ); ?>

#4. delete the particular code ( exactly above one ) and replace it with the below code.
1

<img src=”http://yoursite.com/logo.png” alt=”your site name” width=”200″ height=”35″/>

#5. Now you have to remove the description that comes along with your logo. For this just remove the below code.
1

<?php bloginfo( ‘description’ ); ?>

#6. Last step upload your logo to your home folder and name it as logo.png, if you are uploading some where or if you have any other dimensions for your logo update code at point4 ( #4 ).

Thats it, now enjoy your favourite twenty eleven theme with logo. If you have any questions dont hesitate to ask.

Update Oct 06 : If you find your image is stretched too much then check the following options

Make sure your image size and size specified at #4 are one and the same
if the problem continuous go  to Dashboard->Apperance->Editor->Style.css and check for below part of code
1
2
3
4
5

#branding img {
height: auto;
margin-bottom: -7px;
width: 100%;
}

and remove width:100%