Adding Different Header Images to Specific Pages & Posts in WordPress

Some WordPress users like to display unique header image’s on different posts & pages or add display random/rotating header image’s on specific pages of their WordPress site.

There is a way to add a header image to a new page or existing post in WordPress using the featured image option in your WordPress post edit screen. The only problem is sometimes you’ll need to add css & php code which can be a time consuming challenge .

An easier way to add a different header image in WordPress is to install a plugin named Dynamic Headers. Its a free plugin which enables you to manage what header media is shown on each page/post. Dynamic headers also allows you to add an type of file including flash files.

The dynamic header image plugin also offers:

• Ability to add links to different header images
• Compatibility for Twenty theme
• Works with different browsers
• Rotating header images on different pages & posts
• Permitted file types: .jpg, .jpeg, .gif, .png, .swf

If you don’t have a header image yet, you’ll find this tutorial on how to create a header for WordPress helpful.

Dynamic Header Plugin

Here’s some important instructions from the plugin developer prior to uploading your header images. You’ll need to create a new folder on your web server and add some php code to your theme’s header.php file.

Description: This plugin will allow you to upload various media type (jpg’s, gif’s, png’s and Flash files) to use as headers throughout your site.

You can assign different headers of different filetypes to be used on different posts/pages.

You can also set a default header to use on posts/pages that do not have a set header.

1. After installing the plugin you will need to create a folder called header-images in your wp-content folder (/wp-content/header-images/). You will need to make this folder writable. If you are unsure on how to do this, consult your hosting company, your help files for your hosting, your FTP client documentation, etc. This process can vary from server to server.

If the directory is not writable you should be seeing an error message at the top of the plugin admin pages.

2. Upload media (using the filetypes listed above) on the Add New File Page.

3. Go to the Settings Page (created under the Headers menu created by the plugin). and set your default header image. If you do not set a default header image, no media will be shown for posts and pages that do not have a header image associated with it.

Alternatively, you can also add images to the /wp-content/header-images/ directory using your FTP client or other file manager.

4. Create or edit a post or page and at the bottom of the page you will see a new box called “Dynamic Header by Nicasio Design”. Select from the drop down one of your uploaded media files. This media will be shown only on the page or posts you set it to appear on.

5. BACKUP YOUR THEME DIRECTORY BEFORE MAKING ANY MODIFICATIONS TO ANY THEME FILES

6. Now you will need to add the template tag created by the plugin to your theme file where you want your dynamic header to appear (this will usually be in wp-content/themes/your-theme-name/header.php).

You have 2 options for adding your dynamic header:

Option 1 (Recommended): Simply drop the this line of code into your theme file that controls your header (usually header.php)

Note: The location to add this code can vary widely from theme to theme and depending on your theme’s css settings you may have to use Option 2 and modify the CSS of your theme **BACKUP ANY THEME FILES BEFORE MODIFYING**

<?php if(function_exists('show_media_header')){ show_media_header(); } ?>

This will automatically determine what type of media you are using and generate the appropriate code to insert it. No other coding is required on your part.

Option 2: You can use this line of code to simply get the URL of the media for a particular post or page. This will allow you to do some more advanced things and embed the media yourself if you know what you are doing.

<?php if(function_exists('dh_get_page_image_url')){ $dynamic_header_url = dh_get_page_image_url(); } ?>

You can then use the variable $dynamic_header_url however you see fit. It will contain the full path to your media file for that particular page/post, including any default media that should be shown.

It is advised that most users simply use Option 1 if at all possible, as it is significantly more simple.

Note: This function can return NULL or the string ‘None’ if there are no headers for the current page. Source Dynamic Header

Adding New Header Images

Once you’ve followed the user directions and setup a new header images folder on your server, you can upload a new header image in the Add New File screen.

Once you’ve uploaded your header image, you can go to any post or page edit screen, scroll down to the bottom of the page and select which header image you’d like to use for that unique page or posts.

Manage Header Image Files

Here you can delete header image files, edit files by selecting the header image you wish to change and changing the link url and Alt Text. That’s it for this screen.

Header Image Settings

There’s 2 main settings on this page.

Default Header Media

If you do not set a default header, none will be shown on pages where one is not set. Selecting Random Media will randomly display one of your media files on pages that do not have a header associated with them.

Blog Page Header

The blog page is the default homepage for WordPress. It is the page that shows your latest posts. The blog page header has to be handled separately. Select the media to use on the blog page with this drop down.

Conclusion

Great plugin for adding and using different header images on specific pages and posts in WordPress. If you’re a total newbie you may need to ask your web host to create a new file folder directory on your server for your header images and make sure it is writable. And you’ll also need to add the php code to your theme’s header.php file.

Found another way to add different header images on specific pages & posts in WordPress?