Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

How to Add Logo to Twenty Fourteen Theme

Add logo to WordPress Twenty fourteen theme:

Twenty fourteen is a default WordPress theme, where many websites are using this theme.Here you can learn how to add logo to twenty fourteen theme.By default, text (site name) will appear in the header,which looks normal.If you want to add a custom logo to twenty fourteen child theme,then follow this tutorial.

Method 1 :

1. Login to your Dashboard.
2.Click Appearance -> Editor
3.The following code should be added to your twenty fourteen child theme's style.css file.

.site-header {
background-image: url('images/logo.png');
background-repeat:no-repeat;
}

After adding this code in the css file, upload a logo image to your child theme's images folder making sure the name of the logo should be logo in png format.

Method 2:

This is a another method to add a logo to WordPress twenty fourteen themes. It's a bit of the complex method comparable to method 1. Use any one of the methods, which you feel comfortable

1.After creating a child theme, copy header.php file from default WordPress twenty fourteen theme.(Use cPanel to do this task)

2.Search for the following code ( you can found it around on line 45.)

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

3.Replace the above code with the following code.

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><div class="logo"><img src="<?php echo get_stylesheet_directory_uri(); ?> /images/logo.jpg" /></div></a></h1>

4.Finally upload your custom logo in child theme's images folder by naming the image with logo and it should in png format.

That's it.If you find any difficulty let me know.

Related Posts

  • How to Inline Small JavaScript Files
  • How to Add Related Posts with Thumbnails in WordPress
  • How to Combine External JavaScript files in WordPress
  • Remove WordPress Emoji Script and Style
  • Manually Display Disqus Comment Count in WordPress
  • How to Avoid CSS @Import in any WordPress Child Theme
  • How to Enable Gzip Compression in WordPress
  • How to Remove Website Field from WordPress Comments
  • The Ideal WP Fastest Cache Settings 2016
  • Best Way to Defer Parsing of JavaScript in WordPress

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial