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

WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Custom Page Template Like Altitude Pro Themes Front Page

This template looks the same as the Altitude Pro themes front page template.

Update : Here’s a newer version of this template you might wan† to try instead.

The only difference is, it uses custom fields instead of widget areas to display your content for each section.

Using custom fields in replace of widgets, enables you to use the template on unlimited pages.

template

If you only want to use the Altitude Pro themes front page on a small amount of pages, you’ll find this template handy which uses widget areas.

Video Demo

Here’s a video showing you how it works and how to setup the custom fields.

Once you have created the custom fields, you can then select them from the drop down menu in the Custom Fields meta box on any Page Edit screen and add unique content to the value field. No need to create them again.

Template Code

Here’s the PHP code for the page_custom.php file you simply upload to your child themes root directory.

Register for full access

Related Templates

  • New Version – Altitude Pro Front Page Template On Other Pages
  • Altitude Pro Template With Featured Section Like Front Page 1

Altitude Pro

Reader Interactions

Comments

  1. frozenwaste says

    March 17, 2017 at 4:14 am

    Hi Brad,

    I’m using this with great success, thanks.

    I’m also using the Advanced Custom Fields PRO plugin.

    However, the one issue I’m having (bear with me as I’m not a developer), is that I need to create around 400 pages in total, which is time consuming as I have to add the background images CSS to the main CSS file every time, which is bloating this file.

    Is there anyway I can have the option to have the CSS on the page itself, as a custom field maybe? Where I can just place the post ID and image URL?

    Thanks,
    Peter.

    Log in to Reply
    • Brad Dalton says

      March 17, 2017 at 5:37 am

      Hi Peter

      It’s a different image and CSS for each page right?

      Log in to Reply
      • frozenwaste says

        March 17, 2017 at 5:39 am

        Hi Brad,

        Across the 400 pages, it’s around 30 different images.

        Thanks

        Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 8:41 am

          Yes, i can work out a solution. Need to think a bit.

          Log in to Reply
          • frozenwaste says

            March 17, 2017 at 8:44 am

            Ah thank you 🙂

    • Brad Dalton says

      March 17, 2017 at 9:33 am

      You can add inline CSS using a custom field.

      or

      Depending on how many different styles and images you want to use, you could use post formats which adds a checkbox so you simply check the box. Here’s an example which changes the featured image however you could use it to add a custom body class and/or background image.

      Log in to Reply
      • frozenwaste says

        March 17, 2017 at 9:58 am

        Thanks Brad, will give them a go!

        Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 10:12 am

          If you get stuck, lets chat on FB messenger tomorrow.

          Log in to Reply
  2. erickjam says

    March 10, 2017 at 12:42 pm

    Brad,

    How would we pull in the CSS to add the full height images back in? I see it is set by home.js but for the life of me cannot get it to work on the custom-page.

    Thanks for all you do!

    Log in to Reply
    • Brad Dalton says

      March 10, 2017 at 9:25 pm

      How many times do you want to use the template? Also, inspect the page template and see if the home.js is loading because each section in the template includes the image-section class so it should work as long as the js loads.

      If only once, use this template instead.

      Also, i don’t know how much work you’ve already done with your theme, but you might consider this solution using Infinity Pro on unlimited pages better. If only needing 1 page, use this.

      Log in to Reply
      • erickjam says

        March 17, 2017 at 11:18 am

        I am planning on using this template multiple times (4-5) in the site.

        The site is stridebox.com the page I am trying to use the custom template on is stridebox.com/fit

        When I use site inspector, I can see the “height” css under the image-section class on the home page, but on the custom-page, I cannot.

        Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 11:27 am

          Thats the problem then. Just need to work out how to fix it. So the image-section class is not in the custom template?

          Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 11:34 am

          I’m going to recode this template again over the weekend so should be fixed by Monday. Looks like you have pin pointed the problem though.

          I quick fix would be to wrap the cf1 content in the image section class

          Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 12:09 pm

          Do you need to use different background images?

          Log in to Reply
        • Brad Dalton says

          March 17, 2017 at 12:23 pm

          Here’s the new version

          Log in to Reply
  3. kiudex says

    September 25, 2016 at 12:35 am

    I want to use this technique for my contact page. So far the solution works but I cannot use shortcodes (disabled by default with custom fields) to display my contact form. What do I have to do to make that work? Thank you for your assistance.

    Log in to Reply
    • Brad Dalton says

      September 25, 2016 at 12:46 am

      Where do you want to add your contact form?

      If you only want to use the template on 1 page, i would use the other template which uses widgets.

      Log in to Reply
      • kiudex says

        September 25, 2016 at 12:49 am

        Actually I want to be able to use more than just one shortcode.
        Field 2: Gravity Forms shortcode
        Field 3: Shortcode Ultimate shortcode
        Field 4: Google Maps shortcode

        Log in to Reply
        • Brad Dalton says

          September 25, 2016 at 12:52 am

          How many pages do you want to use the template on?

          Log in to Reply
          • kiudex says

            September 25, 2016 at 1:42 am

            If I’m happy with the result maybe on up to 5 more pages (top level nav pages)

          • Brad Dalton says

            September 25, 2016 at 1:54 am

            In that case use the template which includes custom fields otherwise you’re going to have a lot of widgets. This template doesn’t includes do_shortcode so you will need to add it to each section as its only included in one as an example.

  4. zerway says

    October 27, 2015 at 1:34 pm

    Hello,

    I have your code installed, and it’s working as advertised. (Thanks!) But how can I mimic the multiple ‘text’ widget areas in section 3 and section 4 on the original front page?

    Using your solution I only have one section to enter text. How can I re-create section 4 where there are 4 areas for text in the Altitude theme?

    Thanks!

    Ryan

    Log in to Reply
    • Brad Dalton says

      October 27, 2015 at 9:41 pm

      Hey Ryan

      Simply add the HTML to 1 custom field using the setup guide http://my.studiopress.com/setup/altitude-pro-theme/front-page-setup/front-page-4-widget-area/

      You can use the HTML from the setup guide and wrap each in the same class the text widget uses to get exactly the same HTML output.

      Here’s an example of the HTML for the Parallax Pro theme which uses the same HTML for the headline and 3 pricing tables.

      Log in to Reply
      • zerway says

        October 28, 2015 at 12:54 pm

        Brad,

        Thanks for the quick response. This got me going….until I added content to section 7…and then everything broke.

        First, I am simply trying to mimic the home page at the following additional page:

        http://www.ers24-7.com/water-damage/

        I had custom fields 1-6 added, and it was working perfectly (i.e. I was able to mimic the home page). And then I added custom field 7 (field_7_image), and it broke the page. It froze the background image for section 7 all the way to the top of the page, and made all text and images of sections 1 through 6 disappear. If you scroll to bottom of the page you can see the correct text that goes into custom field 7 is showing up.

        Can you tell me how adding “field_7_image” overwrote the rest of the page at: http://www.ers24-7.com/water-damage/

        Thanks for any help!

        Ryan

        Log in to Reply
        • Brad Dalton says

          October 28, 2015 at 7:51 pm

          I would need to see the entire code in the theme to troubleshoot however based on my testing of this template several times for members, it works, as shown.

          Generally, the cause will be something very minor which has been missed in the installation or setup of the template, not the code.

          Log in to Reply
          • zerway says

            October 29, 2015 at 7:56 am

            Brad,

            You’re exactly right. I left an extra when I was making a tweak to your code. It works now. Sorry for the trouble.

            Hopefully, here’s my final question:

            The “smooth scroll” doesn’t work when you click an anchor link (e.g. links in menu). Do you know how I can get the smooth scroll feature on my custom page, so it’ll work like the home page when you click a menu link?

            My Custom Page:
            http://www.ers24-7.com/water-damage/

            Thanks!
            Ryan

          • Brad Dalton says

            October 29, 2015 at 8:28 am

            I removed the id classes which enable you to do that because they won’t work if they’re the same on mutiple pages, however you could add them back.
            Example:

            echo '<div id="front-page-1" class="front-page-1">

            Simply add

            id="front-page-1"

            to the existing classes in the templates PHP.

            They will need to be unique so somtheing like

            custom-page-1

            for the first section. Rinse and repeat.

          • zerway says

            November 6, 2015 at 8:26 am

            Brad,

            I (think) I made the changes as you suggested. And it still does not do a smooth scroll when I click an anchor link within the custom page.

            This is my custom page:
            http://www.ers24-7.com/water-damage/

            If I’m understanding your above instructions correctly, then I need to add custom-page-1, custom-page-2, etc to your page_custom.php page as follows:

            $one = get_post_meta( get_the_ID(), 'field_1_image', true );
                if( ! empty( $one ) ) {
                echo ''. $one .'';
                }

            The above did not create a smooth scroll, and it didn’t allow for the menu anchor links to keep working.

            I also tried the code below (which is the current version live on the site). It allows the menu links to work, but it does not activate the “smooth scroll”:

            $one = get_post_meta( get_the_ID(), 'field_1_image', true );
                if( ! empty( $one ) ) {
                echo ''. $one .'';
                }

            I don’t have a lot of experience with PHP code. If you don’t mind, please explain again on exactly how I can activate the “smooth scroll” option on my custom page. Again, my current custom page (http://www.ers24-7.com/water-damage/).

            Currently, the Menu Anchor Links work, but when you click they jump to the section instantly, instead of doing a slow, smooth scroll like on the home page.

            Please advise.

            I’m sorry I’m a novice on this.

            Thanks for the help,

            Ryan

          • Brad Dalton says

            November 6, 2015 at 9:06 am

            You can wrap the code in opening and closing code shortcodes.

            Please send me FTP access and i’ll take a look at your code.

            Using Chrome Inspector, i see a js error when inspecting the elements on the custom page template.

          • zerway says

            November 6, 2015 at 8:34 am

            Follow up to my previous comment:

            My comment above broke when I posted the code with greater than/less than symbols.. I’m not sure how to post those symbols in a comment box. Here’s what should have shown in the above comment box with the greater than/les than symbols all changed to parenthesis:

            Code #1:

            $one = get_post_meta( get_the_ID(), 'field_1_image', true );
                if( ! empty( $one ) ) {
                echo '(div id="custom-page-1" class="front-page-1")(div class="image-section")(div class="wrap")(div class="flexible-widgets")'. $one .

            Code #2:

            $one = get_post_meta( get_the_ID(), 'field_1_image', true );
                if( ! empty( $one ) ) {
                echo '(div id="front-page-1" class="front-page-1")(div class="image-section")(div class="wrap")(div class="flexible-widgets")'. $one .
  5. dustinwstout says

    August 28, 2015 at 4:05 pm

    Ah-hah! Maybe this is what I was looking for. I notice though that the image sections don’t have the same full-screen effect that the standard home page has. How can we recreate that?

    Log in to Reply
    • Brad Dalton says

      August 29, 2015 at 12:39 am

      Hi

      Yes they are full width background images. What theme are you using?

      Log in to Reply
      • dustinwstout says

        August 29, 2015 at 12:17 pm

        Yes, they’re full width but they don’t fill the entire viewport vertically like the main Altitude home page sections (1, 3, 5, 7). I’m using Altitude (http://dustn.tv, http://warfareplugins.com).

        Log in to Reply
        • Brad Dalton says

          August 29, 2015 at 6:57 pm

          The height depends on how much content you add to each section.

          Log in to Reply
          • dustinwstout says

            August 30, 2015 at 5:18 pm

            Yes, in your version they do, but not in the actual home page. Studiopress designed those image sections to cover the entire screen area (width and height). I’ve set up http://dustn.me so you can see for yourself.

          • Brad Dalton says

            August 30, 2015 at 9:10 pm

            Yes you can add the CSS which does that but i found it adds a huge amount of padding so i removed it.

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.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce
 

Loading Comments...
 

You must be logged in to post a comment.