WP SITES

2778

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

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

  2. 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!

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

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

      • 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

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

          • 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

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

          • 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

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

          • 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. 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?

Leave a Reply