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

To get your own home page (front page) to look like the live demo site, this tutorial will help you through the process. There are parts that relate to other tutorials, so I will provide links to them, rather than re-type them out here (also because they will have videos). Please note that you can create any kind of front page you want, but this tutorial will show you how I did the demo site one.

Step 1 – Plugins I Used

1. Widgetkit Lite – For the front page slideshow
2. Hide Title – Let’s you hide the page title
3. Remove Widget Title – Allows you to hide the widget title from the front-end
4. Display Widgets – Lets you publish widgets on select pages

Step 2 – Create a Home Page

1. Go to Pages >> Add New
2. Name this “Home” and select the page template “Page Full Width”
3. In the right column, check the box for “Hide Title”. This will hide the page title “Home” from the front-end.
4. Scroll further down the page and uncheck the box next to “Allow Comments”. If this doesn’t show, go to the top of the screen and click on the upside down tab “Screen Options” and then check the box next to Discussion.
5. In the original download of your theme, go into the HTML Snippets folder and open the text file “front-page-demo”, then copy the code. Paste this code in the “Text” view of your editor. I recommend you change and edit the sample content while in the code view if you can because doing it from the “Visual” view is a bit tricky. If you delete the content then type in new content, you might delete the <div> containers this code has. **If you don’t have this text file, contact me.
6. For any images, upload new images 250×140 pixels (can be any height you want) and copy their File URL and replace the sample ones in the code snippet.
7. Publish or Save the page
8. Make sure your WordPress settings >> Reading >> has the Front page selected to use the “Home” page you created and the blog one (if you have a blog) set as your posts.

Step 3 – Add a Call to Action with Button

1. Go to Appearance >> Widgets >> and drag a text widget into the Call to Action widget position
2. Go to your theme download package into the HTML Snippets folder and open the text file “call-to-action” and paste the code into the text widget.
3. Title your widget, which becomes the first line of your call to action
4. With the Display Widgets plugin, this will add a setting to the bottom of the widget which you can “Show” on the pages you choose; in this case, the front page.
5. Save the widget.

Step 4 – Add a Logo Bar

1. Go to your media library and upload each logo image. Your logo image widths will depend on the logo size, but try to make the height the same for each. The demo height logos are 60px. Make sure after you upload each logo image, you click “Edit” to get the File URL and copy it to a safe place for each one because we need this shortly.
2. Go to Appearance >> Widgets >> and drag a text widget into the Inset Bottom widget position.
3. Go to your theme download package into the HTML Snippets folder and open the text file “logo-bar” and grab the code of your choice, with or widthout links.
4. Paste the code into the text widget and replace the image.jpg url with the logo File URL’s you saved. If using a link, replace the # with your link
5. Title your widget, but because we don’t want the title showing, put an ! mark infront of the title because the Remove Widget Title requires this to work (hide it)
6. At the bottom of the widget, choose to “Show” the widget on the front page only. 

Step 5 – Add Your Slideshow

This step requires you to follow the slideshow tutorial which also offers a video as well on how to set this up.

Slideshow Tutorial