WP SITES

Log in

Custom Page Template Like Altitude Pro Themes Front Page

—

by

Brad Dalton

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

Comments

37 responses to “Custom Page Template Like Altitude Pro Themes Front Page”

  1. frozenwaste Avatar
    frozenwaste

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Peter

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

      1. frozenwaste Avatar
        frozenwaste

        Hi Brad,

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

        Thanks

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. frozenwaste Avatar
            frozenwaste

            Ah thank you 🙂

    2. Brad Dalton Avatar
      Brad Dalton

      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.

      1. frozenwaste Avatar
        frozenwaste

        Thanks Brad, will give them a go!

        1. Brad Dalton Avatar
          Brad Dalton

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

  2. erickjam Avatar
    erickjam

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. erickjam Avatar
        erickjam

        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.

        1. Brad Dalton Avatar
          Brad Dalton

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

        2. Brad Dalton Avatar
          Brad Dalton

          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

        3. Brad Dalton Avatar
          Brad Dalton

          Do you need to use different background images?

        4. Brad Dalton Avatar
          Brad Dalton

          Here’s the new version

  3. kiudex Avatar
    kiudex

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. kiudex Avatar
        kiudex

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. kiudex Avatar
            kiudex

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

          2. Brad Dalton Avatar
            Brad Dalton

            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 Avatar
    zerway

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. zerway Avatar
        zerway

        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

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. zerway Avatar
            zerway

            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

          2. Brad Dalton Avatar
            Brad Dalton

            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:
            [code]echo ‘

            [/code]

            Simply add [code]id=”front-page-1″[/code] to the existing classes in the templates PHP.

            They will need to be unique so somtheing like [code]custom-page-1[/code] for the first section. Rinse and repeat.

          3. zerway Avatar
            zerway

            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:
            [code]
            $one = get_post_meta( get_the_ID(), ‘field_1_image’, true );
            if( ! empty( $one ) ) {
            echo ”. $one .”;
            }
            [/code]
            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”:
            [code]
            $one = get_post_meta( get_the_ID(), ‘field_1_image’, true );
            if( ! empty( $one ) ) {
            echo ”. $one .”;
            }
            [/code]
            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

          4. Brad Dalton Avatar
            Brad Dalton

            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.

          5. zerway Avatar
            zerway

            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:
            [code]
            $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]
            Code #2:
            [code]
            $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 .
            [/code]

  5. dustinwstout Avatar
    dustinwstout

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Hi

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

      1. dustinwstout Avatar
        dustinwstout

        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).

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. dustinwstout Avatar
            dustinwstout

            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.

          2. Brad Dalton Avatar
            Brad Dalton

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

  6. Using The Altitude Pro Themes Front Page As a Custom Page Template

    […] Custom Page Template Like Altitude Pro Themes Front Page […]

Leave a Reply

Join 5000+ Followers

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