WP SITES

Log in

Unique After Header Images On All Pages In Atmosphere Pro

—

by

Brad Dalton

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

Comments

14 responses to “Unique After Header Images On All Pages In Atmosphere Pro”

  1. Brian Thomas Avatar
    Brian Thomas

    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/

    1. Brian Thomas Avatar
      Brian Thomas

      Hello. Any suggestions for this issue?

      1. Brad Dalton Avatar
        Brad Dalton

        You could also use jQuery. Full tutorial

        jQuery(function( $ ){

$( window ).resize(function(){
		
	if ($(window).width() < 960) {
	
	$( '.after-header' ) .css({'height' : '400px'});
	
	}
	
});	

});
  2. Sharon Marks Avatar
    Sharon Marks

    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?

    1. Sharon Marks Avatar
      Sharon Marks

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

      1. Brad Dalton Avatar
        Brad Dalton

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

  3. fotod0g13 Avatar
    fotod0g13

    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?

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. fotod0g13 Avatar
        fotod0g13

        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.

        1. Brad Dalton Avatar
          Brad Dalton

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

  4. fotod0g13 Avatar
    fotod0g13

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

  5. fotod0g13 Avatar
    fotod0g13

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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:

      [code]var windowHeight = $( window ).height() – 300;[/code]

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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They're Published.