Jul 092010

Finally! Finally a version of Suffusion got approved! This is the longest it has ever taken between two versions to be approved. And also, this is the first time in the last 3  months that I am actually posting the release note after the actual release!

This release is actually quite a big one from several points of view. Firstly it has all the changes that I documented in the release notes for version 3.5.4. This includes key features like CSS compression, some new hooks, flattening of the WP 3.0 menus etc.

In addition here are the changes for this version:

  1. Code Housekeeping
    Normally code housekeeping is a footnote in my release notes. But in this release it does get the spotlight and with good reason.
    1. After some feedback from the reviewers at WP I put in numerous checks at various places in the code that shouldn’t impact you as a user, but they do minimize the volume of your server logs. Mind you, this was a very large-scale effort that completely diverted the focus from my main goal for this release. But I guess it was worth its while.
    2. I have reduced repeating CSS code for two sets of elements: the l3nav … l8nav elements, which you see in the “full-sibling view” in the breadcrumbs for pages, and the navigation menus. Again, these were quite big as changes, because of the large-scale visual impact.
    3. I have modified the framework to handle compression better in case you are using a child theme. Some parameters have been provided in Blog Features → Child Themes to let you control the different stylesheets you want to include in your child theme. You can ignore this if you are broadly staying within the confines of the the theme’s look and feel even in a child theme.
    4. Another thing I did was to move the individual skin files into their own sub-directories. This gave me the advantage of defining custom configurations for each skin.
  2. Bug Fixes
    1. In cases where the number of posts was very high (a few hundreds if not thousands) the magazine template tended to fail. Apparently this was a problem with a standard WP function call, get_posts().  This has now been fixed and in the process the magazine template has been made lighter too.
    2. There was one bug that was showing incorrect WP 3.0 menus in the top navigation bar. This has been addressed.
    3. A very long-standing issue was the fact that TimThumb refused to work on WP-MS / WP-MU. Apparently the “issue” was my own absentmindedness, which resulted in my wrongly assuming that the problem was more complex than it actually was. Anyway, this issue is now fixed. WP-MS users can harness the full power of TimThumb image resizing in their installations.
    4. In cases where the static tabbed sidebar was enabled, the special page layouts like “Singe Left, Single Right sidebars” were going completely haywire. This issue has been addressed.
    5. There was a bug that was causing an inaccurate rendition of the header and the top and main sidebars when all of them were set to have backgrounds as wide as the window but contents aligned to the wrapper. Though this was never reported, it needed fixing for a very important reason (see below)
  3. New Features
    1. After several months Suffusion has a new skin!!! This is truly a different skin in terms of styling, look and feel etc. The skin is called Minima and is currently available on a white base with some black highlights with very very few images. Of course, you can pick and choose whatever you want as your colors. I have changed my personal blog to use the new skin. Check it out. There might be some chinks with specific GUI functionality like widget drag-and-drop on the blog pages, but if you stick to something that doesn’t use fancy features you should be okay. As compared to the standard Suffusion look, there are a few things that will jump right at you in Minima.
    2. One of the things you will see that will jump right out in Minima is a continuous navigation bar, instead of the traditional tabs. Particularly if you are running a news site this kind of a look will serve you well. You can control this setting in Blog Features → Main Navigation Bar Setup and Blog Features → Top Navigation Bar Setup, by having a tabbed vs. continuous look. I am not very happy with the color combinations that I managed to get on the dark themes for the continuous navigation bars, but that is something I will fix in the near future.
    3. I have added a new option to switch rounded corners off across the site. Check out Visual Effects → Theme Skinning for setting this.
  4. Feature Changes
    1. I have made significant typographic enhancements to the theme. I have basically followed best practices and guidelines for this, so if you don’t like the new tweaks to line spacing etc you know whom to blame!
    2. Also in typography I changed the base font size from 0.75em to 12px. Apparently some people were having issues rendering the fonts on their browsers because of different browser setups. All other font sizes are left as percentages.
    3. I have modified the theme option menu to be enabled if the user had the capability to “manage options” rather than “edit themes”. This is of particular impact to folks using WP-MS, where previously only the Super Administrator was able to manage theme settings. Regular Administrators were unable to do so even in themes that they owned.

Now a few lines about what didn’t make it to this release. One feature that I really wanted to put in was a few more sidebars, particularly in the header area etc. But unfortunately due to the extremely high volume of work that I had to do, this got pulled. But I promise it will be there in the next release. That’s about it – I am off to relax after a few very taxing weeks working on the theme.

Jun 222010

