• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

After Header Image Beautiful Pro Theme

Reader Interactions

Comments

  1. Amanda Taylor says

    January 29, 2014 at 11:50 pm

    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
    • Brad Dalton says

      January 30, 2014 at 6:35 am

      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
    • Brad Dalton says

      May 13, 2014 at 1:07 am

      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
  2. Andy says

    January 9, 2014 at 2:58 pm

    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 );
    Log in to Reply
    • Brad Dalton says

      January 9, 2014 at 6:46 pm

      Thanks for the solution Andy.

      Log in to Reply
  3. Ashlee says

    November 14, 2013 at 12:31 am

    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
    • Brad Dalton says

      November 14, 2013 at 10:18 am

      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
      • Ashlee says

        November 14, 2013 at 5:12 pm

        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
        • Brad Dalton says

          November 15, 2013 at 12:48 am

          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
          • Ashlee says

            November 15, 2013 at 4:09 pm

            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!

          • Brad Dalton says

            November 16, 2013 at 12:11 pm

            Thanks Ashlee.

            I will be writing about how to use mobile conditional tags in the near future.

  4. Julia says

    November 5, 2013 at 4:36 am

    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
    • Brad Dalton says

      November 5, 2013 at 4:44 am

      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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.