WP SITES

Log in

Altitude Pro Themes Front Page As a Custom Page Template

—

by

Brad Dalton

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

Comments

26 responses to “Altitude Pro Themes Front Page As a Custom Page Template”

  1. Altitude Pro Change Front Page 1 Widget To Display 3 Widgets Inline | World of WordPress

    […] You can also use this solution to modify section 1 if using the Altitude Pro themes front page as a custom page template. […]

  2. Mike Brown Avatar
    Mike Brown

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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 :

      1. Mike Brown Avatar
        Mike Brown

        Nice one. Thanks!

        1. Mike Brown Avatar
          Mike Brown

          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

          1. Brad Dalton Avatar
            Brad Dalton

            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.

  3. upstore8 Avatar
    upstore8

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. upstore8 Avatar
        upstore8

        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

        1. Brad Dalton Avatar
          Brad Dalton

          hahaha. Good to hear it!

          How many pages do you want to use it on?

          1. upstore8 Avatar
            upstore8

            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

          2. Brad Dalton Avatar
            Brad Dalton

            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.

          3. upstore8 Avatar
            upstore8

            Hi Brad,

            Are you referring to this?

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

          4. Brad Dalton Avatar
            Brad Dalton

            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.

          5. upstore8 Avatar
            upstore8

            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.

          6. Brad Dalton Avatar
            Brad Dalton

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

  4. steveokeys Avatar
    steveokeys

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

  5. dustinwstout Avatar
    dustinwstout

    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?

  6. Custom Page Template Like Altitude Pro Themes Front Page

    […] 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 […]

  7. stevenawood Avatar
    stevenawood

    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 –

    1. stevenawood Avatar
      stevenawood

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

      altitude_widget_area_class( 'custom-page-1' )

  8. 2alegacy Avatar
    2alegacy

    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/

    1. Brad Dalton Avatar
      Brad Dalton

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

  9. 2alegacy Avatar
    2alegacy

    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.

    1. Brad Dalton Avatar
      Brad Dalton

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

Leave a Reply

Join 5000+ Followers

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