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
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.
Thanks for this tutorial! This is a very interesting blog
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!
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.
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!
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
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.
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
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.
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
Yay!! Happy that it works..Have fun watching Deutschland vs Portugal this evening 😀
Cheers, Kimi.