10

WordPress Zen: Tweaking the SimpleFolio Theme is not that “Simple”

Posted April 25th, 2012 in Featured, WordPress and tagged , by Dennis

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. :)

10 Responses so far.

  1. Bharad says:

    I am using the same theme and I like it so far, except for the dull colors. I was able to tweak it and make it work. It is pretty good.

    I have published some of the source code here – https://github.com/teraom/bharad.net

    • Dennis says:

      Checked out your site… and I compelled to say, “Nice Job!” You’ve done an excellent job of ‘twisting’ SimpleFolio to meet your needs.

      Well played, sir. Well played. :)

  2. Rob says:

    SimpleFolio has been great, but it has taken a lot of work and education (which is a good thing).

    I’m wondering if you’ve run into a problem with password-protected pages. I’ve tried deactivating all the plug-ins, even tried bouncing back to the 2010 or 2011 themes. When I enter the correct password, it just bounces me straight back to the password entry page.

    Any ideas would be amazing…

    • Dennis says:

      Rob,

      My first guess (which I’m sure you’ve already checked), is that you are using the wrong password. Outside of this, then… I’m sorry, Rob.. I’ve no idea why this would be happening. I know that “password protected” pages/posts can be rather tedious. Perhaps, you can let me tell me which Pages are “protected” and send me an email with the password… and I can check it out.

      Since you are having the same issue with Simplefolio, 2010 and 2011 Themes… follow these steps:

      • deactivating all plugins to see if this resolves the problem. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
      • switching to the Twenty Eleven theme to rule out any theme-specific problems.
      • resetting the plugins folder by FTP or PhpMyAdmin. Sometimes, an apparently inactive plugin can still cause problems.
      • re-uploading all files & folders – except the wp-content folder – from a fresh download of WordPress.

      It’s up to you.

      ~Dennis

  3. Anton says:

    I’ve been using simple folio for years, I find it really easy to tweak in comparison to other themes. It’s an excellent base for starting a new wordpress site, I must have used it for at least 10 sites now and they all look completely different. I suppose I have quite a bit of php and javascript experience though. Would recommend it to many. Great article, will have a good read through for some tips :)

    • Dennis says:

      Anton,

      LOVE your site. Very pleased with how you massaged the “Simplefolio” Theme. Well played! :)

      My ONLY issue, is the “fat” footer and the text you are using to “headline” your segments. It’s a little “blurry” on Firefox for Mac OSX. The REST of the site is rather colorful and compelling.

      When I get a handle of the latest “Porfolio” version… I’ll get it installed and let all of you know my thoughts.

      ~Dennis

  4. Wally David says:

    I’ve taken this theme to a whole new level…
    Just downloaded 1.5.. looking forward to see what updates he has that I can tweek and make better!

    • Dennis says:

      Wally,

      Are you using Simplefolio “personally”? Checked-out your site and I will say that it suits you rather well. If it IS “Simplefolio”… well… damn! :) Well played, sir. Well played…

  5. Francesco says:

    Hi,

    I am trying to use NextGen Gallery plugin onto my website, however the simplefolio theme is stopping the titles from appearing because of the fonts. The gallery is on this on the jewellery page.

    I have tried the suggested and updated my cufon and jquery files but it still doesn’t work. The plugin works with on other themes so I know its a theme issue. Any assistance would be greatly appreciated.

    Thanks.

    • Dennis says:

      Good question…

      The questions I would have are these:
      1) What version of NGG are you running?
      2) What version of WP?
      3) Have you tried turning “off” the Cufon JavaScript?

      Let me know. I’m very interested… :)
      ~D

Leave a Reply