WP SITES

2893

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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?

  2. 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 );

  3. 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?

      • 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?!

          • 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!

  4. 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