I submitted version 3.5.4 on Sunday, before flying out to the UK. I see that WordPress has still not approved it, so I await the release patiently. This was a big release in terms of the number of fixes and enhancements, so without much ado here is the list:

  1. Optimization
    I did some optimization on multiple fronts:
    1. I introduced a new section under Blog Features called Site Optimization. Most optimization activities have been moved or added there.
    2. I have merged the contents of bgiframe.js with suffusion.js. This is to reduce the overall number of HTTP requests
    3. I have merged the contents of dbx.css with style.css, again, to reduce the overall number of HTTP requests.
    4. You now have options to choose GZip and minification at various levels. Mind you, different plugins can achieve this at various levels for you. In general the capability built into the theme is competent, but not all-encompassing. If you are using a plugin and are happy with it, by all means stick with it. But if you are not using a plugin or don’t want to use one or you don’t have , feel free to give this a shot. From what I have found out this does improve performance on Google Page Speed and on Yahoo YSlow. Feel free to disable the optimization if it doesn’t work well for you:
      1. You can GZip and / or minify the theme’s CSS files from the Blog Features → Site Optimization menu
      2. You can GZip the internal WordPress JavaScript files (like JQuery). Note that these files are already minified, so you don’t have to do anything on that front. Also note that the GZip process doesn’t apply to Suffusion’s JS files (like the JQuery Cycle script for featured content). This is due to a shortcoming in tying together WP’s inbuilt function wp_enqueue_script with the GZip capability. Plugins can still do this for you.
      3. You can also GZip your main content, all from the same Site Optimization section.
  2. WP 3.0 Retro-fixes
    WordPress changed a few things between its last RC version and the final release version. I took care of those in this release:
    1. WP renamed the support type for navigation menus from nav-menus to menus. Because of this the navigation menus seemed to not be working in version 3.5.3 with WP 3.0, while they worked for WP 3.0 RC and Beta versions.
    2. WP also renamed the function is_post_type to post_type_exists. This was causing custom taxonomies to not be associated with custom types in version 3.5.3 (again, this was working for the RC and Beta versions). I have addressed this too.
  3. More WP 3.0 Support
    I have added an option to “flatten” the navigation menus of WP 3.0 in the Navigation menus. Using this setting you will no longer see the menu names in the navigation bar. I have also included WP’s standard code to include feed URLs (this is internal and shouldn’t make a difference to you as a user).
  4. New Widget Areas
    I added two new widget areas: Sidebar 1 (Bottom) and Sidebar 2 (Bottom). These are respectively positioned below Sidebar 1 and Sidebar 2 and will be on the same side as the main sidebars. You can style these sidebars individually, so effectively you can have two sets of tabbed sidebars in the same column.
    As an aside the total number of widget areas in Suffusion is currently 10.
  5. New Action Hooks and Filter Hooks
    A lot of new hooks were added, both as action hooks and filter hooks. You can use these hooks to put in some fancy stuff either through the custom PHP method or through the child theme method. Here are the hooks:
    1. Action Hooks
      These have been added with respect to the sidebars. You can use these to put in some custom markup above your sidebars or between the sidebars or below them.
      1. suffusion_before_first_sidebar
      2. suffusion_between_first_sidebars
      3. suffusion_after_first_sidebar
      4. suffusion_before_second_sidebar
      5. suffusion_between_second_sidebars
      6. suffusion_after_second_sidebar
    2. Filter Hooks
      One filter hook has been added:
      1. suffusion_get_post_title_and_link – You can use this hook to append or prefix the post title with some other text. E.g. You can, as one user requested on the forum, have your own image before the post title, or as another user requested, put in a date in the list layout view. Currently the tile layout doesn’t have this hook, but it will have it in version 3.5.5.
  6. Miscellaneous Changes
    I fixed a small bug brought about by my use of the post_class function. This was causing attachment views to show up unstyled. Now they will get the post class. Another bug I fixed was related to the “Page of Posts” template. For some users this seemed to be ignoring the “Display All Posts” I also made minor modifications to the different layout files by adding global variables that indicate what kind of layout you are using – blog, tile or list. Again, this kind of a change doesn’t impact you, but it is useful if you are going to write your own templates. The last change I made was the addition of an option to disable the use of the body_class internal WP function, because apparently PHP 5.2 has some issues with it. Frankly, this wasn’t my problem to solve, but then again, such things have never prevented users from asking me to resolve their issues.

Now for the next release. I can say for sure about two new features in 3.5.5. One is a couple more widget areas (a lot of people have been asking for widget areas in the header). Another is the use of TimThumb with WP-MS, something that has been in my To-do bucket ever since I released BP support for the theme. As for more features, I need to see what I can fit in my timeline.

While it has been humorously suggested that I am a machine, and while a lot of users on the support forums make demands from me seriously assuming I am a machine I have to remind you what I mentioned at the start of the post: I am in London this week, hence my response times and development speed will be off. Also note that I am not in charge of approvals at WP, so please don’t keep posting questions asking when version 3.5.4 will be available – I have no visibility into that.

