Often asked question – simple solution:
As always – create a child theme to work with – do not edit Twenty Eleven directly.
Edit header.php in the child theme, and locate:
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
To add the logo image in front of the site title, change the section to:
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="" /><?php bloginfo( 'name' ); ?></a></span></h1>
To replace the site title with the logo image, change the section to:
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png" alt="" /></a></span></h1>
Important: to keep the logo image from stretching, you need to add this to style.css of your theme:
img#site-logo { width: auto; }
In this style, you can add more formatting such as padding or margins for the positioning of the logo.
The above code assumes that the logo image site-logo.png is located in the /images folder of your theme.
You can use any other absolute path to the location of your actual logo image instead:
src="http://anyabsolutepath/logo.jpg"
http://www.w3schools.com/tags/tag_img.asp
Thank you!! you save my life with this! Thank you very much!
I don’t seem to manage to link the place of my logo to the header. I didn’t use a relative path, but still I get the question mark.
Check velovino.nl
I hope you can help!
This has been the best discussion ever, to resolve my question on how to add a logo on the left side of my site title in the Twenty Eleven theme. Thank you very much Michael (aka alchymyth). Your post saved me a lot of experimentation time.
I did however encountered problems of non-appearance of the image, as in only a placeholder appeared, like Mina’s concern. I resolved this by deleting
before the path of my image.
The other concern was that the logo was located on top of the site title, instead of on the left of it, just the like concern of Govindji Patel. After so many trials-and-errors, I realized that the css for the Header section included
#branding img {
height: auto;
display: block;
width: 100%;}
I deleted the line
display: block;
The image eventually aligned to the left of my site title. Then I adjusted the left padding for the for the site title -+ 10 px, and added a margin-left for the site description of 10px + the max width of my image.
You may check the result on my site .
Unfortunately I have resultant problem, for which some Michael or someone else can help with. I’d like to align the logo (enlarged this time) to the top edge of the site name and bottom edge of the site description. I will continue to experiment though.
Thank you again to Michael, and everyone else who shared here.
inadvertently failed to list the line that I deleted from Michael’s suggested code before the image path. It’s
Hi! I tried to replace titel with logo.
I got the logo in top but it´s way to small. The original image that I link to is really big.
I dont want it to rescale it and I want the logo fill the whole top space so it´s all yellow.
Here is a scrndump for my site to show what I mean.
I´m a really newbie so if I need to change any codes please really spcific where and how. Thank you
http://www.nordicknights.com/files/example.jpg
My logo appears above the Site Title. I would like it to be in the same line. I copied exact same code as above and controlling the size of my logo to 18px high x 20px wide. Please help.
possibly needs some css adjustments; please join the WordPress support forum and ask there.
Hello
I want to have a logo on left and menu on right on same line is there any way you can help me. I am using twenty eleven child theme. I managed to to have Menubar at top and slider below it.If I add logo where title is then I have lot white space on top then menu.
I do help out at wordpress.org as well.
Govindji Patel
Hi Govindji,
have you asked in the forum? if you have a link to your site, you can post it here, or email it to me, and I’ll have a look.
I assume that you would need to add the logo into the
<nav id="access" ..container right at the start; but the formatting part is better checked viewing the live site with the menu at the top.cheers, Michael
This works wonderfully, thank you very much 🙂
Hello! (working with 20-11-Theme)
I tried 2 add a logo in front of my site title:
many Ways gone – none worked!
I tried yours too!
The best I could manage, was a placeholder 4 my logo pic, but no logo shown!
in the 1st place i wanted the logo pic first end next to it (on its right side) the site title.
now i just wanna place the logo in the header, with no more headache!
Could u help me??
PS: My sidebar doesn’t appear either!
I haven’t changed there anything in the theme!
Do I have to activate it anyhow? Do you know that?
the best would be if you join the WordPress.org support forum and ask your question there; you will most likely need to provide a link to your site.
considering the sidebar, this might be the designed behaviour of Twenty Eleven, and could be changed; have a look at http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages which also points out the importance of creating a child theme to work with.
Alchymyth is so nice.
jupes jupes ^^
Thank you so much, you have saved me a lot of time :O)
Hi.Am not so good in programing. could you help in uploading log onto my site pls..wwwkibsdeliveryservices.com.au.
will appreciate as much help as i can get.
Cheers.
you could join the WordPress support forum to ask your question there. or email me with a request for assistance. alchymyth@gmail.com
I replaced the code with
<a href="” title=”” rel=”home”><img id="site-logo" src="/images/site-logo.png” alt=”” />
I placed an image with the name of site-logo in public_html/images. When I visit the site I see a “place holder” for a logo with a red cross in it but no image.
Can you help me with this?
Regards, Oddur.
simply do not use relative image paths. use the code from the examples. or use the full absolute path (starting with http://.. ) to the image.
yes thank you I have used this code
Thank you very much, it is much better!
Hi, I read your interesting and useful articles, you are a connoisseur
tell me how to make a theme twentyeleven static?
Now it’s bad when the changes in the browser window on a small screen like netbook
if the ideas in my earlier post are not going far enough, please join the WordPress.org support forum and ask the question there.