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 Logo in Twenty Twelve Theme

WordPress themes

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

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

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)

codes to display twenty twelve logo
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
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.

add logo twelve twenty twelve wp3.5

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
← Plugin to Modify Twenty Eleven Theme
→ Twenty Fourteen Child Theme

Comments

  1. Ahsan says

    October 8, 2012 at 4:49 pm

    Generally I do blogging in other theme not WP default theme. Thanks for sharing your tips. It will help to customize Twenty Twelve Theme

  2. Lilly says

    October 28, 2012 at 9:17 pm

    Thanks, it was very helpful!

  3. Eric Jose says

    November 29, 2012 at 4:15 pm

    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.

  4. Stany says

    December 28, 2012 at 9:01 pm

    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

  5. Joe says

    January 17, 2013 at 6:43 am

    Hi. Your tutorial was very helpful. However, my image (500×175) is being reduced. How do I display it at full size?

    Thanks
    Joe

  6. Stephie says

    January 24, 2013 at 6:13 pm

    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.

    • Kimi says

      January 25, 2013 at 6:23 pm

      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

      • Frank says

        May 28, 2013 at 8:22 am

        Hi Stephanie

        Comment out the code after the stuff Kimi told us to enter like so

        this

        becomes this:

        • Frank says

          May 28, 2013 at 8:23 am

          this
          php bloginfo( ‘name’ );

          becomes this:
          php //bloginfo( ‘name’ );

  7. Nick says

    February 18, 2013 at 11:51 pm

    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

  8. Chelsea says

    March 25, 2013 at 5:10 am

    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!

  9. Suyash says

    March 29, 2013 at 2:20 pm

    Great, its working, but how can I hide the site title, its still there. Please direct me to the file.

    Please help
    Regards

  10. Suyash says

    March 29, 2013 at 8:56 pm

    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.

  11. Gus says

    April 6, 2013 at 7:13 am

    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

    • Kimi says

      April 6, 2013 at 10:47 am

      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.

      • Gus says

        April 6, 2013 at 11:54 pm

        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.

      • Gus says

        April 7, 2013 at 3:27 am

        Hi Kimi,
        I did as you recommended and my style.css is exactly as it is instructed on codex. Any thoughts?

        Thank you,

  12. Gus says

    April 7, 2013 at 6:41 am

    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

  13. Tamara says

    April 16, 2013 at 4:31 am

    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?

  14. Peter says

    July 5, 2013 at 9:28 am

    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

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