Unique After Header Images On Any Page In Altitude Pro

The code addition and modification in this tutorial enables you to show a replica of the front page 1 widget on any page or post with a unique background image in the Altitude Pro child theme by StudioPress.

You can also add unique text over each unique image otherwise default text is floated over each image.

The solution in this post extends this tutorial which adds a meta box with checkbox to enable the front page 1 widget on any page or post.

Here’s the demo video showing you exactly what you can do with this tutorial.

Demo Video

The video demonstration shows how you can add a unique image on any page type. If no custom image added, the default is pulled from the images folder.

The image is only displayed if the checkbox is checked otherwise no image is displayed even when a custom image is added.

The checkbox can be coded to display the image by default or only when checked.

Code Installation

There’s 5 steps to follow after you download the zipped folder for logged in members below.

Step 1 : From the download folder, upload the checkbox.php file to the Altitude Pro themes root directory.

Step 2 : From the download folders functions.php file, copy the single line of PHP code to the end of the Altitude Pro themes functions.php file.

Step 3 : From the download folders style.css file, copy the CSS to the end of the Altitude Pro themes style.css file.

Step 4 : From the download folder, upload the output.php file to the Altitude Pro themes lib folder replacing the default output.php file. Additional code has been added between lines 39 – 58 in this file.


Comments

15 responses to “Unique After Header Images On Any Page In Altitude Pro”

  1. Trevor Bisset Avatar
    Trevor Bisset

    Hi Brad,

    I’ve been struggling to build the custom text field functionality into my page to complete the final steps of this tutorial (went through your resources and I think I’m getting the template hierarchy or some parameters wrong).

    Do you have a step-by-step on how to get that turned on? Can’t seem to make it show up in Edit Page.

    For context, I’m on Altitude Pro (duh), successfully completed your tutorial on using the front page template on other pages, and haven’t done any other customizations. I’m attempting to add the After Header widget on a couple of childless static pages, as well as a main blog page and a main portfolio page.

    Appreciate the help – so far this has been tremendously useful.

    Thanks,
    Trevor

    1. Hello Trevor. Installation support is included in membership so i can login and get it fixed or you can send me a copy of your child theme with the code you have already installed.

      Maybe the ACF location settings don’t match your parent pages.

  2. fotod0g13 Avatar

    Hi Brad,

    Thanks for posting this. I am using the sample theme/ modified to add the altitude to it from a related tutorial posted.

    When I try to add the above to the site I am working onI am unable to get any image to appear, not even the default image 5. All I get is a blank white space.

    I read the extended tutorial at the top of this page- and added the code to lines 37-39 of the output file you reference I was able to get the image from the home page 1 area to appear on the internal page, but it is not recognizing the Unique image I am trying to add to the page with the ACF plugin.

    See issue here:
    http://namnounrugcleaningandrestoration.com/testbuild/area-rugs/

    thoughts?

    Thanks

    1. Brad Dalton Avatar
      Brad Dalton

      Please send me wp login and FTP login details.

      1. fotod0g13 Avatar

        sent as email – if you do not have it check your spam- I know you have had problems getting my emails

        1. Brad Dalton Avatar
          Brad Dalton

          Still no email. Might be best to use the contact form as a copy is kept in the WP Dashboard.

    2. Brad Dalton Avatar
      Brad Dalton

      This tutorial only works with the Altitude Pro child theme and not with Sample or any other Genesis child theme.

      Its clearly tagged Altitude Pro.

      1. fotod0g13 Avatar

        I know that this is tagged for the AP theme – but the Sample Theme I am using utilizes the AP Home page effect on it from another tutorial you have posted so I was hoping that it would be able to be adapted to the Sample theme since the AP home page addition had been done to it

        1. Brad Dalton Avatar
          Brad Dalton

          Try this version of the output.php file but keep the original as a backup just in case.

          1. fotod0g13 Avatar

            Workin on it now- looking really good- think it is going to be perfect , but need to look at it with a fresh set of eyes in the AM- to many hours staring at the screen today- that said Do you have a spot on FB for testimoninals – would love to post one for you – your support is always killer

          2. Brad Dalton Avatar
            Brad Dalton

            Did you add just the image or image and text? Which page did you add it to so i can take a look?

          3. fotod0g13 Avatar

            This worked very well:
            I have it with both the button ann text as well as without:
            http://namnounrugcleaningandrestoration.com/testbuild/area-rugs/
            and
            http://namnounrugcleaningandrestoration.com/testbuild/rug-cleaning/

            I needed to tweak the css ( minimun height ) a little bit so that there was not so much of a difference between a page with the text over the image and a button and one that was just an image file.
            but other than that it was pretty much perfect.

            thanks as always really happy with the support you provided and the solution.

          4. Brad Dalton Avatar
            Brad Dalton

            You’re welcome Scott. I

            f you can give me a link in the footer of your site i would greatly appreciate it. I need to find new members to join and don’t have time for marketing because i’m busy writing tutorials and providing coding support about 100 hrs per week. Thanks

          5. fotod0g13 Avatar

            sure will do that

          6. Brad Dalton Avatar
            Brad Dalton

            Awesome!

Leave a Reply

Join 5000+ Followers

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