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 ( ofcourse not exactly ) with its cool features like adjustable colors, look, HTML5 and speed we thought of writing hwo 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 origianal theme and at the same time you can also customize as you wish. If you dont 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 Apperance -> Editor
#3. Open header.php file and check for below line
<?php bloginfo( 'name' ); ?>
#4. delete the particular code ( exactly above one ) and replace it with the below code.
<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.
<?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
#branding img { height: auto; margin-bottom: -7px; width: 100%; }and remove width:100%
Heya,
I tried this but for some reason the image that is shown on page looks a bit pixelated. But when i look at the image source it looks crisp http://manwithavan.co.nz/wp-content/uploads/2011/09/manwithavanph.png
I don’t suppose you have an ideas on why it’s enlarging the image? I tried to use the exact image size in code but this didnt work so removed image size attributes and it’s still the same? Cheers for you time
Dave
Hi Dave,
I checked your site, You are getting like this because your image size is 425px × 90px scaled to 533px × 113px, please check once
HI , wondering on how to do this, thanks for the article
Thanks Kalyan
I’ve followed the tutorial, but the logo gets stretched out and is ignoring the image size attributes. What am I doing wrong?
I will check that, please provide the URL where you are facing problem ?
I’m having this problem as well, I can’t seem to change the size, it’s stretching it well beyond the actual size and ignoring the size attributes.
Hi Matt,
If you can observe the #4 point, I gave width=200, height=35. Try to make your logo with the same dimension, If not change the width and height values according to your logo dimesions, Then you wont face any strech problem
Hi aswin, I have added a logo at size 220 x 185 but it just appears massive on the header, is there any way I could make it smaller, changing the pixel size doesn’t help, thank you for your help, your site is brilliant.
Hi Manj,
I checked your code, open dashboard->Editor->style.css
check for the below part of code
#branding img { height: auto; margin-bottom: -7px; width: 100%; }and remove width:100% line it will work
width: 100%;
I have tried the same, it is always stretching the image. I have tried:
- reducing the size of the image to width of 35px
- adding ‘px’ to the numbers
- removing width and height alltogether
Since the image always seems to appear at the same size, I expect somewhere else we need to change something too?
Hi Caro
I checked your code, open dashboard->Editor->style.css
check for the below part of code
#branding img { height: auto; margin-bottom: -7px; width: 100%; }and remove width:100% line it will work
width: 100%;
Thanks Aswin, that worked!
Glad that worked for you
I tried removing that line using the child’s css and even tried it in the original theme’s style.css. I’m having no luck. Am I stuck?
For some reason, when I updated the Jetpack plugin, the thing went to its normal size… That did the trick, whatever it was.
edit the style.css of the main twelve eleven
not the child
i followed all of your steps but it didnt work its massive, whats the recommended logo size aswell?
Make a logo size of 200X35
Hi tried the logo but seem to have gone wrong somewhere can you advise.
Sorry quite new to this
Thanks
Dave
May I know what exaclty the problem is ?
hello,
I did exactly what u have explained . What i get is cross inside a box . the logo is not displayed . My logo is of size 180 and 36 .
plz help
Give your blog URL I will look and let you know
Is it possible to do the same in twenty eleven child theme ?
I’m to all this, so just downloaded a child theme from a site and it dont have header.php file.
Please, looking for your suggestions.
Thanks.
I meant:
*I’m new to all this.
Did, you mean doing this editing in parent theme ? coz i dont see header.php in my child theme.
Im reallly confused!! please help.
No Dont touch the parent theme, better to do in the child theme, copy the header.php from the parent theme to the child theme folder
Thanks for the help. Good explanation.
awesome! this worked perfect!!
hi
1,,,when i am updating this below thing on my header.php
with my logo adress it is showing some error saying some syntax error ‘<'
2,,,i wana add a page in which i have same thing(name ,email,phone no,comment) in contact us page but it will redirect to my email id how this is possible
3,,, i wana delet this page name written above the page
plz help me out
Please provide your site URL so that I can check and say
Thanks, works great!
Thanks, this is a great help. Tell me, though, if this theme has an update, will I need to do this again to the newly uploaded files? Thanks!
create a child theme for 2011
then though there is an update for theme, you wont loose your changes
one more thing, since I took ‘width: 100%;’ out of the #branding img in css – the featured image now runs off the page. should I resize it? I sized it to 1000×288.
thanks again.
remove width:100 % in your code it will work
Looks great, thanks!
Now, if I want the tagline to appear to the right of the logo in the header – how do I change that?
Thanks!
Hi Aswin.
I wanted to thank you very much for helping us WordPress rookies finding solutions for common problems. Your solution worked for me. The only thing is that it moverd my search box to my menu bar. Would you know how to put that search box back where it was? Thanks again for your much appreciated consideration and generosity!
Rene
Just remove the code what you edit
,
if you forgot what you edit, download the twenty eleven theme and copy and replace the code edited,
I have followed instructions from at least 10 other people on this, and yours was the only one that worked. THANK YOU!!!
Thanks!
Works perfectly for me!
change width:100% to px
see the last two lines. Able to fix the problem using this method.
#branding img {
height: auto;
margin-bottom: -7px;
width:200px;
height:35px;
}
total newbie here. I have followed the instructions and changed the appropriate code in the header.php file. What ‘Home’ Folder do i upload my logo to? Im not sure which is the home folder.
Thanks for the help!