NOTE: (10/15/2012) There appears to be an update to Simplefolio (v1.6)on the original Slimmity site. However, the site appears to have been compromised. Until this is fixed, you’ll have to downgrade to v1.5. This is just a precaution.

Smashing Magazine did the WordPress world a real favor by making the Simplefolio Theme v1.5 free for-the-taking.

Simplefolio 1.5 has quite an elegant look, with plenty of white space for easy reading. Not only is it widget-ready and XHTML 1.0 Transitional compliant, it has a feature-rich Options Page to modify the theme for your particular look-and-feel. However, setting up this WordPress Theme to look exactly like the Demo, took me a considerable amount of time… and I found some issues that really could have been dealt with before its initial release.

Trouble with Those Menus

Simlefolio 1.5 does not take advantage of the new Custom Menus which have been available to WordPress 2.8+ users. It simply makes a wp_list_pages API call, so if their are pages you wish to remove from the list, you will have to modify the wp_list_pages in the header.php file to exclude them. A BETTER technique would be to use a Custom Menu and to cast it with the right CSS id and class, so that it looks pretty close to the original intent, I did this by editing the header.php file:

[div id="pagenav"]
                [!-- [ul id="nav"]
                    [?php wp_list_pages('title_li='); ?]
                [/ul] --]
                [!-- Custom Menu --]
       [?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_class' => 'sf-menu', 'menu_id' => 'nav' ) ); ?]
[/div]

I also added Custom Menu capabilities to the footer.php file as well, by commenting-out the original wp_list_pages API call:

[!-- [ul]
      [?php wp_list_pages('title_li=&depth=1'); ?]
[/ul] --]
      [?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?]

The LAST step to make these Custom Menus available, will be to add the necessary code to the functions.php file:

function register_simple_menus() {
register_nav_menus(
  array( 'header-menu' => __( 'Header Menu' ),
         'footer-menu' => __( 'Footer Menu' )
       )
 );
}
add_action( 'init', 'register_simple_menus' );

Now, you can make your own Custom Menus through Appearance->Menu. Be aware that if you add more than 6 items to your menus, they will drop down to sit underneath the logo. There just isn’t enough room, unless to choose to decrease the font-size for the menu items through CSS.

Cufon and JQuery

I was a HUGE fan of using sFIR for font-replacement until the latest versions of the Apple’s OSX made using Flash a viable option. Now, the best custom font replacement strategy is to use Cufon and JQuery. However, Simplefolio 1.5 uses an older version of Cufon and the open-source JQuery… which occasionally renders fonts improperly in the later versions of IE. The best bet, is to simply download the latest version of JQuery and Cufon and FTP them to their proper directory within the Simpfolio Theme folders.

The latest version of Cufon (1.09i) can be found here. Save the file as “cufon-yui.js” and FTP it to themes/simplefolio/js/.

The latest uncompressed version of JQuery (1.7.2) can be found here. Save the file as “jquery.js” and FTP it to themes/simplefolio/js/.

My Slider Broke! 🙁

Yeah. Somewhere between WordPress 3.1 and 3.2.1, the s3slider JQuery Slider took it “in the shorts” so-to-speak. There is a HACK that you can find/use here or check this one out here, but honestly… you REALLY should be using the latest version of WordPress. By making that upgrade, you eliminate the need for this fix altogether.

If your slider STILL doesn’t look right, then ask yourself: Did I use the correct dimensions for my slider images? They are 900px by 250px? Right? If they aren’t… you should try again. 🙂

When I use More Than 3 Homepage Widgets, the Site Looks Terrible

Honestly, the site was not BUILT for more than three Homepage Widgets. But, we can certainly work around that.

Yet, this is an adjustment that is not difficult, but one that was difficult to locate. It’s a JQuery issue. You will need to adjust the custom.js file, which will not be available to alter through the WordPress WYSIWYG editor. You’ll have to download the custom.js file, edit it, and upload/replace the original. Find this line:

 $(".home_widgets .widget:first").css("margin-left", "0");

and add THIS line just below it:

$(".home_widgets .widget:eq(3)").css("margin-left", "0");

You will need to adjust some more CSS, but this modification will shorten the amount of additional work to make everything fit. 🙂

Installation Issues

There have been installation complaints with Simplefolio 1.5, but I’ve never run into any of them. The best solution revolves around the numerous folders that comprise the Simplefolio download. Do not attempt to upload the entire ZIP file to your WordPress installation. It will not work. 🙂 If you do, then you’ll get at least a “stylesheet missing” error. Your best bet will be to unzip the download and locate the folder titled, “simplefolio.” Upload this folder to your “wp-content/themes/” folder via FTP and you’ll save yourself some hassle.

Another solution, is to select ALL of the files in the “simplefolio” directory and create a ZIP file titled, “simplefolio.zip”. Now, you can use Appearance->Themes->Install Themes->Upload to upload your newly created “simplefolio.zip” file.

Final

I love this theme and am not using it completely to my advantage. Slick and Open. That’s my assessment. Download, Upload and Install this theme. I’m sure you will enjoy it as much as I have. 🙂