In this tutorial, i’ll show you 3 ways to conditionally display different banner images after the header of the Beautiful Pro theme by StudioPress.
Here’s the question on the StudioPress Community forum i have resolved with this solution.
Seeking help with hook with conditional statement
Goal: Add a different image that displays beneath the header on specified pages.
If you only want to display a handful of different images, then this method is one of the best.
Lets look at 3 different options you can use or modify to suit your own preferences.
Display Default Image On Front Page & 2nd Image On All Other Pages
This method includes code which uses the default after header background image on the front page and a second image on all other pages.
I am needing to have a different header just for one page. When I tried the code it worked but it duplicated my home page header on every page. What am I doing wrong?
Hello Amanda
This post relates to after header image, not header image however, there are 2 plugins which do the a good job.
WP Display Header and Custom Headers Extended by Justin Tadlock
Here’s another method i tested which works well also http://wpsites.net/web-design/add-unique-header-image-to-custom-landing-page-template-for-genesis/
Hey Brad
Just wanted to say I found this really helpful. It also helped me come up with a solution that replaced this banner with a post’s featured image:
Thanks for the solution Andy.
Thanks so much for this Brad! I’m considering using this theme on another website of mine, but I’ve noticed on sites using this theme already that the header image area isn’t mobile responsive. Like it crops it a lot if you’re looking at it on a phone or smaller device? Do you know if there’s a way to instead of adding multiple headers that are different, just upload 2 or 3 headers that are different sizes for different sized devices?
Hello Ashlee
You can use mobile conditional tags.
You can do this by creating the conditional tags manually or installing a plugin like Mobble.
Thanks SO much Brad! That looks fantastic! I can’t find a lot of info on Mobble though, and no youtube tutorials either. Is it just a simple download and then it does pretty much everything behind the scenes for me? Or do I still need to do some heavy lifting…eh coding?!
You still need to write the new conditional tags into custom functions. There’s no easy solution other than coding or media queries.
So I can basically just be like “if…iphone size #px…then show this image instead”?! Kinda like what you did here just for mobile devices? Sorry for all the dumb little questions but you’re the best research on all of this I’ve found yet! Thanks so much Brad!
Thanks Ashlee.
I will be writing about how to use mobile conditional tags in the near future.
I’m wondering – could you also do this with CSS using page id?
Like:
.page-id-1 .site-header-banner { background: url(some image here); ……..etc?
That way you wouldn’t have to ftp in whenever you wanted to change the image, and could just upload it right in your dashboard.
Thoughts?
You could with the header image yes but how would you position it after the header?
You can just hook in a div class on its own and then add the image in your style sheet which is better in my opinion for this position because you can also use conditional tags.