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
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.