By Neil on May 12, 2014
Ambiance Pro is a beautiful WordPress child theme by StudioPress, and is part of the Genesis range of premium WordPress themes (working on top of the Genesis Framework). The theme is part of the Pro series which means it is coded to the latest HTML5 web standards and is fully mobile responsive. The video below walks through how to set the Ambiance Pro theme up so it is exactly the same as the theme demo on the StudioPress website. There is also a step-by-step tutorial below.
Step-by-step tutorial to set up the Ambiance Pro Genesis WordPress theme
Step 1: Install the Genesis Framework and the Ambiance Pro child theme. You should download the Genesis Framework and the Ambiance Pro child theme from the StudioPress website and upload them via the WordPress dashboard under the Appearance/Themes tab. You need the Genesis Framework installed in order to use the Genesis child themes.
Step 2: Import the Ambiance Pro demo content. The easiest way set your theme up so it looks the same as the Ambiance Pro demo website is to import all of the posts/pages etc. via the .XML file that comes with the downloaded theme files. Locate your Ambiance Pro .ZIP theme file and extract all of the files. Browse through the extracted files and you will see a file called xml, and in here there is an ambiance-pro.xml file.
In your WordPress dashboard hover your mouse cursor over the Tools tab and click on Import. In the window that opens you will see a list of Import options, click on WordPress (which at the time of writing is at the bottom of the list). You will be prompted to install the WordPress Installer if you do not already have it, and once installed click on Active Plugin & Run Importer when prompted. You will then be asked to browse your computer for the .XML file for the Ambiance Pro theme, so go ahead and do this and then import it. Another window opens where you specify post authors etc. Just leave all as default but make sure you check the Download and import file attachments check box. Click Submit.
Step 3: Configure the widgets. There is not too much to do here, and in fact the Ambiance Pro theme only comes with two widget areas, a Welcome Message area and an After Entry area. In your WordPress dashboard go Appearance/Widgets and remove (drag the widgets out) and widgets that are currently in the Welcome Message widget area.
Next drag a Text widget into the Welcome Message widget area and give it a title of ‘Welcome to my Website’. In the main body area of the Text widget place the text ‘This is a special widget area which can be shown at the top of the homepage. Use this as a place to welcome your visitors and make them happy.’ (Of course you can put whatever text you want in here). Click Save. See Figure 1.
Figure 1 Configuring a text widget in the Ambiance Pro theme.
Step 4: Configure theme settings. Under Genesis/Theme Settings in your WordPress dashboard scroll down and tick the ckeck box next to Include the feature image? and in the dropdown list select entry-image (800 x 450). Save settings. Next got to Settings/Reading in your dashboard and change the Blog pages show at most to 6.
Finally, in your dashboard click on Posts to show the list of posts on your website. Find the Hello world! post and delete it if you have not already done this previously. Fresh WordPress installs always include a Hello world! post by default.
If you view your website it should be laid out similar to the Ambiance Pro demo site. Note, if you see grey boxes instead of nice images we address this in the next Step 5.
Step 5: Upload feature images. This step can be skipped if all the images were imported correctly during Step 2. However, in my case the images did not import correctly so I needed to copy the images from the Ambiance Pro demo site and re-assign them to the individual posts. Click here to visit the demo website and right click on each of the individual images and select Save image as from the options. Save all images to your computer.
On your website click on the first grey box to open up the post. Then click the edit post link at the top of the post. Find the Featured Image upload area on the right hand column of your edit screen and click on remove featured image. Next click Set Featured Image and browse your computer to upload the correct image that you just copied from the demo site for this post. Update the post and then visit the homepage of your website. You should now see a nice image for post #1.
Repeat this step of all posts.
Step 6: Set up the navigation menu. The Ambiance Pro theme has a small primary navigation link button in the top right corner which once clicked expands to show all menu links. At the bottom of the website there are links to social media sites such as Google+, Facebook etc. These social links are a secondary navigation menu.
The menu is set up in the dashboard under Appearances/Menus. There should already be a Primary Menu and a Secondary Menu set up. Click the Manage Locations tab at the top of the page and then in the dropdown list next to Primary Navigation Menu select Primary Menu. Also, while here select Secondary Menu next to the Secondary Navigation Menu title. Click Save Changes and now your primary navigation and secondary navigation are set up.
This concludes the set up of the Ambiance Pro Genesis child theme. It is a pretty easy theme to style but the layout of the homepage and the individual posts are very elegant and would be a beautiful website for anyone who wants a great visual design to show off their images, photos etc. Click here to see the demo layout of the Genesis Ambiance Pro theme.
This short video and step-by-step tutorial walks you though the set up of the Ambiance Pro child theme by StudioPress so that is resembles the demo version of the website. If you set up your site like this you will have a good starting point to customise your site further and have a unique, mobile responsive HTML5 website that will look great on both desktops and mobile devices.