Twenty Eleven Logo – Logo in the new theme in WordPress 3.2
This Twenty Eleven logo post is actually the “updated” version of my “add logo to twenty ten theme” post.
This is because WordPress 3.2 is out now, and so many features which are new that can benefit users to create a website, be it static or dynamic in blogging platform.
I have updated my wordpress 3.2 beta version to the latest version of wp, which is wordpress 3.2, and checked the theme, Twenty Eleven is also updated, and some file codes are slightly changed.
I have posted in Twenty Eleven theme video introduction, which I also stated it has “big” header, which is still there, and so much features that you can use to modify the appearance of your blog structure and layout.
I thought it would offer the option to upload logo (this far, I only know that the premium Thesis theme, which I currently use, has this option to upload logo). But Twenty Eleven does not offer uploading logo option.
Still, this Twenty Eleven theme is a great theme, clean, and also providing many functionalities, such as hiding or showing the blog name and description, right or left sidebar, no sidebar, etc..
Adding Twenty Eleven Logo – Best with Child theme
One thing I still remember, I have promised to create a video tutorial how to create a twenty ten child theme last year, and until now, I have not done so ๐
This is because I feel it would be useless, since wp is frequently updated, and I though when the wp 3.2 is coming very soon, it would not be needed, apart of there are already hundreds of similar tutorial creating Twenty Ten child theme.
However, before adding Twenty Eleven logo, I think it is the best if we do it in a child theme, so when the default theme is updated, our customization will at least stay.
How to create a child theme of Twenty Eleven? I have posted the video tutorial of twenty eleven child theme here.
Twenty Eleven logo video tutorial and steps
I have made this Twenty Eleven logo tutorial, after creating Twenty Eleven child theme. So if you think you will need to know the steps video, you might want to check this child theme Twenty Eleven video.
Screenshot of the result:
Surely, you will need to prepare, a logo image. In this demo, I use a 200x36px png image, and after optimize the image, I saved it in my desktop.
Video:
Steps:
1. Create a folder, called, “images” inside the child theme folder, and upload the logo in this images folder.
2. Copy the header.php from the original TwentyEleven theme into “My Twenty Eleven theme” files (your child theme)
3. Find this line “<h1 id=”site-title”>”
Screenshot:
4. Right after this line: rel=”home”> add this:
<img src="<?php echo bloginfo('stylesheet_directory');?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="200" height="36"/>
Screenshot:
You can change the width and height accordingly to your image.
5. “Save” your child theme header.php, and refresh your blog. What will happen is the logo will be so big, and getting bigger whenever we resize our windows.
So I add this, to style.css of “MyTwentyEleven” theme.
#site-title img {
height:36px;
width:200px;
}
6. Don’t forget to save file changes.
7. The logo is now in its original dimension, which is 200x36px.
8. Additional note: In the video, I actually hide the site description using text-indent:-9999px in the css file, although I don’t recommend you doing this.
I hope you will have fun with your new Twenty Eleven Logo!
How do I center the logo?
Hi Kimi,
I tried this but i wanted to edit the default theme rather than use a child theme.
It all seemed to work ok except I only got a place holder and no image. Can you explain exactly where the image should be (I have it in an images directory in the twentyeleven theme directory). Also exactly what should replace your ‘stylesheet_directory’ bit in the code.
Many thanks
Hi adcmtc,
If you use the original theme file, you can upload your logo in “images” folder.
And you can use template_directory instead of stylesheet_directory, because stylesheet_directory is only for the child theme.
However beware with editing the original theme, make a copy or a child theme can avoid loosing the modification after theme updates..
I hope this helps
Kimi.
Thanks, your tutorials have been very useful to me.
Just a tip/question now, why don’t you use the CSS too to hide the site description? I used:
#site-description {visibility:hidden;}
And it’s perfect!
Hi iryx,
Yes, that works too!
However as I mentioned in the video, with Google panda algo at the moment, I would be really careful with hidden text for SEO purpose
Thanks
Kimi.
Hi Kimi
Thanks for these video tutorials. I tried to insert a logo (36 x 36), but the logo displays more like 360 x 360…
I have added the size info to the style.css, but still doesnt work. Any thoughts
Thanks
Hi Tony!
Welcome to my blog..
I have just uploaded a 36×36 logo on this dummy blog: http://goo.gl/3b8mF and it worked fine. (the logo is the little black square)
If you use Twenty Eleven child theme, you should also edit the height and weight of the logo inside the header.php, and then in css style file.
I hope this helps
Kind regards
Kimi.
Thanks for the tutorial. I have a problem.
I directly modified the TwentyEleven theme in this way:
the css:
#branding img {
height:127px;
width:256px;
}
and the modified header.php:
<a href="” title=”” rel=”home”><img src="/images/Logo_Lav.jpg” alt=”Logo” width=”256″ height=”127″/>
the site looks like that: http://www.lavanderiasenigalliese.it/
I wanna have the logo at the exact size 256×127 and centered between site title and search box.
Thank in advice,
Simone
Hi Simone,
Welcome to this blog
I have checked your blog, and it looks like it is fixed.
Kimi.
Thanks! This worked very well! You can check it out. I tried other methods but this worked best and easiest for me.
Just wanted to point out a small problem I was having: when I tried to re-size everything in the style.css, it wouldn’t change any size variables for me. Upon looking in Firebug, it seems that the logo image I want to use is actually being interpreted as #branding img{, rather than #site-title img {
What do I need to do so that the logo utilizes the correct CSS class variable? I don’t want to accidentally shrink my header images.
Hi Sean,
Welcome to my blog.
Did you work in a child theme of Twenty Eleven? I hope so.
I have resize the logo in my child theme’s header.php and then style.css of the child theme and it works fine.
with #branding img you will actually modify all the components that are in branding div, and this is why I use the site title img to add logo.
In fact, if you watch the video I also used firebug to find that site-title img.
I hope this helps
Kimi.
thank you! you’re great!
Thank you very much Kimi … It WORKS!!!! ๐
Thank you very much!
It might work if you have less in your child theme but as with others. Firebug sees #branding img so resize doesn’t work.
Hi,
Thanks for the great tutorial! How do you get the logo’s height to line up with both the blog title and description? right now my logo appears before the site title and the description starts below the logo. I would like the the start of both the site title and the description to be flush with the logo – the height of the logo equaling the height of both the title and the description combined…
http://goraceit.com
Thanks!
Once again, thanks for the helpfully Tuto.
Is there a way to place the image *free* in the header? In your example, the img is in the h1, so a float-right only places it behind the text. In some case it would be necessary, to place the image close to the right border.
Regards
Jochen
Jochen,
I guess it is possible, but at the moment, I don’t really have time to look at it.
Kimi
So, maybe I can save you a little bit of time.
I do not really know, which problems could occur by using the #branding-tag. My workaround for a float-right img (header without Search-Field):
First put the source in the header in front of the h1 ”
<img src="/images/logo.png” alt=”” width=”56″ height=”83″/><span … blabla". CSS:
#branding img { height:83px; width:56px; float: right; margin-top: 50px; margin-bottom: -160px; margin-right: 10px; }
Hi Jochen,
sorry I don’t really understand what you mean ๐
Kimi
I would like to say just one word. Simply awesome tutorial.I’ve read different tuts in many sites nothing worked.But this one is ultimate.
My logo is blurry. Anyone have the same issue? It looks perfect in photoshop/browser preview.
Thank you so much for sharing this information. I spent many days trying to figure out how to insert my logo. I watched your video and read your instructions a few times. I also read many other blogs but, in my opinion, yours was the best! Your videos are very user-friendly and make people understand the logic of css and htlm. I would like to make a little suggestion regarding paragraph 4. You should add a bit more text explaining that, as well as adding an “image sentence”, you also move “” nearer to the front into the alt=”xx “position.
I could not understand why I had two of them… Something which only made sense when I watched your brillant video. I struggled with the size of my logo too although I am not sure why and how I finally made it to work. I would like to put a link to your blog if that’s OK with you. Thanks again.
Hi Nicole,
Thank you for the suggestion! I will review it when I have more time than now, really appreciate it.
My pleasure too if you put a link to my blog or post, thank you!
Kind regards
Kimi
Many thanks for the video, it really helped and i’ll be sending it to others! Any reason you don’t edit in the editor in the WP admin section (you edit the file via your bluehost screen instead)?
Mr 0a,
Hello there,
Editing in the dashboard is more simple, however, I prefer editing with font colors ๐
Thanks for coming accross and leaving a comment
Kimi.
I tried but image not display, when i called image in css like this its working . My css code is–
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
width:250px;
height:150px;
display:block;
}
#site-title img{
width:250px;
height:150px;
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
display:block;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
#branding img {
height:150px;
margin-bottom: -7px;
/*width: 100%;*/
}
Hi! Nice thread – really helpful tips all the way down the comments. And great post – nice to know how to replace the text with a logo the right way…
Best,
Frederik
Hi! I tried it your way, but image wasnยดt found even if I copied the URL from Filezilla… anyway, I came up with a much easier way, using child stylesheets:
#branding hgroup {
background:url(“../../uploads/2012/11/logo.png”) no-repeat;
min-height: 155px;
margin-top: 5px;
}
#site-title, #site-description {
margin-left:85px;
}
This works fine for me, unless the client deletes the logo in the upload folder ๐
Cheers,
Joerg
Thanks for the very well instructed tutorial, I needed this brief review as it’s been a long time since I had to modify the header.php branding area! Again, thank you!
Hello, thank you for the instruction (video and text). I created a Child Theme and the nI followed the directions very closely, but have found that there is a placement for the logo, but the image is not being found.
the image is located in the ‘image’ file with my child theme and the header code reads:
<a href="” title=”” rel=”home”><img src="/images/blogopng.png” alt=”” width=”396″ height=”128″/>
But it still is not finding the image. Can you help? Thank you so much
Also and possibly another clue, the original text from the parent theme is being displayed. Thanks again, Courtney
Hello Courtney,
I have checked your site, but can’t find the image.
Where did you upload your image? I checked the source code, and it should be in:
http://www.bikenridge.com/wp-content/themes/TwentyElevenChildTheme/images/blogopng.png
But couldn’t find it.
Kimi.
Hi Kimi,
Thank you for the reply. As far as i know(i am new to this..) the image folder is saved within my TwentyElevenChildTheme and the image – blogopng.png is saved in that folder. Is there anything i need to do to the image for it be recognized? The Image folder does not show up on the “editor” with in wordpress.
Any Suggestions? Thanks again and Happy Thanksgiving.
Courtney
also just noticed that the locations is actually: http://www.bikenridge.com/web/content/wp-content/themes/TwentyElevenChildTheme/Images/blogopng.png
would that make a difference?
Hello Kimi, I changed the Header.php code a bit to : <a href="” title=”” rel=”home”>
I am getting the same result, an image placeholder, but no image. hoping you can help. Thanks, Courtney
Hi Kimi,
Much appreciated your time and effort putting the instructions together. I followed it fully and only gotten an empty box with no image as mentioned in Courtney’s post. I tried PNG, GIF, JPEG, etc. All the same results. Perhaps I did something wrong with the logo dimensions?
Best,
– Tiffany
Wonderful! Your video was great as well. You deserve a box of chocolates for this one!