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.
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.
Lets look at the default front page template alongside the custom page template in the following image:
Here’s all the files you can simply upload to the Altitude Pro themes folder.
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
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 :
Nice one. Thanks!
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
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.
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
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.
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
hahaha. Good to hear it!
How many pages do you want to use it on?
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
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.
Hi Brad,
Are you referring to this?
http://wpsites.net/wordpress-themes/custom-page-template-like-altitude-pro-themes-front-page/
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.
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.
Use the template with custom fields if you don’t want that many widgets.
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
Send me FTP hostname, username and password please. brad@wpsites.net
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?
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 –
I sorted it out – just needed to change the class of the widget
altitude_widget_area_class( 'custom-page-1' )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/
Yes, you can create unique widget areas for each template or use custom fields. The template would need to be modified.
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.
Fixed. Should have been overwrite the lib folder not delete. Thanks Terry.