How to make your front page look like the live demo site

If you would like to create your front page just like the live demo site for Preference, you can follow the setup with this tutorial. Please note there will be parts of this tutorial that links to others because they are related in this type of layout. I will also write this out so that it matches extactly what you see on the demo site.

You will also want to make sure you have at least these plugins installed and activated:

1. Advanced Text Widget http://wordpress.org/extend/plugins/advanced-text-widget/
2. Widgetkit Lite http://www.yootheme.com/widgetkit
3. Dynamic widgets, or at least Widget Logic.

Part 1 – Create Your Front Page (and Blog page)

1. If you are setting up a new site and yet to create a static front page, you will need to do this now. Create a new page and call it “Welcome to Preference“, not “Home“. Then add your written content and insert an image 265×180 pixels, aligned left, and then set the page template to the “Front Page Template – Right Sidebar“, followed by Publishing your new page.
   
2. Create another page and call it “Blog” but don’t set any page template because doing this doesn’t work in WordPress…it’s just how it functions.
3. Go to Settings >> Reading. Set your front page to “Welcome to Preference” and set your blog posts page to the “Blog” page, then Save Changes
   
   

Part 2 – Adding Widgets to Your Page

1. Go to Appearance >> Widgets
2. Drag a Recent Posts widget into the Page Right Sidebar location and set the number of posts to 3
3. Drag an Advanced Text widget to the Page Right Sidebar location and assign it to the “Front Page“. Title this one as “Quick Gallery“. In this widget content, you will be adding a List gallery. See this tutorial: Gallery with Spotlight and a Lightbox
   
   
4. Drag a Text Widget into the Bottom 1 position and add your content with an image 265×180 pixels. How I got the visual style and layout uses html which this example is based on the first widget you see titled as “Built on WordPress 3.5” on the demo site:

   <p><img src="http://demo.styledthemes.com/preference/wp-content/uploads/fp1.jpg" width="265" height="180" alt="gallery1tn" class="imageborder" style="display: block; margin-left: auto; margin-right: auto;" /></p><p>Yes, the Preference theme was designed and built on WordPress 3.5 to take advantage of the newest and greatest features that comes with it. Plus, you can use popular plugins as well!</p>

   

5. Creat the remaining 3 widgets for the Bottom 2, 3, and 4th positions. Make sure these are assigned to the Front page using either the Dynamic Widgets plugin or the Widget Logic plugin.

Part 3 – Adding Your Slider

1. Make sure you have the WidgetKit Lite plugin installed.
2. Follow this tutorial: Slider Like the Demo
3. Assign the widget to the Showcase Header position and only to the Front Page.

Part 4 – Adding Footer Widgets (Optional)

This is not a required part but the footer area on the demo website shows widgets in the dark blue area at the bottom of the page. How you setup these will be up to you as to what you want to display. This process will be simple because depending on what widgets you use, you just drag them into the Footer 1, 2, 3, and 4 positions. Normally these are shown globally throughout your site, so you do not need to assign them to specific pages unless you need this flexibility.