wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog WordPress themes How to add a Logo in TwentyEleven theme

WordPress themes

How to add a Logo in TwentyEleven theme

Last updated on
Posted on

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:

twenty eleven logo
A simple logo in Twenty Eleven

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:

twenty eleven logo
The h1 id site title line.

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:

twenty eleven logo
The highlighted = the added codes.

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!

Latest Posts

Comments

  2. adcmtc says

    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

    • Kimi says

      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.

  3. iryx says

    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!

    • Kimi says

      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.

  4. Tony Clark says

    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

    • Kimi says

      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.

  5. Simone says

    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

  6. Nathan Allan says

    Thanks! This worked very well! You can check it out. I tried other methods but this worked best and easiest for me.

  7. Sean Tilley says

    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.

    • Kimi says

      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.

  11. PA says

    It might work if you have less in your child theme but as with others. Firebug sees #branding img so resize doesn’t work.

  12. Paul B says

    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!

  13. Jochen says

    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 says

        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; }

  14. geetha says

    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.

  16. Nicole Ferguson says

    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.

    • Kimi says

      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

  17. Mr 0a says

    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)?

    • Kimi says

      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.

  18. bhabani says

    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%;*/
    }

  19. Frederik says

    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

  20. Joerg says

    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

  21. Dave says

    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!

  22. Courtney says

    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

  24. Courtney says

    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

  26. Courtney says

    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

  27. Tiffany says

    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

Comment form on this post is closed after 60 days.