Mar 042012
 
How To

Often in the rigours of theme development an important aspect gets overlooked: documentation. To remedy this I often publish recipes and encourage users to contribute documentation.

One common request has always been, “What element should I be adding CSS for?” To address this I have put together a Markup and Hook Reference. The markup gives general layout information for various pieces on the Suffusion screen. There also an associated list of action and filter hooks. I will be updating this documentation over the next few weeks to make it more descriptive.

Feb 142012
 
How To

The nagging voice at the back of my head always told me that the theme page for Suffusion was too plain. At various points of time I thought of revisiting the layout of the page, but somehow it didn’t make any sense to redesign it with a ton of PHP in a child theme. So one of the things I constantly thought of while building version 4.0.0 was that the theme should be able to support product pages.

And that led to the birth of the Custom Layouts. I built the new theme page of Suffusion solely with widgets. Here are the basic steps:

  1. I first went to Suffusion Options → Templates → Custom Layout Template, then set the first widget area to have 2 columns and the second to have 3 columns.
  2. Next I created a dummy page and saved it as a draft, assigning the “Custom Layout” to it and setting it to follow the “0 sidebars” page layout. The reason I created a new page is because I was going to work on it during this process and I didn’t want the landing page of Suffusion to look wonky. I saved it as a draft because I didn’t want it published.
  3. I then went to Appearance → Widgets:
    1. I added a Featured Content widget and a text widget to the Custom Layout Widget Area 1.
    2. I added a handful of text widgets to the Custom Layout Widget Area 2.
  4. Now, I wanted to make a few changes to the defaults:
    1. I wanted the Featured Content to be about 650px wide and the text widget beside it had to be about 330px to allow some gap in between them. So I put this in the Custom Includes:
      #suf-featured-posts-3 { width: 650px; }
    2. I also wanted a patterned background for the text widget in Widget Area 1, and I wanted a nice “Call to Action” button. So I added this:
      #text-9 { width: 330px; 
      	background: url(http://aquoid.com/news/wp-content/uploads/2012/02/tan-1.png); 
      }
      a.call-to-action {
      	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      	text-transform: uppercase;
      	font-size: 16px;
      	color: #fff;
      	text-decoration: none;
      	background: #a90707;
      	padding: 0.5em 2em;
      	margin-top: 2em;
      	display: inline-block;
      	border-radius: 7px;
      	font-weight: bold;
      }
    3. I didn’t want the text widgets in the Widget Area 2 to have Arial bold headers. So I went to Suffusion Options → Typography → Content Headers, and picked “Quattrocento” for the H6 font. I also left the overall selection to use the theme defaults: this ensured that Quattrocento was loaded, but that it didn’t affect the H6 fonts. The next step was to apply this font to the widget headers and set appropriate margins:
      .cl-widget h3 {
      	font-family: Quattrocento, serif; 
      	font-weight: normal; 
      	font-size: 20px; 
      	margin-bottom: 20px; 
      } 
    4. Most text widgets in Widget Area 2 were to have a widget icon. Here is where I optimized and built a sprite with a bunch of images. Then I defined a “widget-icon” class:
      .widget-icon { 
      	float: left; 
      	margin-right: 1em; 
      	width: 64px; 
      	height: 64px; 
      	background: url(http://aquoid.com/news/wp-content/uploads/2012/02/Suffusion-sprite.png) no-repeat; 
      	text-decoration: none; 
      }
      .widget-icon:hover { 
      	text-decoration: none; 
      }
    5. The last piece of style setting again applied to the featured content. I wanted to get small boxes with Quattrocento headings, slightly separated from the edges:
      .sliderImage div { 
      	background-color: rgba(0, 0, 0, 0.75) !important; 
      	color: #ddd !important; 
      	width: 250px !important; 
      } 
      .sliderImage ins a { 
      	font-family: Quattrocento, serif; 
      	font-weight: normal !important; 
      	font-size: 16px; 
      }
      .sliderImage .right { 
      	right: 10px; 
      	bottom: 10px; 
      	border-radius: 5px; 
      }
  5. I then put the text that I wanted to in each widget, and linked up the appropriate icons, and that was it.
  6. When I was satisfied with how my page looked, I went to the page editor and pulled up the page for Suffusion. I assigned the “Custom Layout” template to it, and set it to follow 0 sidebars. I also toggled the breadcrumb display for the page and saved it. Since I have only one page using the Custom Layout template I didn’t have to do much in terms of putting conditions around widgets etc.

The end result is there for you to see. Hopefully you will be able to use this approach to make your own custom layouts.

Now, back to waiting for 4.0.0 to go live!

Aug 052011
 
How To

This is an easy one, thanks to the recently updated “Query Posts” widget. The “Query Posts” widget offers you a lot more in terms of what you can use it for, so be sure to play around with all the options there.

Here is what you do:

  1. Do not include the standard “Recent Posts” widget in your sidebar.
  2. Add the “Query Posts” widget to the sidebar.
  3. Set the number of posts you want to display.
  4. Set the order to be “Descending”, and order by “Creation Date”.
  5. Set the “Post Display Style” to be “Thumbnail and title” or “Thumbnail, title and excerpt”.
  6. Pick the right size for the thumbnail and pick an excerpt length.
  7. Set the categories to be shown as “Any Category”

That’s it.

~Fin~

Jul 252011
 
How To

One question that gets frequently asked on the Suffusion Support Forum is:

I am seeing this empty space to the left of my posts. I have tried everything, but I cannot get rid of it.

This is really easy to solve and takes just about a minute. This “problem” occurs if both the following happen:

  1. You are using the Minima Skin.
  2. You are not displaying any byline (meta) information.

To fix it:

  1. Go to Other Graphical Elements → Post and Page Bylines → Posts (Default/Standard post format) → Position of meta information (including date).
  2. Set it to display in the corners above/below the content.
  3. If you want to set this for other post formats or pages, apply the same setting for them as well.

~Fin~

Jun 102011
 
How To

Gauging by trending questions on the Support Forum, I decided to start a series of simple “How To” solutions. Each addresses an oft answered yet frequently asked question on different support forums. Unlike the broader spectrum “Recipes”, this will require little to no coding.

Here’s hoping that people will find the series useful.

To hide the search box in the navigation bar of Suffusion:

  1. Go to Suffusion Options → Sidebar Configuration → Right Header Widgets
  2. For “Show Search in Widget Area on right side of header”, set it to “Hide the Search”

~Fin~

Mar 032011
 
How To

The much maligned 3.7.7 release had some rather bright spots that got buried under the chaos of bugs. And judging by the support requests and false positives reported as bugs on the forum, I believe one of these features needs some elucidation.

How Many Sidebars?

One question I have had to fend with previous releases goes along these lines:

I want to have 2 sidebars on my front page, which is a Blog page, and no sidebars for the individual posts themselves.

The typical response to this used to be:

  1. Create a new static page.
  2. Assign it a template like Single Left, Single Right Sidebar from the right side of your Add Page or Edit Page screen.
  3. Go to Settings → Reading, and set the page you just created as the Home Page.

The above approach has limitations. The key shortcoming is that this way you can only create a static home page – not a dynamic page of posts.

So I introduced a way to get around this.

If you go to Sidebar Configuration → Sidebar Layout, you will see a section titled How Many Sidebars. This is your entry point to configuring this. What this lets you do is assign one layout by default to individual posts and pages, and force a dynamic view to adopt another layout.

Use Case: 2 Sidebars on the Blog Page, 1 on Category Views, 0 on Single Posts

To set this up, define the following options:

  1. Sidebar Configuration → Sidebar Layout → How Many Sidebars? → Default Views:
    Set this to 0.
  2. Sidebar Configuration → Sidebar Layout → How Many Sidebars? → Blog Page:
    Set this to Double Left – Will inherit settings of the "Double Left Sidebars" template, or whichever configuration you want to use.
  3. Sidebar Configuration → Sidebar Layout → How Many Sidebars? → Category Views:
    Set this to Single Left – Will inherit settings of the "Single Left Sidebar" template, or whichever configuration you want to use.
  4. Other Graphical Elements → Sizes and Margins:
    Set your widths for the content appropriately in this section. This will be used by your posts by default.
  5. Templates → Double Left Sidebars:
    (Or whichever configuration you picked in #2 above)
    Set your widths and dimensions appropriately. These will be used by your Blog Page now.
  6. Templates → Single Left Sidebar:
    (Or whichever configuration you picked in #3 above)
    Set your widths and dimensions appropriately. These will be used by your Category Views now.

That’s it. Your site will now show 0 sidebars for posts, but 2 for your Blog Page and 1 for your Categories.

Misconceptions

What I have seen happen on the Support Forum is that users tend to do this:

  1. Sidebar Configuration → Sidebar Layout → How Many Sidebars? → Default Views: Set to 2.
  2. Sidebar Configuration → Sidebar Layout → How Many Sidebars? → Blog Page: Set to Double Left – Will inherit settings of the "Double Left Sidebars" template.

At this point if you set the Sizes and Margins in Other Graphical Elements → Sizes and Margins, they will not affect your main page, because it has been configured to use the Double Left Sidebars template in the second step above. Instead, all you need to do is set the Blog Page to Inherit default number of sidebars. That way you will have consistency.

Another related misconception I have seen is more fundamental – users tend to explicitly assign a template to every view (such as categories, date archives etc) and then wonder what they should do for views that are not available (like something introduced by a plugin). This is a case of over-complicating the problem. If you have established a specific layout to your default view (like 1 sidebar, with the first sidebar positioned left), you must not assign the “Single Left Sidebar” to individual templates – that is pointless unless you want different column widths. Instead let everything inherit the default layout. Conversely if you want a single left sidebar layout for every link in your site, simply set the default view to have 1 sidebar with the first sidebar positioned left. Don’t worry about assigning templates to everything else because they will all use the default layout.

Sep 102010
 

With effect from version 3.7.5 of Suffusion any reference to Blog Features below should be read as Back-end Settings.

Thanks to Suffusion’s fairly complex back-end coding there are a few tips and tricks that will help you as a user use child themes effectively.

When Should I Use Child Themes?

The simplest use case I can think of for using child themes is if you have BuddyPress on a WP-MS (WordPress Multi-Site) configuration, because you will want to use the Suffusion BuddyPress Pack and you would want to prevent its files from getting overwritten every time you upgrade the theme.

Apart from that if you have significant changes that you want to  make to the layout, which cannot be accommodated through CSS alone, using a child theme is a very clean and elegant way to do it.

What Should I Know While Using Child Themes in Suffusion?

In this post I will highlight two tips and tricks regarding child themes in Suffusion.

  1. Import CSS
    As per WordPress guidelines this is the generic header of a child theme’s style.css should look like this:

    /*
    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");

    But here is a catch. You are typically going to select a skin for Suffusion. If so, you will have multiple stylesheets included in your page, depending on your skin:

    1. For light themes (if the theme is Gray Shade 1 on a light background): style.css → skins/light-theme-gray-1/skin.css
    2. For dark themes (if the theme is Gray Shade 1 on a dark background): style.css → skins/light-theme-gray-1/skin.css → dark-style.css → skins/dark-theme-gray-1/skin.css
    3. For Minima (and future skins): style.css → skins/minima/skin.css

    Note that this entire stylesheet hierarchy is loaded before your child theme is loaded, because of the complexity of the design. So by including your import statement you are actually re-inserting the base style.css file after all the other stylesheets. That will naturally cause display issues.

    As it turns out, the fix is easy. You have many options, actually:

    1. Go to Blog Features → Child Themes and set it to not inherit any stylesheets. You can then pick and choose your stylesheet declarations in this manner:
      /*
      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");
      @import url("../suffusion/skins/minima/skin.css");
      

      This way you are telling the theme to ignore the skin selection and you are handpicking the skins you want. Note that this method requires some familiarity with the theme’s internals.

    2. The second option works if you are using Suffusion’s internal optimization features from Blog Features → Site Optimization → Use Compression for CSS. You can choose to use either of the methods with GZIP compression. In addition, set the Blog Features → Child Themes to inherit the stylesheets. This method ignores any import statements that you might have in your child theme’s style.css
    3. The third method is even simpler. You can leave your Blog Features → Child Themes to inherit the stylesheets. But simply don’t put any @import statements in your style.css. That’s all. This is best suited if you are using the child theme as a replacement for the Custom Styles option.

  2. BuddyPress tag

    This is a very simple trick for using Suffusion with the Suffusion BuddyPress Pack. I have explained this trick on the BP Pack page too. If you are running WordPress in a multi-site mode and you want to use Suffusion, here is what you will see if you activate Suffusion as your default theme:

    You’ll need to activate a BuddyPress compatible theme to take advantage of all of the features. We’ve bundled a default theme, but you can always install some other compatible themes or upgrade your existing WordPress theme.

    Here is what you do to fix this message:

    1. Create a child theme with the following header:
      /*
      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
      Tags: buddypress
      */
      

      The last line is very important. It tells WP that your theme is BuddyPress-compatible.

    2. Download the files for the Suffusion BuddyPress Pack and put them in your child theme’s folder.
    3. Activate the child theme. The message goes away!!

    I could have added the "buddypress" tag to Suffusion by myself, but that really really slows down the approval of the theme. In fact I had added the tag in a prior version, but disappointed with the delay in it getting approved I separated BP support from the core theme.

  3. Sidebar Management

    This is a very cool trick if you want to create your own templates with different sidebars etc. I introduced this feature in version 3.6.6 after an interesting discussion on the support forum. Note: You don’t need to do all of this if you are adding a regular template that has the same number of sidebars as the rest of your site.

    The core of the requirement is that you might want to create your own templates that have specific arrangements of sidebars and other widget areas. For example you might create a template for a custom post type that uses 1 sidebar while the rest of your site uses 2 sidebars. How would you tell Suffusion that this template has 1 sidebar? Given that all components of Suffusion are fixed-width, you cannot simply avoid calling a sidebar function – that will result in an empty space.

    So how is this to be done? The answer: using filter hooks. I introduced two filter hooks in 3.6.6 – suffusion_filter_template_prefixes and suffusion_filter_template_sidebars. In the functions.php file of your child theme, put in this code:

    <?php 
    add_filter('suffusion_filter_template_prefixes', 'my_custom_template_prefixes');
    function my_custom_template_prefixes($template_prefixes) {
        if (is_array($template_prefixes)) {
            $template_prefixes['my-custom-template-1.php'] = false;
            $template_prefixes['my-custom-template-2.php'] = false;
            // In the above replace my-custom-template-1.php etc with the name of your template file.
            // For every custom template that has specific sidebar requirements create a line such as the above.
        }
        return $template_prefixes;
    }
    add_filter('suffusion_filter_template_sidebars', 'my_custom_template_sidebars');
    function my_custom_template_sidebars($template_sidebars) {
        if (is_array($template_sidebars)) {
            $template_sidebars['my-custom-template-1.php'] = 1;
            $template_sidebars['my-custom-template-2.php'] = 1;
            // In the above replace my-custom-template-1.php etc with the name of your template file and "1" with the number of sidebars you need.
            // For every custom template that has specific sidebar requirements create a line such as the above.
        }
        return $template_sidebars;
    }
    ?>
    

    Be careful about not putting any empty spaces or new lines before and after the php tags! Otherwise you will get the notorious white screen of death.

    Once you have this code in place, you can have your custom templates in your theme with their unique sidebar arrangements, and not worry about Suffusion updates overwriting them.

Note that the last feature is not currently available, but it should soon be, based on when the next version is approved.

As I find more use cases of this sort I will post them for your consideration.

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 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>
	<ul>

	<!-- 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.  -->
	<ul>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ul>
	</div>

	<!-- 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>
	</div>

	<!-- 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>
	</div>

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

</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.sidebar-tab-content-first').show();
$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');
	$j(this).addClass('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(this).addClass(parentClass);
	$j(this).appendTo(this.parentNode.parentNode.parentNode);
}); 

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

$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.sidebar-tab-content-first').show();
$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(){
	$j(this).removeClass('tab-current');
	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');
	$j(this).addClass('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.