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~

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~

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~

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.

What is a Short Code?

A short code is a macro code introduced in WordPress 2.5. When inserted into regular content, the short code executes a piece of associated PHP code that prints out specific output. The most common example of short codes is the “gallery” short code provided by WordPress out of the box.

The following is the list of short codes provided within Suffusion:

1. Short code: [suffusion-categories]
   Brief Description: Used to print a list of categories.
   Parameters and Usage: This takes most if not all parameters of the WP call for wp_list_categories().
   Use Case: If you want to display the list of categories from within a post. Since you can use most options of wp_list_categories, this is as powerful as running a query in the back-end.
2. Short code: [suffusion-the-year]
   Brief Description: Prints the current year.
   Parameters and Usage: This doesn’t take any parameters. Simply invoking [suffusion-the-year] prints the current year. This is generated by the short code: 2012.
   Use Case: If you want the current year to be shown in the copyright.
3. Short code: [suffusion-site-link]
   Brief Description: Prints the link to your site.
   Parameters and Usage: This doesn’t take any parameters. Simply invoking [suffusion-site-link] prints the title of your site and links it to your site. This is generated by the short code: Aquoid Themes.
   Use Case: If you want to print the title of your site with a URL linking to it.
4. Short code: [suffusion-the-author]
   Brief Description: Used to print information about the author of a post.
   Parameters and Usage: This takes one parameter, display. Depending on the value of display certain information is printed about the author of a post. The display parameter could have any of the following values:
   • author – Displays the display name of the author of the post
   • modified-author – Displays the display name of the author who modified the post
   • description – Displays the biographical information set in the author’s profile
   • login – Displays the login name of the author of the post
   • first-name – Displays the first name of the author of the post
   • last-name – Displays the last name of the author of the post
   • nickname – Displays the nickname of the author of the post
   • id – Displays the id of the author of the post
   • url – Displays the URL of the author of the post. This is only the URL, hence it needs to be suitably combined with the name of the author for a meaningful display
   • email – Displays the email of the author of the post
   • link – Displays the name of the author of the post, linking to the author’s URL
   • aim – Displays the AIM details of the author of the post. For this to work the AIM account details should be set in the user profile section of the author.
   • yim – Displays the Yahoo details of the author of the post. For this to work the Yahoo account details should be set in the user profile section of the author.
   • posts – Displays the number of posts written by the author of the post.
   • posts-url – Displays the URL for all posts by the author. Since this is only a URL, it might need to be combined with some more meaningful text for a better display.
   • twitter – Displays the link to the Twitter URL of the author of the post. Requires you to set up Twitter as a user contact method from Blog Features → User Profiles
   • facebook – Displays the link to the Facebook URL of the author of the post. Requires you to set up Facebook as a user contact method from Blog Features → User Profiles
   • technorati – Displays the link to the Technorati URL of the author of the post. Requires you to set up Technorati as a user contact method from Blog Features → User Profiles
   • linkedin – Displays the link to the LinkedIn URL of the author of the post. Requires you to set up LinkedIn as a user contact method from Blog Features → User Profiles
   • flickr – Displays the link to the Flickr URL of the author of the post. Requires you to set up Flickr as a user contact method from Blog Features → User Profiles
   • delicious – Displays the link to the Del.icio.us URL of the author of the post. Requires you to set up Del.icio.us as a user contact method from Blog Features → User Profiles
   • digg – Displays the link to the Digg URL of the author of the post. Requires you to set up Digg as a user contact method from Blog Features → User Profiles
   • stumbleupon – Displays the link to the StumbleUpon URL of the author of the post. Requires you to set up StumbleUpon as a user contact method from Blog Features → User Profiles
   • reddit – Displays the link to the Reddit URL of the author of the post. Requires you to set up Reddit as a user contact method from Blog Features → User Profiles

   The following invocation of the short code:

   [suffusion-the-author display='author'] has written <a href='[suffusion-the-author display='posts-url']'> [suffusion-the-author display='posts'] posts</a>.
   He can be followed on <a href='[suffusion-the-author display='twitter']'>Twitter</a>.

   produces:

   Sayontan has written 166 posts. He can be followed on Twitter.

   Use Case: If you want to insert author-specific information at the bottom of a post, like the number of articles, a brief description etc.

5. Short code: [suffusion-the-post]
   Brief Description: Used to print information about a post, like the id, title and permalink.
   Parameters and Usage: This takes one parameter, display. Depending on the value of display a certain piece of information is displayed. The following invocation:

   This post has an id [suffusion-the-post display='id']. Its permalink is [suffusion-the-post display='permalink'] and the title is [suffusion-the-post display='title'].

   produces:

   This post has an id 808. Its permalink is http://aquoid.com/news/2010/09/wordpress-short-codes-in-suffusion/ and the title is WordPress Short Codes in Suffusion.

   Use Case: If you want to insert post-specific information at the bottom of a post.

6. Short code: [suffusion-login-url]
   Brief Description: Prints the login URL for the site.
   Parameters and Usage: This takes no parameters.
   Use Case: If you don’t want the Meta widget, but want to show a login URL
