Replacing a post title with an image in WordPress

From time to time I answer questions on a variety of WordPress forums and discussion boards. I was asked an interesting question about WordPress today. One that seemed fairly simple. As I wrote my reply, I realized that there are several different ways to skin a cat.

I’m using WordPress. I want to replace the post title of my About Us page with a logo. How should I do this?

There are a few different ways to approach this.

1) You could duplicate the page.php file and call it page-about.php (or whatever the slug is for your “About” page.) Find the area that controls the page title and replace it with your logo. This will ensure that this PHP file is used only when the about page loads. The WordPress Codex will tell you all you need to know about the template hierarchy.

2) You could modify the page.php file and add an if/else statement.

<?php
if ( is_page('my-page-slug') ) {
  echo '<img src="'.get_bloginfo('template_url').'/path/to/img.png">';
} else {
  get_the_title(); //Or similar code from the template
}
?>

3) There’s a third way you could approach this using only CSS. It’s also a bit more SEO friendly than just using an image. Presuming that there’s a class that’s specific to the page, you could target just that page. For the purpose of discussion we’ll pretend that the body tag has a class of ‘.about’. You could do something like this:

<style type="text/css">
body.about h1 { /*Let's presume your banner title is an h1 element */
  width: 150px; /* Set this to the width of your image */
  height: 75px; /* Set this to the height of your image */
  background: transparent url('my-image.png') no-repeat top left; /* Change the URL to point to your image */
  text-indent: -9999em; /* This ensures that the text itself will not show. */
}
</style>

<html>
  <body class="about">
  <!-- The title below will be text and shown to search engines.
  Normal visitors will see the image you've specified in the CSS -->
  <h1><?php the_title(); ?></h1>
  </body>
</html>

Replacing a post title with an image in WordPress

One thought on “Replacing a post title with an image in WordPress”

Leave a Reply Cancel reply