How to add a logo image to Twenty Fourteen

For quite some time we were using a customized version of the Twenty Fourteen WordPress theme here on WHW and despite the fact that it is a really awesome theme that I’m excited about since they first announced it, as you may or may not know, it does not have a solution to add a logo image just a full-width header image.

We had a nice image logo in the left side with a hover effect. If you follow the lines below, you can have something like that too.

We got a few emails that asked for a solution to add the logo image in the left side. So here it is…

We reverted back to the Twentyfourteen theme a while ago, and this time we added our logo in a different way than described in the first method below. So, we have two methods. The advantage of the second one is that we don’t have to add a header.php to our child theme as it is described in the section below. Use whichever you like.

First method to add the logo

Have your logo image in a png format, it has several advantages compared to jpg for example. We are working with a logo image named “logo” in this example.

About the size of the logo: height should not be larger than 44px. Width is more flexible, you can play around with it. In our case it was 113px.

Step 1 – Working with a child theme

Create a child theme, otherwise all the customizations you make will disappear when an update comes out for the Twenty Fourteen theme. If you don’t know how to create a child theme, or you’re just lazy (like me)  just go the WP theme repository and search for “Twenty Fourteen” and some basic child themes will come up and you can install one.

Step 2 – Reviewing the child theme

Identify what files does your child theme have. It is more than likely that a starter child theme doesn’t have many files yet, so you will need to add those for further functionality.

As far as the logo goes, we will only need a header.php file (just create the folder inside your child theme and copy the content of the original header.php).

Maybe a folder for the logo image for our new child theme is a good idea too, although the logo image can be simply uploaded via the media uploader. But for the sake of best practices, let’s store that in this specified folder.  Let’s name that folder “images”. Using FTP upload your logo image to this folder.

Step 3 – The magic

You need to find the next code in your header.php:

<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

Replace it with this:

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img id="logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Name of Your Website" /></a></h1>

Where of course logo.png is the name of the logo image. In case you are not creating an images folder then you need to replace the above url of the logo  with the one from the media uploader and that’s it.

Also, don’t forget to review the code and apply the proper changes to your site, including changing the name of the site to your own website and in case you have different named folders/logo names than in our example.

Add some styling to it:

img#logo { max-width: 100%; height: auto;}

If you want opacity when hovering over the logo:

img#logo:hover { opacity: 0.65; }

Second method – with less work

As I mentioned in the introduction, we can add a logo  image without having to create a header.php and then modify it in our child theme. So we still need a child theme, but this time we will only use CSS to add the logo.

If you notice, our current logo changes some of its colors when we hover over it inspite of the fact that it’s an image. This is done very simply by creating two distinct logo images and using both at the same time – one for being the logo that we see generally and one to display when we hover over it.

In our case, the CSS for this looks like this:

#page .site-title a {
background: url("/images/logo1.png") repeat scroll center top / 178px 42px transparent;
text-indent: -9000px;
width: 178px;
}

#page .site-title a:hover {
background: url("/images/logo2.png") repeat scroll center top / 178px 42px transparent;
text-indent: -9000px;
width: 178px;
}

And there you have your logo. Of course, some points of the first method are necessary, like the child theme and of course what I said about applying the right changes  to the code (change the name of the logo image ad folder name to yours if you have different).

If you have any questions regarding the above, feel free to ask down at the comments section and I will gladly answer them.

In Category: Blog

Frank Rankowitz

Show 2 Comments
  • James Odell February 22, 2015, 1:23 pm

    Thanks Frank for this. I found this post useful.
    Just a suggestion, I found in “Step 3 – The Magic” that the opening statement should be:
    <h1 class="site-title">
    for the WordPress twentyfourteen theme. So the full statement should be:


    <h1 class="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img id="logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Name of Your Website" /></a></h1>

    This then formatted correctly. Thanks again for the post.

    • Frank Rankowitz February 22, 2015, 5:38 pm

      Thanks James, you are right. I messed it up there. I’ll correct it right away.

      Thanks for pointing it out.

Leave a Comment