Custom Title Banner in Wordpress

I'm going to figure you know how to make a text banner in Photoshop, or an image editor of your choice.  If not, I'll go back there later.

For now, we're just looking at the WordPress code.  Did you ever install a WordPress theme that displays your blog's title as simple headline text?  Would you like to replace it with an image banner?

First step:  Create the image.  Note:  A banner size of 80 pixels in height and 600 pixels wide will probably work for most themes.

Upload the image:  The proper way would be to FTP into your blog theme's image file.  But it is easier to open the post editor, click add media|add image, and upload the banner image the same way you would an image for a post ... but instead of clicking Insert into Post, instead, just select and copy the image's Link URL:

Back the the WordPress dashboard, click Design|Theme Editor and click on the Header (header.php) file to open it in the editor window.  Before you do anything else, click Edit|Select All, then Edit|Copy  and Paste the copied code into a simple text file (Notepad is perfect for this.)  That way you have a working copy of the code to paste back into the file if things go awry.

In the header.php file, find the line that reads <?php bloginfo ('name"); ?>  (that code may appear more than once) (The find function: CTRL F works great for this)

And each time you see that little piece of code, delete it, replace it with the URL of the image that you copied earlier.  You'll need to add the image call img scr=  so your final code will look like this:

<?php bloginfo('url'); ?>"><img src="http://www.questions4realestate.com/wp/wp-content/uploads/2008/09/questions.png">

 Click Update File.

----------------

Sample of complete code snippets using DOJO Theme:

Find this code:

<div id="header">
 <?php if ( is_home() ) { /* use an h1 on the homepage */ ?>
 <h1 id="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 <?php } else { /* and a p tag everywhere else */ ?>
 <p id="blogname"><strong><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></strong></p>
 <?php } ?>
 <p id="tagline"><em><?php bloginfo('description'); ?></em></p>
</div> <!-- end header -->

Replace  both instances of  <?php bloginfo('name'); ?>

With  <img src="http://www.questions4realestate.com/wp/wp-content/uploads/2008/09/questions.png">

Final code snippet:

<div id="header">
 <?php if ( is_home() ) { /* use an h1 on the homepage */ ?>
 <h1 id="blogname"><a href="<?php bloginfo('url'); ?>"><img src="http://www.questions4realestate.com/wp/wp-content/uploads/2008/09/questions.png"></a></h1>
 <?php } else { /* and a p tag everywhere else */ ?>
 <p id="blogname"><strong><a href="<?php bloginfo('url'); ?>"><img src="http://www.questions4realestate.com/wp/wp-content/uploads/2008/09/questions.png"></a></strong></p>
 <?php } ?>
 <p id="tagline"><em><?php bloginfo('description'); ?></em></p>
</div> <!-- end header -->

 P.S.  I'm really liking the DOJO Theme -- very clean and simple.  See it in action at my http://www.questions4realestate.com/