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:
wp-content/themes/MyTwentyTwelve/images
3. Prepare image, and upload it to the “images” folder.
4. Then, navigate to “twenty twelve” parent theme folder to look for “header.php” file. Copy this file into your Child Theme folder.
5. Inside your child theme folder in “header.php” go to approximately line 35 (it can be in other line if you use different code or text editor)
<img src="<?php echo bloginfo('stylesheet_directory');?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="100" height="50"/>
6. Add this code after the rel=home and before blog name, see this screenshot. (the codes which are added, are highlighted)
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.
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.
Generally I do blogging in other theme not WP default theme. Thanks for sharing your tips. It will help to customize Twenty Twelve Theme
Thanks, it was very helpful!
I was learning to use WordPress and your tutorials like making a Child Theme and Inserting logos using child themes have helped me a lot. Thank You.
Things have worked well and I am learning fast, I am trying to make my personal website.
I have been trying to find a way to center-align the logo. I tried different methods, none seem to be working. Would you suggest a way out?
Thanks and all the best.
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 ?
Thanks a lot for your tutorial !!
Stany
Hi. Your tutorial was very helpful. However, my image (500×175) is being reduced. How do I display it at full size?
Thanks
Joe
Hi there,
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!
Thank you.
Hi Stephie,
I just took a look at your site, and you created a child theme already.
Did you try adding display:none; under the text-align: center; for /*Edit Site description*/
h2.site-description attribute?
After adding the line, clean your browser cache to see the result, or if you use any cache plugin, you can clean all cache too.
I hope this helps
Kimi
Hi Stephanie
Comment out the code after the stuff Kimi told us to enter like so
this
becomes this:
this
php bloginfo( ‘name’ );
becomes this:
php //bloginfo( ‘name’ );
Hi Kim,
Thanks for the great tut!
I like to place a second image on the same height to the right.
How can I accomplish this?
Nick
Hi Kimi,
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?
My site is: http://unknownjourney.com.au/
Any advice would be greatly appreciated.
Thanks!
Great, its working, but how can I hide the site title, its still there. Please direct me to the file.
Please help
Regards
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 followed your instructions in creating my child theme. Everything was working great until yesterday. All of a sudden h2 and Nav are left aligned. Any ideas on how to fix this.
Thank you
Hello Gus,
I notice you added some css style in child theme’s stylesheet, could it be the problem? Try to remove those codes, maybe it will help
Kimi.
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.
Hi Kimi,
I did as you recommended and my style.css is exactly as it is instructed on codex. Any thoughts?
Thank you,
Hi Kimi,
I figured it out. It was the background color causing the issue. I set it to default and the issue was resolved.
Thank you
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