On a few of my WordPress themes I include an option to upload an image to display as your blog’s header. If you’re running a different theme, but would like this functionality, it’s very simple to recreate – so follow along and learn the tricks!

Create initial Plugin folder and files
Locate your  /wp-content/plugins/ folder in your blog’s file directory. Create a new folder called /dynamic-header/, and inside that folder create two files named dynamic-header.php and header-img.php
Setup plugin information and functions
For your plugin to show up in the WordPress plugins list, you have to define some basic variables at the top of dynamic-header.php. Open up the file in your code editor of choice (I use Dreamweaver), and start it off with this chunk of PHP –

<?php
     /*
          Plugin Name: Dynamic Header
          Plugin URI: http://www.pancak.es/plugins/
          Description: Dynamically control the header image of your website.
          Author: Nick Berlette
          Version: 1.0
          Author URI: http://www.pancak.es/
     */

You can change the values above to anything you want, just remember they’ll be showing up in the Dashboard plugins area. Now we need to setup an action hook to trigger our custom options page for the admin panel. Continue your dynamic-header.php file with this code.

     add_action('admin_menu', 'append_options_page');
          function append_options_page () {
          add_theme_page('Header Image', 'Header Image', 8, __FILE__, 'display_options_page');
     }

Basically, this will add the “Header Image” link to the Appearance menu in the dashboard. After this, we need to define the function “display_options_page”, which will display our options page and contain the function for saving the header image to the WordPress database. Add this code right after the last:

     function display_options_page () {
          // check for uploaded image, save code.
          if (is_uploaded_file($_FILES['header_image']['tmp_name'])) {
              // is it an allowed type?
              $extension = substr($_FILES['header_image']['name'], strpos($_FILES['header_image']['name'], '.') + 1);
              if (in_array($extension, array('gif','jpeg','jpg'))) {
                   // save the image
                   update_option('dynamic_header_data', base64_encode(file_get_contents($_FILES['header_image']['tmp_name'])));
                   // display success message
                   echo '<div id="message"><p><strong>' . __('Your new Header Image has been uploaded.') . '</strong></p></div>';
              } else {
                  // yell at them
                  echo '<div id="message" style="background-color:#f66;"><p><strong>' . __('The uploaded image must be a valid GIF or JPEG file.') . '</strong></p></div>';
              }
         }
         // show the form to upload a new image
?>
<form method="post" action="" enctype="multipart/form-data">
      <table><tbody>
           <tr valign="top">
                <th scope="row">Upload a New Image</th>
                <td>
                     <input type="file" name="header_image" size="50" />
                     <input type="submit" value="Upload" />
                </td>
            </tr>
            <tr valign="top">
                 <th scope="row">Current Image</th>
                 <td><img src="/wp-content/plugins/dynamic-header/header-img.php" alt="None" /></td>
            </tr>
      </tbody></table>
</form>
<?php
       }

The code above basically works like this: it checks to see if the form has been submitted, if so, it checks if the image is valid and if that’s true too, it saves the contents to the WordPress database in base64 format. Then it displays the form to save a new image and see the current image below, regardless of if it’s been saved or not.

Now we’ll move on to the final function in this file, which displays the URL to the file that calls the saved image from the database. Let’s do it!

     function display_dynamic_header ($class = false, $alt = false) {
          $html = '<img src="' . get_bloginfo('siteurl') . '/wp-content/plugins/dynamic-header/header-img.php"' .
          ($class ? ' ' : ' ') . ($alt ? 'alt="' . $alt . '" ' : ' ') . 'border="0" />';
          return $html;
      }
?>

This function basically just spits out an image URL with an optional CSS class and alternate text. Now, let’s move on to the second file, header-img.php.

Retrieving the image from the database and displaying it

Open up your second file in /dynamic-header/, entitled header-img.php. This file is pretty simple, just a few lines of code to get the job done. First we include the wp-config.php file to ensure we have a database connection, then we get the header image data and parse it as an image. Save this code in your file:

<?php
      include_once('../../../wp-config.php');
      header('Content-Type: image/jpeg');
      $header_data = get_option('dynamic_header_data');
      echo base64_decode($header_data);
?>

We’re done with all of the plugin files! Save your data and go check your Plugins page in the /wp-admin/ Dashboard, you should now see the “Dynamic Header” plugin appear as inactive. Activate it, and move on to the final step.

Displaying the header image in your current theme

Find your current theme in use on your blog – I tried this out on the WordPress Classic theme. Open up the file header.php, or index.php, wherever your theme’s header data is stored. We need to find the current text displayed as the HTML title. In Classic, it’s displayed in an <h1> tag as seen below.

<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>

To display the Dynamic Header, we just switch out bloginfo(‘name’) in between the <a></a> tags with echo display_dynamic_header(”, get_bloginfo(‘name’)). The edited code will look like this:

<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php echo display_dynamic_header('', get_bloginfo('name')); ?></a></h1>

This will display the header image as saved, and if there is none it will show the blog name just as it was before. Simple, right?

We’re all done!

That wraps it up for this WordPress tutorial, feel free to experiment with your newly created plugin and use it on any themes you wish. If you have any questions or comments about these, feel free to leave them below

If you’re lazy, like me, you can download this plugin without any programming skills needed.