I’ve already shown you how to display unique header images on different pages, posts, categories and archives using PHP code.
In this tutorial, i’ll provide all the working CSS code tested using dozens of different options.
Generally, there’s 3 ways to achieve the same result when using WordPress:
- PHP Code
- CSS Code
- Plugins which include PHP and/or CSS code
When it comes to changing header images, CSS code is one of the best solutions.
This code assumes you have uploaded your header images to your child themes images folder.
All CSS code should be pasted at the end of your child themes style.css file.
Note: If you added your header image using the Custom Header uploader under the Appearance menu in your dashboard, it will display site wide therefore you will need to remove it conditionally on the pages you want to add a different header using CSS code from this post.
Same Header All Single Posts Using Full Width Layout
.single-post.full-width-content .site-header {
background: url("images/single-full-width.png") no-repeat scroll 0 0 transparent;
}
Same Header For All Category Pages Using Full Width Page Template
.category .full-width-content .site-header {
background: url("images/category-full-width.png") no-repeat scroll 0 0 transparent;
}
Same Header Image For All Pages Only Using Full Width Layout
.page .full-width-content .site-header {
background: url("images/page-full-width.png") no-repeat scroll 0 0 transparent;
}
Use Same Header Image On All Full Width Layout Pages and Posts globally
.full-width-content .site-header {
background: url("images/header-full-width.png") no-repeat scroll 0 0 transparent;
}
Use The Same Header On Pages Using Default Template
.page-template-default .site-header {
background: url("images/header-page.png") no-repeat scroll 0 0 transparent;
}
Change Header For Specific Single Post
.postid-007 .site-header {
background: url("images/header-post.png") no-repeat scroll 0 0 transparent;
}
Same Header Image On All Archive Pages
.archive .site-header {
background: url("images/header-archive.png") no-repeat scroll 0 0 transparent;
}
Same Header Image For All Category Pages
.category .site-header {
background: url("images/header-category.png") no-repeat scroll 0 0 transparent;
}
Different Header Image For Specific Category Archive
.category-blogging .site-header {
background: url("images/header-category.png") no-repeat scroll 0 0 transparent;
}
Change Header Image Home Page Only
.home .site-header {
background: url("images/header-home.png") no-repeat scroll 0 0 transparent;
}
Add Different Header Image For Blog Page Template
.page-template-page_blog-php .site-header {
background: url("images/blog-header.png") no-repeat scroll 0 0 transparent;
}
Different Header Image On Specific Page
.page-id-007 .site-header {
background: url("images/unique-header.png") no-repeat scroll 0 0 transparent;
}
Add Unique Header Image On All Landing Pages
.page-template-page-landing-php .site-header {
background: url("images/landing-page-header.png") no-repeat scroll 0 0 transparent;
}
Finding The Right Classes
All the CSS code above has been written using classes you’ll find by viewing the source code of specific pages in WordPress.
Once you scroll down and find the body class, you can then find which classes to use in your code to customize the display of your header images specifically.
Here’s a view of the source code for a single post.
body class="single single-post postid-38732 single-format-standard header-image header-full-width content-sidebar
And here’s a view of the source code for one specific category page.
body class="archive category category-web-design category-134 header-image header-full-width content-sidebar
The web development tool, Firebug, also enables you to find CSS classes that you can use to create new styling rules for customization and display of header images on your website.
Other Options – Different Themes
Every theme is slightly different so you you may need to try out different solutions.
Here’s another method which includes using PHP and CSS code to add a default image on the home page and a different header on all other pages.
Prefer a Plugin
The WP Display Header plugin is an excellent option if your prefer plugin to code. Also find out other options for displaying specific header images using CSS code and PHP code in the Genesis Simple Hooks plugin.
Using PHP Code With Custom Fields For Displaying Different Headers
One of the most powerful and flexible ways to use unique headers on specific pages and posts is to create a custom field. Read more about how to create a custom field in Genesis for adding unique headers to any page or post.
Was This Tutorial Helpful?