Twenty Fourteen: 2 Ways To Add A Logo Image To Your Site Title Header Area

In this tutorial, i’ll provide 2 of the best ways to add your logo image to your site title area of your header.

1. The 1st method involves a few lines of CSS code
2. The 2nd method involves editing PHP code

1. CSS Method

The 1st method is the easiest and involves 2 simple steps:

(i) Add this CSS code to your child themes style.css file.

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

(ii) upload your logo image to your child themes images folder making sure the file name and extension match whats in the CSS code.

And here’s the result when using the 1st method:

2. PHP Method

The 2nd method shows you how to replace the site title with your logo image.

There’s 2 steps involved:

1. Create a child theme and copy your header.php file over
2. Modify the code in the header.php file to include your logo image pulled from your child themes images folder.

1st step is to copy over your header.php file from the parent theme to a child theme so the changes you make to the code will be saved when the parent theme is updated.

After you have created a child theme for Twenty Fourteen and copied over the header.php file, go to Line 45 in your header.php file and change this line:

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

To this:

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

Then simply upload your logo to your child themes images folder making sure it matches the path, file name and extension which is the same as whats in the above code.

Here’s an example: