• 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

Unique After Header Images On All Pages In Atmosphere Pro

This tutorial provides the code which enables you to add a unique image after the header on all page types using the Atmosphere Pro child theme by StudioPress.

You can also display unique content over the image on all page types otherwise default text will be shown.

The code in this tutorial has been written based on this question from a member :

Hi Brad, I am using the Atmosphere Pro theme and would like to have a different image appear in the After Header area that is different than the one on the Home page. I would think that this is possible, but could not find a tutorial that seems to be correct. Is it possible to do this with the Atmosphere Pro theme.

You can change the image via the customizer and change the backup image in the Atmosphere Pro themes image folder otherwise, you can use code to add unique images after the header on all page types as seen in the following demo video.

Demo Video

The video shows how you can add unique images after the header on any page type otherwise a default image is displayed with default text. You can change the default text on line 61 of the after_header.php file.

The default image is pulled from the Atmosphere Pro themes images folder and uses the same default as the front page which is added via the customizer.

You can change the default image on line 34 of the after-header.php file.

Code Installation

There’s 3 steps after downloading the after-header folder:

Step 1 : Upload the unzipped after-header folder to the Atmosphere Pro themes root directory.

Step 2 : Add the following line of PHP code to the end of the Atmosphere Pro themes functions.php file.

include_once( get_stylesheet_directory() . '/after-header/after-header.php' );

Register for full access

Related Tutorials

  • Using jQuery To Change Height At Any Screen Width

After Header Image Atmosphere Pro Theme

Reader Interactions

Comments

  1. Brian Thomas says

    March 23, 2018 at 12:08 am

    Hello:

    This tutorial worked on the desktop version of the website, but on mobile (sub pages) my height of 350px is being activated which is too large. Any suggestions for a fix.

    http://integritycontractingva.com/temporary/services/

    Log in to Reply
    • Brian Thomas says

      March 26, 2018 at 8:08 am

      Hello. Any suggestions for this issue?

      Log in to Reply
      • Brad Dalton says

        March 26, 2018 at 11:30 pm

        You could also use jQuery. Full tutorial

        jQuery(function( $ ){
        
        $( window ).resize(function(){
        		
        	if ($(window).width() < 960) {
        	
        	$( '.after-header' ) .css({'height' : '400px'});
        	
        	}
        	
        });	
        
        });
        Log in to Reply
  2. Sharon Marks says

    October 3, 2017 at 1:47 pm

    I was able to set it up so that the image from the main page shows up on all of the pages and posts but how do I select the image that will appear there and how do I change the content that is displayed on top of it?

    Log in to Reply
    • Sharon Marks says

      October 3, 2017 at 2:08 pm

      OK. I found out how to get the new image to show up but how do I change the content on it?

      Log in to Reply
      • Brad Dalton says

        October 3, 2017 at 6:04 pm

        Add a new custom field named text_over_image and add your unique content to the value field.

        Log in to Reply
  3. fotod0g13 says

    July 19, 2017 at 2:23 pm

    I think the problem I am having with using this on the altitude- pro theme might be line line 34 in the after-header php fie:
    $default = get_option( ‘altitude-front-image’, sprintf( ‘%s/images/bg-1.jpg’, get_stylesheet_directory_uri() ) );

    where the get option is referenced but not sure, and no idea what it should be instead of this if it is the problem
    thoughts?

    Log in to Reply
    • Brad Dalton says

      July 19, 2017 at 6:01 pm

      This tutorial isn’t coded to work with Altitude Pro.

      Log in to Reply
      • fotod0g13 says

        July 20, 2017 at 4:20 am

        Is there a way to make the altitude pro have different after_header images on all pages different than the home page.

        On the existing tutorial above- I changed any references I found to the Atmosphere Pro theme in the after-header php file to reference the Altitude Pro theme.

        Log in to Reply
        • Brad Dalton says

          July 20, 2017 at 4:33 am

          Yes, i’ll write a new theme specific tutorial for this over the weekend.

          Log in to Reply
  4. fotod0g13 says

    July 19, 2017 at 11:42 am

    get what you are saying about finding another theme for the full width. In doing that would I be able to use the tutorial poster here for the After_Header to have a different header image on other pages- or would that need to be changed somehow to work on the interior pages of a full width site – thinking of the altitude theme

    Log in to Reply
    • Brad Dalton says

      July 19, 2017 at 6:00 pm

      You could use another tutorial depending on which theme you choose.

      Log in to Reply
  5. fotod0g13 says

    July 19, 2017 at 7:15 am

    Thanks for posting this Brad.
    I got it working somewhat but having a couple of issues.
    related that I am trying to do here:

    1: on all pages including the home page is there a way to make the header image display as the full width of the screen- like the images do on the ” Altitude Pro Theme”

    2: Is there a way to set the height of the interior pages- everything except the home page so that the after image photo is not as tall ( height ) as the home page image:

    It would seem that this should b possible with css but I am not having much luck figuring it out.

    currently when I try to add an image to the After Header area in the custom field the image gets cropped and does not display correctly.

    Here is the URL of a page where I have the custom filed enabled:
    http://www.beaphotoninja.com/atlantic/sample-page/

    * To clarify in the tutorial you mention above the ACF plugin used = https://www.advancedcustomfields.com/ -by Elliot Condon

    Best
    Scott

    Log in to Reply
    • Brad Dalton says

      July 19, 2017 at 7:33 am

      1. This would require major modification of the theme as its coded not to display full width. I would use another theme if you want full width.

      2. Yes, you can change the height on line 9 of after-header-size.js like this:

      var windowHeight = $( window ).height() - 300;

      Note : It’s best to crop images before uploading.

      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.