Jun 172010

After months of waiting and after a series of Beta versions and Release Candidates WP 3.0 finally came out today. I encourage all of you to upgrade your installations.

Why Should You Upgrade?

Version 3.0 is a significant release that has a lot of terrific features. Here are some:

  1. Menus
    This is arguably the most awaited feature of WordPress. This is  a huge relief for developers more than users as we don’t have to code our themes to provide you with a mechanism to select pages / categories / links to build the menu. As long as the themes offer basic WP 3.0 menu support you are good to go. You can build and structure your menus as and how you want with very little restrictions.
    Suffusion has supported native menus from version 3.5.0.
    It has been brought to my notice that WP pulled a little trick here. In the release version they changed a call ever so slightly, thereby making it seem like menus don’t work in Suffusion 3.5.3 (and a bunch of other themes that claim to support menus). To fix this:
    1. Open functions.php in your theme editor
    2. Search for the line that says add_theme_support(‘nav-menus’);
    3. Change that to say add_theme_support(‘menus’);

    That’s all.

  2. Integrated Multi-User Code
    With WP 3.0 the two branches of code, WP-MU (multi-user) and WP have been merged. You need to tweak a few settings to convert your site from a regular WP site to a WP-MS (multi-site) installation. You can start by creating a network.
    Suffusion can be used for WP-MS and can be made to work with BuddyPress too for a better experience.
  3. Custom Post Types and Custom Taxonomies
    The next big feature for folks wishing to use WordPress as a full-blown CMS is the concept of Custom Post Types and Custom Taxonomies. This offers limitless possibilities. If you have a site where you do reviews of books, movies and music, you can create custom post types for each of those, then associate custom taxonomies to them, like authors for books, actors and directors for movies and artists for music albums. In a theme that supports child themes you can suitably create your own templates for each of these post types and make them appear very different from the regular “blog” look.
    Suffusion added a plugin-like feature to let you define custom post types and taxonomies in version 3.5.3. This functionality will be enhanced in the next few releases.
  4. Native Support for Custom Header and Custom Background Images
    Now theme developers don’t have to code up a bunch of stuff to handle custom header images and background images. Of course, if you are like me you might still want to code up things – coding definitely gives you a lot of flexibility.
    Suffusion doesn’t support this feature at present, but it will, very soon. I couldn’t beat the WP 3.0 deadline, to be honest :-)

Why Shouldn’t You Upgrade?

Simple answer – themes and plugins. Before you upgrade make sure that your theme is tested to work for the theme you are using. I am assuming that you are not necessarily a Suffusion user, so if you are using a theme that is not compatible and you upgrade, you will find yourself on a sticky wicket.

Another reason why you shouldn’t upgrade is if you have some indispensible plugin that is not tested on WP 3.0.

How Should You Upgrade?

If you don’t see an option on your admin Dashboard to upgrade, head over to Tools → Upgrade and then do the upgrade.

There is always the manual upgrade option, where you can download the zip file from WordPress, unzip it and overwrite everything apart from the wp-content folder.

What? No Suffusion News?

Come on! You cannot expect me to sign off without talking about the progress on Suffusion!

I have been busy the last week adding some optimization-specific stuff to Suffusion, like an ability to use GZip compression and minification on CSS and JavaScript. I have been largely successful in improving a lot of things, significantly bumping up the scores on Google Page Speed and Yahoo YSlow. Mind you, YSlow is quite hard to please – Yahoo’s own site scores a “B” grade on its performance test.

I have also been working on a ton of other stuff, small and big. Stay tuned – a new version will be submitted soon.

Jun 092010

Since it has been exactly 2 weeks after my submission of version 3.5.2 and I have heard nothing useful from the folks at WP despite my queries, I have decided to take some drastic measures resulting in some bad news and some good news.

The Bad News
I have pulled BuddyPress support from the theme. All the folders have been removed and a trimmed down version has been resubmitted as version 3.5.3 to WordPress for approval. I would have liked to be a complete theme with BP support, but 2 weeks for approval is simply not acceptable. I hope all of you agree.

The Good News
Of course, my conscience wouldn’t let me leave you in the lurch, so you will get the next best thing – a plugin that you can use on Suffusion and any child theme.

The Bad News – 2
Given the nature of changes in 3.5.3 I couldn’t do the theme AND the plugin. So the plugin is not yet developed.

The Good News – 2
While I haven’t got the plugin ready, you certainly can try out the BP functionality!!! Head over to the plugin page, or what will become the plugin page – right now it has instructions for you to make this work. Go ahead and give it a shot and let me know what you like / dislike.

