wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
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 February 18, 2017
Posted on July 7, 2011

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:

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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!

own theme twenty eleven Wordpress wp32

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Google +1 – How to add Google +1 button in WordPress Twenty Ten
→ Continue Reading Twenty Eleven WP 3.2 [How to change VIDEO]

Comments

  1. Linda Johansson says

    July 13, 2011 at 12:39 pm

    How do I center the logo?

  2. adcmtc says

    July 16, 2011 at 2:15 pm

    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

      July 16, 2011 at 6:42 pm

      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

    July 17, 2011 at 9:09 am

    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

      July 19, 2011 at 3:54 pm

      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

    August 1, 2011 at 9:51 am

    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

      August 1, 2011 at 5:05 pm

      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

    August 2, 2011 at 8:08 pm

    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

    • Kimi says

      August 4, 2011 at 7:07 am

      Hi Simone,

      Welcome to this blog

      I have checked your blog, and it looks like it is fixed.

      Kimi.

  6. Nathan Allan says

    August 3, 2011 at 7:55 pm

    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

    August 4, 2011 at 2:59 am

    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

      August 4, 2011 at 6:58 am

      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.

  8. Oliver Sept says

    August 14, 2011 at 1:35 am

    thank you! you’re great!

  9. Angel says

    August 23, 2011 at 12:10 pm

    Thank you very much Kimi … It WORKS!!!! ๐Ÿ™‚

  10. Bruce says

    September 8, 2011 at 8:26 pm

    Thank you very much!

  11. PA says

    November 5, 2011 at 2:29 am

    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

    November 16, 2011 at 9:37 pm

    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

    January 16, 2012 at 3:55 pm

    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

    • Kimi says

      January 16, 2012 at 4:15 pm

      Jochen,

      I guess it is possible, but at the moment, I don’t really have time to look at it.

      Kimi

      • Jochen says

        January 16, 2012 at 10:42 pm

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

        • Kimi says

          January 21, 2012 at 11:49 am

          Hi Jochen,

          sorry I don’t really understand what you mean ๐Ÿ™

          Kimi

  14. geetha says

    February 13, 2012 at 8:19 pm

    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.

  15. April says

    February 14, 2012 at 5:26 am

    My logo is blurry. Anyone have the same issue? It looks perfect in photoshop/browser preview.

  16. Nicole Ferguson says

    February 22, 2012 at 9:08 pm

    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

      February 23, 2012 at 8:01 pm

      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

    March 6, 2012 at 5:23 pm

    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

      March 8, 2012 at 2:11 pm

      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

    March 29, 2012 at 1:13 pm

    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

    November 3, 2012 at 4:40 pm

    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

    November 11, 2012 at 7:10 pm

    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

    November 12, 2012 at 3:47 am

    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

    November 21, 2012 at 3:11 pm

    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

  23. Courtney says

    November 21, 2012 at 3:18 pm

    Also and possibly another clue, the original text from the parent theme is being displayed. Thanks again, Courtney

    • Kimi says

      November 22, 2012 at 4:24 pm

      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.

  24. Courtney says

    November 22, 2012 at 4:44 pm

    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

  25. Courtney says

    November 22, 2012 at 4:52 pm

    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?

  26. Courtney says

    November 28, 2012 at 1:35 pm

    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

    March 23, 2013 at 5:45 pm

    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

  28. Bill says

    January 7, 2014 at 5:38 am

    Wonderful! Your video was great as well. You deserve a box of chocolates for this one!

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept