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.
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:
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.
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.