Always backup your website before making any changes! Then if anything goes wrong, you can restore your site to it’s previous condition.
Automatic setup for the Altitude Pro front page
Using this plugin and the code I’ve provided you can set up the front page of the StudioPress Altitude Pro theme in just a few minutes.
The plugin uses the code snippet (see below) to automatically put text widgets in to the correct widget areas on the front page. This code snippet only works with the Altitude Pro theme.
What you need to do…
- Install the Widget Importer & Exporter plugin
- Use (import) the code snippet I’ve provided.
For new sites only!
The .wie Widget Importer & Exporter plugin code is designed for use on new sites. It is not designed to be used on established sites.
If you already have widgets setup in the front page widget areas of Altitude Pro, the plugin and code will add the text widgets again. Probably in the unused widget area at the bottom of the widgets panel. This video and tutorial is designed to help you set up NEW sites using the Altitude Pro theme.
You need the plugin and the code
This is the plugin you need: Widget Importer & Exporter Please note! This plugin is NOT the WordPress Importer plugin. That’s a different plugin.
This is the zip file you need: Download the Zip file HERE
If you don’t want to download a zip file you can copy the code below into a plain text editor such as Notepad, then save it with a .wie extension.
Before you start, use this check list…
- Is the Genesis Framework installed?
- Is the Altitude Pro theme installed?
- Is the Widget Importer & Exporter plugin installed and activated?
- Have you copied the code needed and saved it on your desktop with a .wie file extension?
If you answered yes to all of the above questions, we’re ready to begin importing the Front Page widget area code…
Import the code snippet into the plugin
- Make sure you have a copy of the code with a .wie extension, on your desktop. So it’s easy to find.
- In WordPress go to Dashboard > Tools > Widget Importer & Exporter.
- Click the Choose File button and find the .wie file on your desktop.
- Click the big blue Import Widgets button.
View your site’s front page. It should be set up very similar to the StudioPress demo site.
If you don’t see the stripy front page go to…
- WordPress: Dashboard > Settings > Reading.
And choose: Front page displays > Your latest posts.
Now the front page widget areas are set up but they’re using the demo content you need to change this to use your own words and your own links.
Things to change- Editing the demo content
- The jump links in Front Page 1: widget area should work. But you might want to edit the link text.
- You might want to add an image in the Front Page 2: widget area, like the StudioPress demo.
- The Pricing table buttons in Front Page 4: widget area will need editing to link to one of your own pages.
- The Front Page 7: widget area button text and link need changing. It currently says “Sign up – more info”.
How to find the text you need to change. Each section begins with Front Page 1:, Front Page 2: etc. So…
- View the front page of your website.
- Look at each section and read the text.
- Open each text widget and type the text you want to use, replacing the demo text.
As you replace the demo text, take great care not to remove any of the HTML code. The HTML is surrounded by angle brackets.
Changing the link code: Dashboard > Appearance > Widgets
- Visit the pages you want to link to when people click the buttons on your home page.
- Then copy these URLs.
- Paste these URLs into the button code in the text widgets.
Use a plain text editor such as Notepad when editing any HTML or computer code. You can NOT use a word Processor to do this.
When you have the text and the URLs needed, you can edit the Front Page Text Widgets to replace the demo content with your own content.
Using an image in Front Page 2: widget area
If you want to use an image in the Front Page 2: widget area, like the StudioPress demo, you’ll need to upload the image into WordPress and then find the code needed to make the image display on a web page inside your site.
- Make a new page and save it as a draft, don’t publish it.
- Use the Add Media button to place your image inside this draft page. The demo site uses a 2280 x 800 pixel image. This is very large, you could use an image of 1024 x 359 pixels to reduce the file size. However with such big background images already being used on the front page, you might not think reducing the size of one image is important. It’s up to you.
- When you copy and paste the image code into the Front Page 2: text widget. Take care not to delete any of the HTML code.
You should now have – Front Page 1: to Front Page 7: – widget areas set up. But that’s NOT all!
This tutorial is only about setting up the – Front Page 1: to Front Page 7: – widget areas in Altitude Pro theme by StudioPress.
The navigation bars, sidebar and footer widget areas still need to be set up. But this should give you a good start.