Adding Logo to Twenty Fourteen on The Top Left

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.

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.

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? 🙂

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.