7. Short code: [suffusion-logout-url]
   Brief Description: Prints the logout URL for the site.
   Parameters and Usage: This takes no parameters.
   Use Case: If you don’t want the Meta widget, but want to show a logout URL
8. Short code: [suffusion-loginout]
   Brief Description: Prints the URL to login if logged out or logout if logged in.
   Parameters and Usage: This takes no parameters.
   Use Case: If you don’t want the Meta widget, but want to show a URL to logout if a user is logged in and vice versa.
9. Short code: [suffusion-register]
   Brief Description: Prints the URL to register as a member of the site.
   Parameters and Usage: This takes no parameters.
   Use Case: If you don’t want the Meta widget, but want to show a registration URL
10. Short code: [suffusion-adsense]
    Brief Description: Prints AdSense code based on specified parameters.
    Parameters and Usage: This takes four parameters: client, slot, width and height. It inserts the corresponding ad when invoked. I don’t have an AdSense account, so I cannot demonstrate this, though.
    Use Case: If you want to insert an advertisement in the body of a post.
11. Short code: [suffusion-tag-cloud]
    Brief Description: Prints a tag cloud.
    Parameters and Usage: This takes three parameters: smallest, largest and number, respectively indicating the smallest font size (default 8), the largest font size (default 22) and the number of tags to display (default 45).
    Use Case: If you are not satisfied with the default “Tag Cloud” widget and would like more control over how many tags to display and in what sizes. You could use this in a text widget too, to simulate the tag-cloud widget.
12. Short code: [suffusion-widgets]
    Brief Description: Prints an ad hoc widget area, based on specified parameters.
    Parameters and Usage: To use this short code you first have to go to Appearance → Widgets, then fill in the widgets you want in the widget areas titled Ad Hoc Widgets 1, Ad Hoc Widgets 2, … Ad Hoc Widgets 5. You don’t need to put widgets in all of them – just put them in the ones you want to use. The short code takes 3 parameters – id, container and container-class. You could invoke the short code thus:

    [suffusion-widgets id='2' container-class='custom-class']

    This prints the widget area for Ad Hoc Widgets 2 and assigns the widget area a class called ‘custom-class’. If you pass the container parameter with a value 'false' then the widgets are not put in any container (and the container-class parameter is ignored).
    Use Case: If you want to display some widgets from within a post.

13. Short code: [suffusion-multic] and [suffusion-column]
    Brief Description: This was introduced in version 3.6.0 to support multi-column layouts. These short codes are dependent on each other.
    Parameters and Usage: The [[suffusion-multic] short code takes no parameters and is used as a container indicating that you have a multi-column layout within. The [suffusion-column] short code takes the parameter width, which could have values 1, 1/2, 1/3, 1/4, 2/3, 3/4, 100, 050, 033, 025, 066 and 075, indicating what fraction of the width is to be taken up by a column. The default is 1. This is how you can use the short code:

    [[suffusion-multic]
      [suffusion-column width='1/2']A column with 1/2 the total width [/suffusion-column]
      [suffusion-column width='1/4']A column with 1/4 the total width[/suffusion-column]
      [suffusion-column width='1/4']Another column with 1/4 the total width[/suffusion-column]
    [/suffusion-multic]

    This is how the above looks:

    A column with 1/2 the total width

    A column with 1/4 the total width

    Another column with 1/4 the total width
    
    Mind you, WP has a nasty habit of inserting <p> tags at line breaks, so you might have to be careful about stripping out new lines from the above code before using it.

This list will be expanded as more short codes are added to Suffusion. As usual, please don’t post support queries here. Use the Support forum instead.

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.

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.

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.

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:

   <?php
   /**
    * 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:

<?php
/**
 * 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.

1. Page Links To, Redirection
   ”Page Links To” and “Redirection” are two plugins for the same purpose – creating pages that redirect elsewhere. On the surface this appears like no big deal, but once you scratch the surface you realize the power that this kind of a feature offers you. For starters, you can create new pages that point to just about anything: external links, specific posts, categories, tags – you name it. Combine this with the fact that you can define parent pages for pages, and you will have a neat hierarchical structure created with minimum fuss. Take this hierarchical structure and make a navigation menu out of it – it is that simple to create a truly custom navigation menu.
   I have used “Redirection” myself and found that it works pretty well, however some of the theme’s users have reported problems with it. I have, since then, started recommending the “Page Links To” plugin.
2. Widget Logic
   One frequently asked question on the support forums is regarding having different sidebar contents for different pages. The answer to all such questions is the rather intuitive Widget Logic plugin. Widget Logic lets you control each widget’s presence in a page or post or view, so you can very easily achieve the kind of sidebars you are looking for.
3. Exec-PHP
   The Exec-PHP plugin lets you run snippets of PHP code wherever you want. So you are no longer restricted to writing HTML / JavaScript code in widgets – you can use PHP as well.
4. My Page Order, My Link Order, My Category Order
   Suffusion natively supports these plugins. As their names suggest, My Page Order lets you define a custom order for your pages, My Category Order lets you define a custom order for your categories and My Link Order lets you define a custom order for your links. The plugins offer drag-and-drop interfaces, so changing the sequence is really easy. The order you set is automatically pulled up in the navigation menus of Suffusion.

Any more that you would like to pitch in?