Using a logo in the header: Best WordPress practices

Using a logo in the header: Best WordPress practices

Though a logo is pretty standard identification for most businesses (what would a MacBook be without the apple insignia? A white box?) by default WordPress uses the site title and description to identify your site. Some themes will have the option to replace those with a logo but, if not, how do you do that? Which method is the best?

Okay Method: As Header Background

A  simple way is to use your logo as a background image in the header. If there already is a background image you can replace that image or add a new one. You do this by changing the CSS file  found under Appearance > Editor. Look for styles for the header. The style to use a logo in the background would look something like this:

header { background: url(/images/yourlogo.jpg) repeat-none top left }
.site-title, .site-description { display:none }

This would place the logo as an image, flush left, in the header background and hide the site title and description. (The site title and description are specified under WordPress General Settings. The “page title”  is what appears in your browser window or tab, and is usually edited with a SEO plug-in)

There are some drawbacks to this solution. Without the site title, a search engine may not be able to identify your site. You visitors may see the logo at the top of every page but search engines cannot ‘read’ pictures, only text.

Better Method: Editing the header.php file

A more effective solution requires a little bit of PHP editing. Find the header.php file and look for something like this:

<h1>
    <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>

This code places the site title (‘name’) and description in the header. Replace it with:

<?php if  ( file_exists( TEMPLATEPATH . '/images/yourlogo.jpg' ) ) { ?>
  <a href="<?php echo get_settings('home'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/YOURIMAGEFILEHERE" alt="<?php bloginfo('name'); ?>" /></a>
  <?php } else { ?>
  <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<? } ?>

which is use the logo image file which you have placed in your themes ‘image’ folder (change “yourlogo.jpg” to the actual file name) if it exists. The advantage to this site is that it uses your site title as an image ‘alt’ tag which let’s search engines ‘read’ your logo.

The drawback to this method is that it requires you to edit PHP. One small mistake can bring your site down. Back up the file you are editing beforehand.

Best Method: Using CSS Image Replacement

Here is a method that I think works the best and is becoming increasingly popular by web developers who follow best SEO practices

It uses “CSS image replacement” which is a technique of replacing a text element (usually a header tag) with an image. The advantage is

  • you don’t need to modify the php file
  • you only need to modify CSS.
  • You still have the site title where search engines expect to see it.

There are several ways to do image replacement. Here is one reliable method. Place this in your styles.css file found under Appearance > Editor (best if you are working with a child theme, more on that in a separate blog post)

.site-title {
    width: 350px;
    height: 75px;
    background: url("/images/yourlogo.jpg") no-repeat;
    text-indent: -9999px;
}
.site-description {
    display: none;
}

This places your logo as a background image behind  your site title and then indents the site title so it is way out of the viewing window. Search engines  still see the site title where they expect to see it and can identify your site easily. Specify the size of your logo with the width and height styles so it is not cropped unexpectedly.

This method should work with most themes. I tested it with WordPress default Twenty Twelve theme. However some themes may not use the “site-title” class so that would have to be edited to match how the theme is set up. Try it out and let me know if you have any questions.

 

Anything on your mind?