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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Altitude Pro Themes Front Page As a Custom Page Template

If you like the front page of the Altitude Pro theme by StudioPress and want to use it on another page, this tutorial will show you how.

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

This tutorial shows you how to create a custom page template which you can use on any page, which displays exactly the same as the Altitude Pro themes home page.

The code adds background image functionality to the customizer enabling you to display different background images for the widget areas on all pages using the template, unlike whats displayed on the front page.

It also adds another colour option for the accent colour so you can use different colours on the template.

customize

Lets look at the default front page template alongside the custom page template in the following image:

front-page-template-copy

Here’s all the files you can simply upload to the Altitude Pro themes folder.

Register for full access

Related Templates

  • Altitude Pro Template With Featured Section Like Front Page 1
  • Custom Page Template Like Altitude Pro Themes Front Page

Altitude Pro

Reader Interactions

Comments

  1. Mike Brown says

    January 18, 2018 at 4:34 pm

    Hi Brad,

    Great tut! Just wondering if there is a way to change the duplicated front page to display “thirds” on front-page-1 instead of “halves uneven”?

    So at the moment the div class is:
    class=”flexible-widgets widget-area widget-halves uneven

    And I want to set it to:
    class=”flexible-widgets widget-area widget-thirds”

    But just can’t find where to change this in the code.

    Thanks

    Log in to Reply
    • Brad Dalton says

      January 19, 2018 at 12:56 am

      Hey Mike, There must be many ways to do this, here’s one i worked out and tested for you https://gist.github.com/braddalton/6e26f20b1e2ebcfa61b12bf4b7837464

      Here’s a example of what it produces :

      Log in to Reply
      • Mike Brown says

        January 22, 2018 at 6:22 pm

        Nice one. Thanks!

        Log in to Reply
        • Mike Brown says

          January 23, 2018 at 9:04 pm

          Just one more thing Brad,

          I have duplicated the front page template across a few pages now. everything functions as expected except the Front Page 1 widget area/image-section.

          On the duplicate pages the image loads at half height (ish) yet as soon as I change the browser window size (by dragging the bottom right hand corner of the browser window) it flicks back to behaving like the original template.

          I’m sure that I’ve muffed some code somewhere but I’m kinda new to it all and can’t find where I should be looking.

          Thanks,
          Mike

          Log in to Reply
          • Brad Dalton says

            January 23, 2018 at 9:31 pm

            Hi Mike, this is what i can offer you :

            1. I can install the code in a fresh copy of the theme

            Or

            2. Install this version of the template which uses custom fields in replace of widget areas in a fresh copy of the theme.

  2. upstore8 says

    March 20, 2016 at 3:46 am

    Hi Brad,
    I found a problem or conflict that happens with The Events Calendar.

    Problem: when I did added text to the columnpage3, the whole page is overtaken by contents of columnpage3.
    If i remove columnpage3, then the page looks ok with only columnpage1 and columnpage3.

    Finally i disabled the plugin “the Events Calendar” and things reverted back to normal.

    Can you pls help on this?

    Thanks

    Log in to Reply
    • Brad Dalton says

      March 20, 2016 at 6:50 am

      Hi

      This relates to the code in the plugin and not my code. Support relates to my code and not 3rd party plugins because i have no experience with them. These things can take hours to work out.

      Sorry i can’t help with this but if you have a question relating to my code, i’ll be happy to help.

      It sounds like it relates to the CSS classes generated by columnpage3 ( whatever that is ). You can change them in the PHP code and then in the CSS to see if that fixes it.

      Log in to Reply
      • upstore8 says

        March 21, 2016 at 12:22 am

        Hi Brad,

        Thanks, finally i found the error was due to a misplaced div tag.

        on a second question, if i want to multiply this for other pages, you mentioned that will need additional changes to the page template. can you provide the steps?

        Thanks

        Log in to Reply
        • Brad Dalton says

          March 21, 2016 at 7:08 am

          hahaha. Good to hear it!

          How many pages do you want to use it on?

          Log in to Reply
          • upstore8 says

            March 25, 2016 at 12:43 am

            I was planning to do it across four pages. is there a better way to do it? As in one template for all four at the same time maintain the independence on the background ( having different backgrounds for each page)

            Thanks

          • Brad Dalton says

            March 25, 2016 at 1:28 am

            You can use custom fields however you’ll need to wrap your content in classes. There’s another post i linked to which provides that code.

          • upstore8 says

            March 26, 2016 at 12:40 am

            Hi Brad,

            Are you referring to this?

            http://wpsites.net/wordpress-themes/custom-page-template-like-altitude-pro-themes-front-page/

          • Brad Dalton says

            March 26, 2016 at 12:55 am

            Yes however it requires more work.

            If you only want to use it on 4 pages, i would use the code with the widgets and make sure they all use unique i.d’s.

          • upstore8 says

            March 26, 2016 at 11:21 am

            Yup in that case, i will have 4×7=28 widgets for 4 pages right? it gets a bit lengthy there.
            Hoping to find a better way to do it.

          • Brad Dalton says

            March 26, 2016 at 11:24 am

            Use the template with custom fields if you don’t want that many widgets.

  3. steveokeys says

    March 10, 2016 at 10:02 am

    Hey I am sure I did something wrong. But I am getting the following error on the custom page after following the installation steps above:

    Fatal error: Call to undefined function altitude_widget_area_class() in …../atmosphere-pro/page_custom.php on line 78

    Log in to Reply
    • Brad Dalton says

      March 10, 2016 at 3:19 pm

      Send me FTP hostname, username and password please. brad@wpsites.net

      Log in to Reply
  4. dustinwstout says

    August 28, 2015 at 3:36 pm

    I’ve been looking everywhere for this Brad! Great work! Is there an efficient way of accomplishing this for multiple pages? For example, what if I wanted to make this type of landing page for each one of my products (lets say I have 5 of them)… that would be a lot of widget areas clogging up the Widgets page & customizer settings. Any ideas?

    Log in to Reply
  5. stevenawood says

    July 16, 2015 at 12:23 pm

    Hi Brad – I’m running into an issue where the flexible widgets function will only mimic the widget layout from each section on the front-page. So even if the custom-page widget layout in each section is different – the CSS responds to what was set on the home page.

    I noticed that the code supplied has the classes set to front-page for the custom-page – so not sure if this is because of the front-page already having been loaded or….

    Wondering if you could let me know what I need to add/change to have this recognize the flexible widget functions for the custom-page?

    Thanks –

    Log in to Reply
    • stevenawood says

      July 16, 2015 at 1:59 pm

      I sorted it out – just needed to change the class of the widget

      altitude_widget_area_class( 'custom-page-1' )

      Log in to Reply
  6. 2alegacy says

    June 15, 2015 at 3:27 am

    Hey Brad I have another question related to Altitude Pro and the page template. Is there a way to have different images on different pages once you start using this template. See this example. They used the home page and about page the same. The other pages on the site uses an image at the top and standard blog page body. http://www.wealthwithrachel.com/

    Log in to Reply
    • Brad Dalton says

      June 15, 2015 at 6:11 am

      Yes, you can create unique widget areas for each template or use custom fields. The template would need to be modified.

      Log in to Reply
  7. 2alegacy says

    June 8, 2015 at 7:34 pm

    The lib folder I copied did not contain the theme-defaults.php so I started getting errors. Copied the original file back into the lib folder and it works great. Thanks.

    Log in to Reply
    • Brad Dalton says

      June 9, 2015 at 6:11 am

      Fixed. Should have been overwrite the lib folder not delete. Thanks Terry.

      Log in to Reply

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 & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.