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

Oct 25, 2013

—

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.

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.

After Header Image Beautiful Pro Theme

Comments

13 responses to “3 Ways To Display Different After Header Images In Beautiful Pro Theme”

Amanda Taylor

January 29, 2014

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?

Log in to Reply
1. Brad Dalton
  
  January 30, 2014
  
  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
  
  Log in to Reply
2. Brad Dalton
  
  May 13, 2014
  
  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/
  
  Log in to Reply
Andy

January 9, 2014

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:

[code]
add_image_size( ‘featured-banner’, 2000, 300, TRUE );

function amcs_featured_img() {
if ( has_post_thumbnail() )
the_post_thumbnail(‘featured-banner’);
else {
echo ‘

‘;
}}

add_action( ‘genesis_after_header’, ‘amcs_featured_img’, 5 );
[/code]

Log in to Reply
1. Brad Dalton
  
  January 9, 2014
  
  Thanks for the solution Andy.
  
  Log in to Reply
Ashlee

November 14, 2013

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?

Log in to Reply
1. Brad Dalton
  
  November 14, 2013
  
  Hello Ashlee
  
  You can use mobile conditional tags.
  
  You can do this by creating the conditional tags manually or installing a plugin like Mobble.
  
  Log in to Reply
  1. Ashlee
    
    November 14, 2013
    
    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?!
    
    Log in to Reply
    1. Brad Dalton
      
      November 15, 2013
      
      You still need to write the new conditional tags into custom functions. There’s no easy solution other than coding or media queries.
      
      Log in to Reply
      1. Ashlee
        
        November 15, 2013
        
        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!
      2. Brad Dalton
        
        November 16, 2013
        
        Thanks Ashlee.
        
        I will be writing about how to use mobile conditional tags in the near future.
Julia

November 5, 2013

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?

Log in to Reply
1. Brad Dalton
  
  November 5, 2013
  
  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.
  
  Log in to Reply