Custom Header Images for Twenty Ten Theme

Twenty Ten, the default theme for for WordPress 3, features a prominent header image. It comes with eight header images installed, photographs by Matt Mullenweg, the founding developer of WordPress. (You can read more about these photographs on his blog: The Headers of Twenty Ten)

Here are a few ways that you can customize the header images for your site:

Change the Header
If you don’t want to use the default image, there’s an admin panel where you can select one of the others. Just go to Appearance –> Header and scroll down to Default images. Look at the thumbnails, and click to select the one you want.


Add Your Own Image
If you don’t want to use one of the default images, you can add your own image using the Upload Image option on the Appearance –> Header screen. Twenty Ten’s header images are 940 x 198 pixels. You can crop an image to this size using your favorite editing program, or just upload an image that’s any size wider than 940 and resize and crop it right within WordPress. Images uploaded through this option will become the new header, and will be stored in your default image directory.

Set Up Your Own Gallery of Header Images
If you never plan to use the default header images, you can replace the gallery with your own header images. This is not a difficult, as long as you’re careful.

Here’s how to do it:

  • Select eight photographs and resize and crop to 940 x 198 for the header images, and 230 x 48 for the thumbnails. Give the files short, simple names.
  • Use an FTP program to transfer the files to Twenty Ten’s header directory. The path will be /wp-content/themes/twentyten/images/headers/. You can either move, delete or ignore the images that are already in the folder.
  • Next, go to Appearance –> Editor and select the Theme Functions (functions.php) file. Find the line that starts with this:
    Default custom headers packaged with the theme.
  • A few lines down, you will see a series of eight “paragraphs” of code, one for each of the default images, starting with berries. Edit each paragraph to replace the the labels (like berries and the file names (like berries.jpg to match your files. Note that each “paragraph” has four edits.
  • When you’re finished editing, save the file. Your images should now have replaced the default images, and you can change the header image by selecting from your thumbnails on the Appearance –> Header screen.

Screenshot

Rotating Header Images
WP Random Header — If you want to have rotating header images, this WordPress plugin from Callum Macdonald should do the trick. We’re using it on this site — reload the page a few times, and you should see different header images. (They are all photographs of NOBLE member libraries, with more coming soon!)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>