And now for the details of version 3.5.3:

  1. Removed BuddyPress Support
    As described above. I haven’t removed the style information from the theme’s stylesheets, though. Just the files for BP have been removed.
  2. Bug Fixes
    There were some issues with BP styles, particularly for IE. Those have been addressed. Also the introduction of the body_class() call caused some unexpected styling issues – they have been addressed, too. Then there was an issue with the registration on the multi-site setup of WP, where the form was not rendering correctly. That has been taken care of.
  3. Custom Post Types and Custom Taxonomies
    This is the biggest feature of this release. Custom Post Types have been supported in version 2.9 of WP, but WP 3.0 takes it a lot further. I have provided a UI for you to add custom post types and custom taxonomies. This development took a good bit of time and testing. Here are the highlights:
    1. The Options menu has been subtly reorganized. You earlier had the options accessible through the “Appearance” menu:
      Now Suffusion has its own menu with an ability to set theme options or define custom types:
    2. The major sub-feature here is the use of AJAX in the “Custom Types” section. People have complained regarding the fact that Suffusion does a “resubmit” of the options, reloading the page. What is not often understood is that the options UI for Suffusion is phenomenally complex and handling it all through AJAX is not feasible because you will lose the spiffiness that you currently have in the back-end. However I gave AJAX a shot in the Custom Types menu and tedious though it was, I might consider extending AJAX support to the main options page. The UI is still rough around the edges, but I will polish it in the coming weeks.
    3. You can set up custom post types for books, movies, music albums, support forums etc. You can associate your own taxonomies to these, like genre, rating, writer, support-type etc. You can include these in WP 3.0 menus and a bunch of other places, and in general you can make your site a true CMS site.
    4. In conjunction with child themes you can create your own custom layouts for each custom post type.
  4. Support for hAtom Microformats
    Your posts and pages now support the hAtom Microformat, which will  help microformat-capable browsers and browser-plugins detect post content much better.

I am sincerely hoping that 3.5.3 will get approved quickly. And I am hoping even more that you will like this triple release.

Jun 032010

Six days after submitting version 3.5.2 of Suffusion for approval I contacted the folks who do the approvals. The news I received was somewhat discouraging. Since I tagged my theme with “buddypress” because it is now BuddyPress-enabled, it goes into a different review queue. The person who does the approvals there is apparently behind, so I don’t know when this version will be available. Let’s keep our fingers crossed, because there were a lot of things in 3.5.1/3.5.2 that were non-BP features.

Jun 012010

Minutes after making my submission of version 3.5.1 I realized that there were some errors that had inadvertently crept in because I used the body_class() method. So I had to fix the errors and resubmit the theme, but as version 3.5.2. Now, I had already laid out plans for 3.5.3 before making these changes, so another feature found its way in. So here are the changes for 3.5.2:

  1. Support for Child Themes
    This was another of those long-time to-do activities that I finally got around to delivering. This was surprisingly easy to incorporate and I just had to make a handful of changes. You can now define child themes for Suffusion. This is very easy for you as well. Let us assume that you will create a child theme called “Son of Suffusion”. Here is what you will do:
    1. Create a folder called son-of-suffusion under wp-content/themes.
    2. Create a file called style.css in this folder. Put in these lines:
      Theme Name: Son of Suffusion
      Theme URI: http://your-theme-url
      Description: Child Theme based on Suffusion
      Version: 1.0.0
      Author: Your Name
      Author URI: http://your-url
      Template: suffusion
      @import url("../suffusion/style.css");
    3. The last line in comments, “Template: suffusion” is critical. It tells WP that your theme is based on Suffusion. Make sure that what you put in there is the directory where Suffusion resides.
    4. The first line after the comments is important if you want to use the Suffusion stylesheet. If you don’t have it, Suffusion’s styles will not be loaded.
    5. That’s all, really. You can add additional styles if you wish. This would be one way to not use the “Custom Styles” option. You can also add a functions.php and define your own PHP functions there. That would be one way to avoid using the “Custom PHP” functionality. Note the following:
      1. What you define in functions.php adds on to the existing functions in Suffusion’s functions.php file.
      2. Any other template file that you add overrides Suffusion’s templates. So if you create your own author.php file, that will take precedence over Suffusion’s author template. One very important use of child themes is if you want custom templates for custom purposes. E.g. You can create a file called category-16.php and define a special layout for your category with id 16. You can also create author-specific templates for WP 3.0. See WP’s template hierarchy for more details regarding how to add custom templates.
    6. Suffusion’s huge array of options will all be available to you using this method. Ensure that you keep the theme up-to-date.
  2. Bug fixes for some errors introduced by the body_class() function, for static pages. Of course, after submitting 3.5.2 I caught another of these errors for author pages, but I am not going to bother with another release before WP approves my current release.

That’s it for now. I guess 3.5.2 will be a significant release for you users because it will come armed with both BuddyPress support and Child Theme support. So just keep waiting for WP to approve, while I figure out how to make some more WP 3.0 functionality available to you.

