Logo in Twenty Twelve Theme

Last updated on February 18, 2017 Posted on October 7, 2012

A few days ago, I uploaded a video in YouTube and published a post about creating a simple child theme of Twenty Twelve (I always type, Twenty Eleven! ;-)) and today, we will add a logo, which is a .png file to header.

In this point, you can use other formats, such as jpg, gif, or png. I recommend a png file, and don’t forget to compress your image with Yahoo smush it, before uploading.

What I use in this tutorial:

1. A logo.png file, with dimension, 100x50px. 2. Access to cPanel or you can use FTP clients to upload the image, and edit some files.

Video

Steps:

1. Create child theme of Twenty Twelve. 2. Create a folder where you can save your logo, in this tutorial, I created a folder, called, “images” inside my child theme folder, called, “MyTwentyTwelve”. So the directory will look like this:

6. Add this code after the rel=home and before blog name, see this screenshot. (the codes which are added, are highlighted)

Codes to display twenty twelve logo

7. Change the width and height accordingly to your logo, and save the file.

8. Save the file and refresh your site, you should see your logo, if necessary, clean your browser’s cache.

Twenty Twelve Logo

Some notes:

1. The result of this tutorial will show you a logo but you will still see the site name right after the logo. There are some alternative to get rid of it, either with css, hiding the site name, or delete it. I think, it’s ok to delete it, because this site name will be added in the title and alt attributes of your logo image.

2. The other thing is the site description under the logo, which is by default, saying “Just Another WordPress Site”. In the video, I said, I don’t recommend you to delete it, because it is placed in h2 which is very importang in “Search Engine Optimization” world, it actually tells search engines such as Google and others about what your site is all about. But if you don’t really care about it, you can also delete or hide it with css.

Hello Kimmi, Like you, i placed a logo in de header section h1 of hgroup in the header.php page; however, my logo appears like a flashlight – it blinks – , it is not loaded fast enough, any idea ?? some CSS … in Safari i first see a black box before the logo appears, on FireFox it is slightly better, but the bottom half of the logo blinks, why ?

I find your tutorials and videos incredibly informative. Thank you for taking the time to make them!

In your notes, you mention that there are some ways to hide the site title that appear after the logo. Could you go over these or direct me to a link that describes how to do this? I have tried several things, including display:none and Customizing the theme on WordPress directly, but these all remove my site logo as well as the site title. Your help is greatly appreciated!

Thanks for taking the time to write this tutorial, it is great! I have successfully loaded a logo into my Twenty Twelve child theme. It’s size is 390 x 56px and it displays correctly on my desktop website, however it does not re-size when viewed on a smart phone.

Do you have any suggestions as to how I can get it to minimise to fit the screen width of the device it is being viewed on?

I was surfing through wordpress forum and found that if one uses <img class="site-logo" src="/images/site-logo.png” alt=”site logo” />

code and add this .site-header hgroup { display: none; } .site-logo { max-width: 100%; height:auto; } to style.css one can have responsive logo. However, I am not able to link my logo to my homepage. If somehow it links, its responsiveness goes. Please help me with proper code. Thanks. Regards.

Hi Kimi, I removed the code to made the width smaller and the problem is still there. I completely uninstalled (deleted from server) theme twentytwelve and uninstalled my_twentytwelve (deleted from server) restarted from the beginning. Everything is new, I’m at a complete loss.

I’ve created the child, no problem, files where they should be, all good. Edited the code copied from this post and when viewing the website, there is an outlined box of approximately the right dimensions but the logo is not displayed. I’ve tried resizing, PNG, transparent, not transparent, JPG etc. After probably 30 hours of trying to customize various themes I’ve started over and I’m desperate. Please, what am I doing wrong? I’ve checked the actual path and it shows http ://sitename.ca….. not http ://www.sitename.ca…. is this something?

Hey your tutorial is very helpful! But is there any different in Twenty Eleven Child Theme? Because I follow your steps but my image shown is too big. I had made sure the dimension of my image is 100×100 already… if you need to see my website, it is 8onlinemarketing.coom

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.