Categories
Genesis Tutorials

3 Ways To Display Different After Header Images In Beautiful Pro Theme

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.

Beautiful Pro images on different 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.

Note: All PHP code goes at the end of your child themes functions.php file & CSS should be pasted near the end of your child themes style.css file before the Media Queries.

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.

Register for full access

13 replies on “3 Ways To Display Different After Header Images In Beautiful Pro Theme”

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?

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:

add_image_size( 'featured-banner', 2000, 300, TRUE );

function amcs_featured_img() {
	if ( has_post_thumbnail() )
	the_post_thumbnail('featured-banner');
	else {
	echo '<div class="site-header-banner"></div>';
}}

add_action( 'genesis_after_header', 'amcs_featured_img', 5 );

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.

By Post Author

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.

Leave a Reply

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