May 282010

I submitted version 3.5.1 about a couple of hours back today, which is a pity because I believe I missed the bus for it being approved today, which is an even bigger pity since it will probably not be approved before Tuesday (1st June). Sad, because it has one HUGE feature.

  1. BuddyPress Compatibility
    After quite a few months of procrastination I finally bit the bullet and built full BuddyPress integration capabilities with the theme. It was not a difficult task thanks to the BP Template Pack plugin, but it took a really long time to implement. I had to go through a large number of files, check the layouts for each of those, modify all my stylesheets etc, because the output that I was getting was simply ugly. Also, the BP Template Pack plugin is still in its evolving stages, so there is a lack of consistency in the way it does its HTML markup.
    Mind you, you don’t need the BP Template Pack plugin to enable BP integration with Suffusion. This release takes care of that. Of course, you do need the BuddyPress plugin itself :-).
    As I mentioned, this was a very long exercise and I got a bit desperate towards the end last night. As a result some minute errors might have fallen through the cracks. Please feel free to post them on the support forum.
  2. Bug Fixes
    Surprisingly there were some unexpected bug fixes. I say unexpected because they came up in functionality that has existed for a long time.
    The first was in the “Page of Posts” template, where if you chose to display posts in the “List mode” the output came out wrong.
    The second was a 2-pronged bug in the image fetching function. The “Tiles mode” and the “Magazine layout” were not picking up an image defined as a thumbnail through WP’s native thumbnail feature. Plus under certain conditions TimThumb was not being invoked for resizing the images. I have fixed both of these. Note that if you are using WP’s native thumbnails you will not be able to resize them using TimThumb (I will have to investigate if it is possible to integrate TimThumb with native thumbnails)
    The third was in the Search results. I had never realized that the Search results were showing a date box and categories even for pages. Combined with the fact that I recently added some support for WP’s post_class() function, the net result was that the date was showing up for pages in search results in a really ugly manner.
    The fourth fix is for the static tabbed sidebar, where a div element within the custom tabs would automatically get hidden. Now it won’t.
  3. New Features
    I added a capability to disable the “date box” on the search results page. This will ensure that a page returned in a search result doesn’t look dramatically different from a post.
    I also added in the body_class() call to the body element of the HTML markup.

With this release I can lay serious claim to be able to support the multi-site capability of WP. If you weren’t aware, WP and WP-MU (Multi-user) are merged in version 3.0 of WP. So you can run WP in a single-site mode (default) or in multi-site (MS) from the same installation. Suffusion always worked fine with WP-MU, but BP integration had been a headache.

I still have to test out one tiny little to-do item – TimThumb integration with WP-MS, and I promise to do it soon.

This whole process of making the theme extract full mileage from WP 3.0 is getting very exciting. Let’s see what I can do with the remaining features.

May 272010

In the release notes for version 3.5.0 of Suffusion I mentioned that native tabbed sidebar support was added. Since I am quite proud of the technique I used to get this effect, I decided to write a tutorial on how to do it. But first I would like to pay homage to the following that helped me visualize the solution:

  1. How To Create Tabs Using JQuery – This article by Justin Tadlock, the creator of the awesome Hybrid Theme, was something I used for version 2.0 of Suffusion, where I introduced the tabbed options panel of Suffusion.
  2. Widget container HTML (and missing titles) – A thread on the WP forums started (and resolved) by DigitalNature, the creator of the Mystique and some other popular themes, regarding an issue with widgets that do not have titles

The Foundation

If you go through Justin’s tutorial you will get the basic gist of how to build a tabbed box. Basically you need to set up 3 things:

  1. The HTML markup
  2. The CSS
  3. The JQuery for the actual tab effects

The HTML markup requires your page’s source code to look similar to this (like Justin’s example, the differences being in the way I named my classes):

<div id="sidebar" class="tabbed-sidebar">
	<!-- The tabs -->
	<ul class="sidebar-tabs">
	<li id="t1" class="sidebar-tab t1"><a class="sidebar-tab t1" title="Tab 1">Tab 1</a></li>
	<li id="t2" class="sidebar-tab t2"><a class="sidebar-tab t2" title="Tab 2">Tab 2</a></li>
	<li id="t3" class="sidebar-tab t3"><a class="sidebar-tab t3" title="Tab 3">Tab 3</a></li>
	<li id="t4" class="sidebar-tab t4"><a class="sidebar-tab t4" title="Tab 4">Tab 4</a></li>

	<!-- tab 1 -->
	<div class="sidebar-tab-content sidebar-tab-content-t1">
	<!-- Put what you want in here.  For the sake of this tutorial, we'll make a list.  -->
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>

	<!-- tab 2 -->
	<div class="sidebar-tab-content sidebar-tab-content-t2">
	<!-- Or, we could put a paragraph -->
		<p>This is a paragraph about the jQuery tabs tutorial.</p>

	<!-- tab 3 -->
	<div class="sidebar-tab-content sidebar-tab-content-t3">
	<!-- Or, we could add a div -->
		<div>Something needs to go in here!</div>

	<!-- tab 4 -->
	<div class="sidebar-tab-content sidebar-tab-content-t4">
	<!-- Why not put a few images in here? -->
			<img src="image.gif" alt="Sample" />
			<img src="image.gif" alt="Sample" />
			<img src="image.gif" alt="Sample" />

