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 Adding Logo to Twenty Fourteen on The Top Left

WordPress themes

Adding Logo to Twenty Fourteen on The Top Left

Last updated on February 18, 2017
Posted on January 24, 2014

Another logo post in another new WP theme today. The reason why I wanted to write this “Logo in Twenty Fourteen” post down, is because Twenty Fourteen has sticky menu on the top, and if you add any logo with any dimension, it will change the top navigation’s behaviour, which is, the menu will not be sticky anymore. Also discussed here.

Alternatively, you can surely upload bigger picture, however, it means, you won’t have sticky menu, or you will need to modify the whole css style which will need time.

The logo which will will be uploaded must have smaller height or same height than 44 px.

With the width, I have mine at 100px, you can upload wider than this, but also not much, just try it yourself and find your perfect sizing for your logo.

 

This is the result if you add logo to Twenty Fourteen with this tut.
This is the result if you add logo to Twenty Fourteen with this tut.

How to add Logo to Twenty Fourteen?

There are many ways to replace your site title with an image, first, upload your image to your media library, and adding background image to your style.css.

Second, uploading your image to your Child theme folder, and editing child theme’s header.php.

How To Style WordPress Caption in WP Twenty Fourteen Child

I prefer the second method, because once you want to replace your image, you can just go to your folder, and replace it or delete the old one.

If you use the first one, you can just delete the css code, however, your image will be still in your media library, and unused – wasting your web server’s space, unless you also look for it, and delete it.

Both are fine method, but in today video, we are going to add logo like my other tutorials, which is the second one.

Steps adding logo to Twenty Fourteen

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

I am using child theme of Twenty Fourteen, click here for the video.
1. Prepare your logo, mine is a .png file, the dimension is 100×44 px.

2. Compress your image in Yahoo smush it to reduce the file size, this will effect your webspace, and importantly, loading speed of your site, as the logo will always appear in every posts or pages in your website, see more on optimizing images before uploading.

3. Inside your child theme, create “images” folder, and upload your image here.

Inside this "images" folder, you can upload the logo
Inside this “images” folder, you can upload the logo

4. Go to parent theme, which is “twenty fourteen” folder, copy the header.php to your child theme. (the name of the folder is case sensitive..)

5. In the child theme’s new copied header.php, add this line of code after rel=”home”> and before </a>

<img src=”<?php echo bloginfo(‘stylesheet_directory’);?>/images/logo.png” alt=”<?php bloginfo( ‘name’ ); ?>” width=”100″ height=”44″/>

Change the .png if you have other extension, like .jpeg, or .gif, change the width and height accordingly, not more than 44px remember? 🙂

The code to add logo in Twenty Fourteen
Adding logo code

Save your file. Refresh your blog and clear the cache if it doesn’t show up.

If you want the logo align to the left top, and not having black border, you can add this to style.css in child theme folder:

h1.site-title a img {
	position: absolute;
	top: 0px;
	left: 0px;
	border-bottom: 3px solid #990000;
}

That’s how I add Twenty Fourteen logo.

logo twenty fourteen wp3.8

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
← Showing “Featured posts” Images in Twenty Fourteen Homepage
→ Setting Autoplay Twenty Fourteen Slider

Comments

  1. mik says

    January 27, 2014 at 4:51 pm

    Thanks for this tutorial! This is a very interesting blog

  2. Thomas says

    June 13, 2014 at 4:40 pm

    Hallo,
    thank you very much for this tutorial.
    When using the code in step 5, it works just fine …
    but unfortunately only when i am logged in.
    When logging out, the logo disappears and there is the “written”
    site-title as before.
    Could you please help me out!
    Thank you very much!

    • Kim Muellner says

      June 13, 2014 at 5:42 pm

      Hello Thomas,

      Do you use any cache plugins? If you do, can you please clear all cache or disable the cache plugin first.

      Also clean your browser’s cache.

      The link of your site would be helpful, so I can take a look.

      Kindly, Kimi.

      • Thomas says

        June 13, 2014 at 8:02 pm

        Thank you for that quick response!
        It’s probably not the Cache … i tried it.
        I really would appreciate it, if you could take a look …
        Thanks again!

  3. Thomas says

    June 16, 2014 at 11:15 am

    Dear Kimi,
    i tried disabling the cache plugs, but it doesn’t make any difference.
    Thank you for looking at my site!
    Kind regards – Thomas

    • Kim Muellner says

      June 16, 2014 at 1:29 pm

      Hi Thomas,

      I already looked at your site, in the source code, the logo source image isn’t there.

      Would you mind to copy and paste the header.php of the child theme here (pastebin).

      Then copy the URL, and let me know the URL, so I can check the code.

      Kimi.

  4. Thomas says

    June 16, 2014 at 2:21 pm

    Hi Kimi,
    thank you.
    Did you look at the German Version?
    It should be there.
    Anyway, i put the header there: http://pastebin.com/6qVKxpcw
    Kind regards – Thomas

    • Kim Muellner says

      June 16, 2014 at 2:38 pm

      Hi Thomas,

      I did take a look at German version, it wasn’t there..

      However, I guess the flags widget plugin may be the issue.

      Alternatives:

      1. You can try to disable the flags widget and see if it works.

      2. Let the site as it is, but adding the logo with css, add this code at the end of your child theme’s style.css

      .site-title {
      background: url("https://yoursite.de/wp-content/themes/child-theme/images/logo.png") no-repeat scroll;
      }

      Save the file, and see if it works, if it does, you can delete the header.php of the child theme If it only contains the code to add logo.

      Let me know if it works..

      Kindly, Kim.

  5. Thomas says

    June 16, 2014 at 2:59 pm

    Dear Kimi,
    guess what: now i did not olny disable my chae plugin but completely deinstalled it.
    Now it works fine!
    And this was your first idea!
    You really got a “good nose”!
    Thank you very much for helping me out!
    Kind regards – Thomas

    • Kim Muellner says

      June 16, 2014 at 3:03 pm

      Yay!! Happy that it works..Have fun watching Deutschland vs Portugal this evening 😀

      Cheers, Kimi.

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