Twenty Eleven Logo |How to add a Logo in TwentyEleven theme

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!

Share the knowledge
Share on Google+1Tweet about this on TwitterShare on Facebook1Pin on Pinterest1Share on Reddit0Email this to someonePrint this page