</div><!-- tabbed-sidebar -->

Now for the JQuery code to run this:

$j = jQuery.noConflict(); 

$j('div.tabbed-sidebar ul.sidebar-tabs li:first').addClass('sidebar-tab-first');
$j('div.tabbed-sidebar div.sidebar-tab-content:first').addClass('sidebar-tab-content-first');
$j('div.tabbed-sidebar div.sidebar-tab-content').hide();
$j('div.tabbed-sidebar ul.sidebar-tabs li.sidebar-tab-first a').addClass('tab-current'); 

$j('div.tabbed-sidebar ul.sidebar-tabs li a').click(function(){
	var thisClass = this.className.substring(12, this.className.length);
	$j('div.tabbed-sidebar div.sidebar-tab-content').hide();
	$j('div.tabbed-sidebar div.sidebar-tab-content-' + thisClass).show();
	$j('div.tabbed-sidebar ul.sidebar-tabs li a').removeClass('tab-current');

The above code simply does the following:

  1. Adds the classes “sidebar-tab-first” and “sidebar-tab-content-first” to the tab and content. We could have done this directly in our markup, but the reason for doing it in JQuery will soon become clear.
  2. Hides all “content” divs, shows the first content div (with class sidebar-tab-content-first), then adds the “tab-current” class to the first tab (with class sidebar-tab-first)
  3. Adds a click function to each tab, making it display the associated content by determining the class of the tab.

So Where is the Problem?

So far we have done something fairly simple for a person with basic JQuery knowledge. The problem lies in tying this with dynamic sidebars. Consider the fact that the definition of a sidebar requires the following parameters:

  1. $before_widget
  2. $after_widget
  3. $before_title
  4. $after_title

These are parameters that apply to the creation of individual widgets, not the overall sidebar. If you notice our HTML markup in the previous section, we have created separate sections with all the tabs isolated from the content. But this is not possible for widget definition!! In other words, the widgets print one after the other, so each tab (i.e. the title of a widget) is grouped with the body of the widget, followed by the tab for the next widget and its body, etc. In WP-speak, the widgets typically print $before_widget, then $before_title, then the title, then $after_title, then the content and finally $after_widget. Or course there is nothing preventing a widget author from going bonkers and messing up the order, or not using one of the tags above etc. But that is the widget author’s problem. Assuming that the widgets are coded in a standard fashion, the code doesn’t quite render in a way conducive to tabbed sidebars.

The Fix

The fix is intuitive and is wholly borrowed from the WP forum post I lined to in the above. First we register the sidebar with parameters as follows:

  1. before_widget: ‘<li id="%1$s" class="sidebar-tab %2$s"><a class="sidebar-tab">’
  2. after_widget: ‘</div></li>’
  3. before_title: ” (a blank)
  4. after_title: ‘</a><div class="sidebar-tab-content">’

Note the following:

  1. We are creating the content as a “div” object within the “li” object.
  2. We are unable to assign the widget class (“%2$s”) or the widget id (“%1$s”) to the “a” element.

Now we will pull a trick using JQuery. We will modify the JQuery code thus:

$j = jQuery.noConflict();

$j('.sidebar-tab .sidebar-tab-content').each(function() {
	var parentId = this.parentNode.id;
	var parentClass = this.parentNode.className;
	parentClass = parentClass.substring(12);
	$j(this).addClass('sidebar-tab-content-' + parentId);

$j('.tabbed-sidebar ul.sidebar-tabs a').each(function() {
	var parentId = this.parentNode.id;

$j('div.tabbed-sidebar ul.sidebar-tabs li:first').addClass('sidebar-tab-first');
$j('div.tabbed-sidebar div.sidebar-tab-content:first').addClass('sidebar-tab-content-first'); 
$j('div.tabbed-sidebar div.sidebar-tab-content').hide();
$j('div.tabbed-sidebar ul.sidebar-tabs li.sidebar-tab-first a').addClass('tab-current'); 

$j('div.tabbed-sidebar ul.sidebar-tabs li a').click(function(){
	var thisClass = this.className.substring(12, this.className.length);
	var parentId = this.parentNode.parentNode.parentNode.id;
	$j('#' + parentId + '.tabbed-sidebar div.sidebar-tab-content').hide();
	$j('#' + parentId + '.tabbed-sidebar div.sidebar-tab-content-' + thisClass).show();
	$j('#' + parentId + '.tabbed-sidebar ul.sidebar-tabs li a').removeClass('tab-current');

What we did is this:

  1. After the page was loaded, we moved the “sidebar-tab-content” objects out of the “li” objects and appended those to the “sidebar-tabs” list as a whole. We did this by smart use of the JQuery “appendTo” function to add every tab’s content to its grandparent.
  2. Did all the necessary class additions that we couldn’t in our widget setup, again by fetching it from the parent / grandparent and using the “addClass” function.
  3. Added other necessities like the classes for the first tab etc.

That’s basically it. The JavaScript neatly rearranges our code into something conducive for tabbing, then applies the tabbing effects.

Is Everything Hunky-Dory?

Maybe. Let’s first see what advantages it gives us:

  1. You are not constrained by a rigid framework. Most of your widgets will seamlessly tie in with this sidebar.
  2. With a little extra effort you can make every sidebar behave this way without repeating this code. You just have to be smart with the sidebar ids and use them while doing the hide/show.

Now let’s first examine cases where the tabbing will not work:

  1. If your widget has no title, obviously there is no handle for the content in the tab-bar and the result is not pretty. This is not a shortcoming of the code – it is more like a user error. Imagine looking for a document without a title.
  2. If a widget author has not followed standard WP guidelines and has ignored the $before_title and $after_title tags and decided to specify his own, that too will cause issues, because the JQuery is relying on certain classes to be named in a certain manner. As I mentioned in the previous section, this is really bad coding on the part of the widget author.

Lastly let’s see what the pitfalls are:

  1. If your page is not using JQuery currently, adding this capability will require it to do so. That might slow your page down.
  2. If you have a lot of content on your page and if your images are heavy, the JQuery code will be the last to load. While your page is loading the users will see a haphazard layout of the sidebar and once the script is executed at the end of the page load the layout will click in place.

That’s about it. If anyone has a better approach do let me know.

May 202010

I submitted version 3.5.0 of Suffusion a few minutes back for approval. With this release, as promised, I have taken a major step towards supporting WP version 3.0. Here are the key features of this release:

  1. Support for WP 3.0 Menus:
    Initially this was a desperate measure. Some folks testing with WP 3.0 Beta 1 complained that they could not see the list of pages in the navigation bar setup. I did some debugging and found that this wasn’t a fault of the theme, but rather the functionality in the beta release itself was broken. Not knowing when the WP bug would be fixed, I decided to support the menu feature provided in WP 3.0. Of course, by the time I actually started writing the functionality Beta 2 was released and it fixed the original problem. I introduced the support, nonetheless. To use this feature go to Suffusion Theme Options → Blog Features → Main Navigation Bar Setup and Top Navigation Bar Setup and scroll to the section that says WP 3.0 Navigation Menus. This will only work if you have WP 3.0. Before you rush off to install 3.0 be warned that it is still in Beta, so a lot of things will not work as desired.
  2. Native Tabbed Sidebars:
    This was something I had in mind since a really long time, but I had never gotten around to coding it. This is similar to the “Tabbed Sidebar” setup you do in the Blog Features, but with a huge difference: it applies directly to the sidebar!!! In other words, if you go to Suffusion Theme Options → Visual Effects → Sidebars and Widget Areas and set the style of Sidebar 1 to be “Tabbed”, you can add widgets directly to your sidebar and have them show up as tabs. You don’t need to search for short codes to enter in the Custom Tab setup that Suffusion had so far.
    Mind you, there are some caveats – the widgets you add to the sidebar must have a title. Also, they must be “good” widgets following standard coding practices. In other words, the widget authors must take care to use the standard WP tags, $before_widget, $after_widget, $before_title and $after_title while coding their widgets. That means the NextGEN Gallery widget will not work in the tabbed sidebar (Apologies to fans of that plugin, but the widget that comes with it doesn’t follow WP coding guidelines).
    As far as I know Suffusion is the only free theme (and possibly the only theme, free or premium) that offers the capability to have your sidebar show tabs natively. Isn’t that cool? I am going to write up a tutorial on how to do this in a few days.
  3. Bug Fixes:
    I fixed a bug that was causing the title of the magazine section excerpts to show up supersized. Another bug that I fixed was that the JQuery Cycle script was being included twice. Thirdly, there was a minor alignment issue in the comments section, brought around by the relative font-sizing. That is now fixed.
  4. General Changes:
    I have merged the content of plugin.css with the main content. This should reduce one HTTP call from the page. I have also made the fonts for different headers slightly smaller, just to make things appear more pleasant.
  5. New Translation:
    Abe Li has graciously provided a Chinese translation that I have included in this version. Thanks Abe!

I have been delving deeper into WP 3.0 and there are a lot of things I can see that I like:

  1. One big “to-fix” item on my list is full BuddyPress support. In WP 3.0 WP and WP-MU have been integrated, but with one major caveat. Previously you could install WP-MU in a sub-directory on your site, but with the merger, WP cannot be installed in its own directory. This poses a challenge for me, as I have to figure out how to test this setup – I always have WP installed as a sub-directory and I don’t have domains where I could test this.
  2. Another really interesting feature is “Custom Post Types” and “Custom Taxonomies”. The reason I call this interesting is because the themes that will truly benefit from this are full-blown frameworks (like Thematic, Hybrid etc) rather than classical themes like Atahualpa or Suffusion. Of course, Suffusion has enough hooks to have its own child themes, so I have to give this some more thought.
  3. Some rather basic capabilities have been provided like native support for custom headers and custom backgrounds. Since Suffusion already has extensive capabilities in this space, this is not urgent on my priority list.
May 182010

One of Suffusion’s neat little features is the Custom Styles option. Based on some feedback that I had received from some users, in release 3.4.2 I provided a way to bundle custom PHP with your installation.

In this post I will walk you through the following scenarios explaining how you can use this functionality:

  1. Adding your own meta tags.
  2. Creating your own short codes.
  3. Passing extra parameters to queries for fetching posts.

Here is how you begin:

  1. Create a PHP file called, say, custom-code.php. Put this file somewhere under your “wp-content” folder, but not under the “suffusion” folder. If you put it in the “suffusion” folder it will get overwritten upon an upgrade!
  2. Go to Suffusion Theme Options Blog Features Custom Includes Custom PHP. Put in the file name with the path, as instructed.
  3. Now for some serious business. Open the file you created in an editor. You could use any editor that you want (but not a Word Processor!!), like Notepad or Vim or Emacs or EditPlus or Textpad. Your choice depends on your individual preferences and your Operating System. I personally use Vim for editing minor things because of my Unix-based background, and a full-blown IDE like PhpStorm or Aptana Studio or Eclipse for the heavy-duty stuff.
    Now build the shell for the file as follows:
     * Custom includes

    Make sure that you have no white-spaces or new lines or text before the “<?php” or after the “?>”. This is critical. If you have spaces there, you will get nasty PHP errors that will require you to replace file/folder contents using FTP.

Now let us address each of our scenarios.

Scenario 1: Adding your own meta tags

This is something I have addressed on the support forum. Let’s say you want to create your own meta tags with name “my-custom-tag” and value “my-custom-tag-value”. Here is what your code looks like:

 * Custom includes
//The hook for publishing the document header is suffusion_document_header.
//This tells the code to add an extra action to suffusion_document_header:
add_action('suffusion_document_header', 'suffusion_include_custom_meta_tags');

function suffusion_include_custom_meta_tags() {
    echo "<meta name=""my-custom-tag"" content=""my-custom-tag-value"" />n";;

That’s it. You can add as many “echo” statements as you want in the “suffusion_include_custom_meta_tags” function.

Scenario 2: Creating your own Short Codes

The ability to use your own short codes with Suffusion speeds up things several notches. The following code is from one of my previous posts, and it demonstrates how to add a short code that will execute any PHP function. You can add it within the “<?php” and “?>” tags:

function sc_php_function($attr) {
    $function = $attr['function'];
    $params = $attr['params'];
    $params = explode("||", $params);

    if (is_callable($function)) {
        $ret = call_user_func_array($function, $params);

    return $ret;

add_shortcode('php-function', 'sc_php_function');

This will create a short code called “php-function” which is like RDX – it will let you execute any PHP function from within a post or a page.

The short code above is dangerous if you have a multi-user blog, or if you are using a plugin that enables short codes in the comments section, because it will let anyone execute any PHP function on your site – it is a significant security risk, so use it with utmost care!


Scenario 3: Passing extra parameters to queries for fetching posts

I recently introduced a hook called “suffusion_query_posts”. This hook is executed before your posts are parsed (aka The Loop), so you can use this to modify what you want to display. It is present on different templates, like Author, Category, Date, Index, Page of Posts, Search and Tag. Let’s say you want to exclude posts belonging to the category with id 15. Here is what you add in the PHP code in the file:

add_action('suffusion_query_posts', 'suffusion_query_enhancer');
function suffusion_query_enhancer() {
    global $wp_query, $query_string;
    $query_string .= "&cat=-15";

You could think of a lot of other scenarios where you could use the custom PHP inclusion. Note that like its more popular cousin, the Custom Styles, this too is upgrade-proof. It also adds to Suffusion the feel of a theme framework. If you are looking to add some functionality and you don’t see a hook for it, do post your query on the support forum.