In this article, we will be showing you how to configure the SimpleFolio WordPress theme into what you are seeing now, WordPress Handyman.  We’ve actually come across quite a few Internet entrepreneurs wanting to use this theme.  The common problem that they encounter is trying to get the home page working especially the slider!  To address this problem (pain), we’ve experimented it with our website and transform it to what we want.  Continue to for the steps to configure the theme!

The end look and feel of the website will be the below illustration.  We will not mention about the creation of the pages.  You can create your pages accordingly to your need but for our website, we have the About, Articles, Membership and Contact Us pages. We will assume that you have downloaded, installed and activated the theme.  If that is all done, please proceed to the next paragraph.

Before we start working on the theme configuration, let’s examine how this theme works first in terms of each area that you will be making changes on. The below is the home page of the website.

There are two types of layout used in this theme, one with full width for content and the other partial width for content with side bar.  Upon clicking the featured post in Area [2] of the home page, you will be redirected to this featured post that is being displayed in a full width layout.  There are no side bars for this post template as illustrated below.

Going  back to the home page, upon clicking any post under recent article (that are not of the Featured category), you will be redirected to the post of a partial content width layout that is illustrated below.

Now, before we move on, we need to highlight how the image is displayed as well.  A border will be displayed for every image being used.  However, there is a way to remove the border which is especially useful when you want to put in number labels in the post (illustrated below; noticed that there is no border for the image number “1″).  If that is not of any concern of you, you can skip this.

OK, that should give you some idea of the entire website; so let’s start configuring it!  Area [1] is an image and not a rendered text title.  The default is a SimpleFolio logo.  This can be changed to what you need.  Once you are logged into your WordPress adminstration console, scroll all the way down and find the Theme Options section. Click on it.

The Theme Options menu is available once you have installed and activated SimpleFolio theme.  You should see the theme options.  Of course, your image must be already uploaded into your website before you can place the file URL here.

Moving to Area [2], which is the area most internet entrepreneur failed in making it work is the post slider.  This area requires a few things to make it work.  You will need to do the following:

1. Create the home page using SimpleFolio home page template
2. Set the home page to be the page that visitors will first see
3. Create posts that is going to be featured in the slider

Area [2] step 1, create an empty page and give it a name call Home. No content is required for this page.  The only thing you need to do is to set the Template under Attributes to “Home”.  Click “Publish” to publish this page.

Area [2], step 2, go to Settings >> Reading.  Set Front page to Home and Posts page to Article.  Click “Save Changes” to save changes.

Area [2], step 3, the final step, is to create posts of a particular category to be displayed by the home page slider.  The slider displays posts by a specified category.  For us, we created a category called, Featured which is to be displayed in the slider. Now go back to Theme Options again and scroll all the way down to the section of Portfolio Options.  Change to the category of your choice and save the changes.  For us, we want Featured category articles to be displayed as illustrated below.  Note, the slider by default displays up to 5 posts.

The image size for the slider should be kept at 900×250 pixel.  An image larger than this size will skew the website badly… so do take note of this specification.  To include the images, it is done at individual post level. For every post, look under the “SimpleFolio Custom Settings” and include the web address to the “Large Preview Image URL” illustrated below.

Once you’ve done all that, you can go back to your home page and refresh to see if changes have taken effect.  It is worthwhile to get Area [2] before you continue.  If everything is OK for you, please continue to the next Area.

Area [3] is a special quote area that you can use to drive messages to your visitors and a button for your visitor to click in response to your special quote.  To get it working, go to Theme Options, scroll down till you reached Front Page Slogan Options.  Change the entries accordingly and click “Save Changes” (illustrated below).

Area [4], is the widget area. There are two widget areas for SimpleFolio theme.  The first widget area is in the home page while the second widget area is in the partial width for content layout.  Area [4] is the widget area for the home page.  To make changes to the widgets in the home page, go to Appearance >> Widgets, drag and drop the necessary widgets into the Home Widget.  It is recommended to keep at most to 3 widgets for the Home Widget (although we placed 4 widgets in it as illustrated below).

Area [5] is the 900×250 pixel image that is used by the post slider in the home page.  Therefore, once you have configured an image for the post to be displayed in the slider, it will be displayed here in a static state (not moving).

Area [6] is the widget area (side bar) for the partial width for content layout.  Go to Appearance >> Widgets, drag and drop the required widgets into Sidebar Widget.  There is no recommended limit for this side bar as you deem fit to your website.  Below is what we have placed inside this Sidebar Widget.

Lastly Area [7], is an addition on top of the normal SimpleFolio theme configuration.  If you need number label images to be displayed in your website, you may want to read on.  If not, you can give it a miss.   Area [7] requires modification of the underlying CSS stylesheet.  Download stylesheet.txt from us.  Go to Appearance >> Editor >> Stylesheet (style.css).  Copy the content in the stylesheet.txt and replace the content for style.css.  Click “Update File”.

This stylesheet have an additional entry to set image attribute to no border using noborder class. Whenever you have a number label image being inserted into the post, click on the image to amend the properties.  Get to the Advanced Settings and add the “noborder” in the CSS Class.  Click “Update” once you are done.  This have to be done on all the inserted images that requires no border.

That concludes the basic and a small level of advanced configuration for the SimpleFolio theme.  Hope you got it right and get it working now.  Do drop us any clarifications should you have problems trying to get it work!