Ever wanted to know how to show different custom header images on certain pages/posts of your website or blog? If your WordPress theme allows custom headers or you use the Thesis theme for WordPress you’re in luck.
If not, maybe its time to start searching for a more flexible theme.
Example: Your existing Home Page header may be displayed on every page & post of your site.
However, you may want a specific custom made header on a particular page or post or even for all posts on a particular category.
If you’re using a WordPress theme (other than Thesis) which offers a custom header option under the Appearance section in your WordPress Dashboard then you’ll need to follow these instructions.
How To Set Featured Image
Click on the Set featured image link on the right hand side of your Dashboard.
Upload your custom header image for that particular post or page as you would for an image and then click on Use as featured image.
After you have clicked on Use as featured image, the image will be saved as your featured header image for that page or post and you can click on the Save all changes button. You DON’T need to click Insert into Post.
Make sure you click Save Draft or Update your page/post afterwards and close the media window.
Note: Using a custom header image as a featured image for a particular post or page will NOT work if the image isn’t the exact width of your original header. Click on Appearance > Header in your Dashboard to check for the exact width.
The featured image module in your WordPress Dashboard (located bottom right) should also display the particular image your are using for that post or page once uploaded and set as your Featured Image.
How To Use Custom Header Images with Thesis on Unique Posts/Pages
Displaying a custom header image with Thesis is a little more complicated however you are compensated by the fact you do get 2 methods to choose from (CSS & PHP) and better options.
With Thesis you can choose to display a custom header image for each category of your posts as well which isn’t possible if your using another WordPress theme or framework unless you complete the work manually for each post.
Note: If you make a mistake in your code while modifying a PHP file, saving the page may result in your site becoming temporarily unusable. Prior to editing such files, be sure to have access to the file via FTP or File Manager so that you can correct the error if needed. Good idea to create a full backup beforehand as well.
Lets take a look at using pre made PHP code (rather than CSS) to display custom header images on different posts/pages and for all posts in a category.
This method is more flexible, complete and ONLY requires the user to copy and paste the custom made PHP code into your functions.php Custom File Editor as well as locate and edit the page/post I.D number.
Step 1. Upload the custom header image(s) to your custom images folder on your server using FTP or File Manager in cPanel.
Here’s what it looks like using your File Manager in your web hosts cPanel.
Once you upload your header image(s) they’ll appear in this location.
/public_html/wp-content/themes/thesis_182/custom/images
Step 2. Copy and paste this code into custom_functions.php located in your Custom File Editor.
function my_different_header_images() {
if (is_page('10')) {
?>
<img src=”<?php bloginfo(‘template_directory’); ?>/custom/images/<span style=”color:”">name of your header.jpg</span>”
width=”">Place your header width here</span>” height=”">Place your header height here” alt=”">Place your ALT text Here</span>” />
<?php
}
}
add_action(‘thesis_hook_header’,'my_different_header_images’);
You’ll need to edit 5 values before you save this php code:
- Find your page I.D
- Header width
- Header height
- Header ALT Text
- Name and file type of the header you uploaded to your custom/images directory
Little bit of work but once you can handle this you can make some really big custom changes to headers for different categories and all or any number of posts/pages.
function more_header_images() {
if (is_page (array( <span style="color: #99cc00;">10, 20, 23</span> ))) {
?>
<img src="<?php bloginfo('template_directory'); ?>/custom/images/<span style="color: #99cc00;">my-other-header.jpg</span>"">width="here" height="here" alt="and here"<//>
<?php
}
elseif (is_category()) {
?>
<img src="<?php bloginfo('template_directory'); ?>/<span style="">custom/images/my-header-2.jpg</span>"">width="yes" height="yes" alt="yes"</span> />
<?php
}
}
add_action('thesis_hook_header','more_header_images');
You’ll also need to make the same edits and upload your headers as you did in Step 2.
Brad Dalton
@wpsitesdotnet
Latest posts by Brad Dalton (see all)
- Add Featured Image Thumbnail From Post To RSS Feed - May 25, 2013
- Remove Comments From Specific Posts and Different Categories - May 24, 2013
- Add Multiple Sliders In Header On Different Pages - May 23, 2013
