Manage a Boatload of WordPress Sidebars With Help From jQuery

I recently finished a project that pushed WordPress farther than I have ever before. Essentially, each of the 18 categories was a micro-site with its own styling and two widgetized areas. That means 36 different widgetized sections! When viewing the Widget page in the WordPress Dashboard, the list of widget areas extended quite a bit below the fold. This made adding and managing the widgets extremely cumbersome. The obvious solution was to display only one widget area at a time.

Fleshing Out The Solution

Before writing any code, I like to flesh out the basics to my solution on paper. Some simple brainstorming lead me to the following goals:

  1. Create an array of all the widget areas available
  2. Hide all the listed widget areas besides the first
  3. Insert into the Widget page a drop-down box containing a list of the widget areas in our array
  4. Whenever a user selects a widget area from the drop-down box, show that one and hide the  rest

Loading Our Javascript File

We’ll begin by creating a file named widget-admin.js. Save this file somewhere in your theme directory. I prefer to keep all my JavaScript files in the js/ sub-directory. We only want this code to be loaded if we are on the Widgets page of the WordPress dashboard. To achieve this, add the following code to your functions.php file.

// Custom Admin Sidebar Switcher
function sidebar_switcher() {
	global $pagenow;
 
	if ($pagenow == 'widgets.php')
		wp_enqueue_script('fca_admin', get_bloginfo('template_url').'/js/widget-admin.js');
}
add_action('admin_print_scripts', 'sidebar_switcher');

By latching onto WordPress’s admin_print_scripts hook, our sidebar_switcher() function will only be run when we are in the dashboard. The sidebar_switcher() function checks if we are on the Widgets page. If we are, it tells WordPress to queue up our widget-admin.js file.

Letting jQuery Work It’s Magic

The following code goes into the widget-admin.js that we created earlier. The comments should make it self-explanatory.

jQuery("document").ready(function(){
	var sidebars = new Array(); // Create array to hold our list of widget areas
	var selectorHTML, name; // Declaring variables isn't necessary in JavaScript, but it's good practice
 
	jQuery('.widget-liquid-right .sidebar-name h3').each(function(index) {
		name = jQuery(this).html(); // Get the name of each widget area
		name = name.replace(/\s*<span>.*<\/span>/,''); // Remove extra <span> block from name
		sidebars.push(name); // Add the name to our array
	});
 
	jQuery('.widget-liquid-right .widgets-holder-wrap').hide(); // Hide all the widget areas in list
	jQuery('.widget-liquid-right .widgets-holder-wrap:first').show(); // Show the first
 
	// Start <select> block. Position to the right of the "Widgets" heading.
	selectorHTML = "<select id=\"sidebarSelector\" style=\"position: absolute; left: 400px; top: 68px;\">\n";
 
	var count = 0;
	for ( var i in sidebars ) // Add option for each widgetized area
		selectorHTML = selectorHTML + "<option value=\"" + count++ + "\">" + sidebars[i] + "</option>\n"; // Store the index of the widget area in the 'value' attribute
 
	selectorHTML = selectorHTML + "</select>"; // Close the <select> block
 
	jQuery('div.wrap').append(selectorHTML); // Insert it into the DOM
 
	jQuery('#sidebarSelector').change(function(){ // When the user selects something from the select box...
		index = jQuery(this).val(); // Figure out which one they chose
		jQuery('.widget-liquid-right .widgets-holder-wrap').hide(); // Hide all the widget areas
		jQuery('.widget-liquid-right .widgets-holder-wrap:eq(' + index + ')').show(); // And show only the corresponding one
	});
});

Conclusion

When pushing WordPress to it’s limit, it may occasionally be necessary to enhance its user interface. With the power of jQuery and WordPress’s action and filter hooks, the sky is the limit.

12 Comments

  1. MattJune 30, 2010

    Very interesting … Great site by the way I’m totally new to Word Press but have used jQuery a bit in custom web projects and I love it… being able to marry both … We that rocks my world.
    Thanks

     
  2. Chris MurphyOctober 24, 2010

    Nice implementation–one small edit you might want to make to your script:

    name = jQuery(this).text();//.html(); // Get the name of each widget area
    //name = name.replace(/\s*.*/,”); // Remove extra block from name

    You don’t need to deal with the extra processing to remove the html tags from the titlebar you captured. Simply use .text() to extract the string ;)

    I’ve left your original code intact, with my edits in place to show you what I mean.

     
  3. DMV VANovember 14, 2010

    Made my night. I’m finding your most recent posts now

     
  4. davidknightFebruary 25, 2011

    Hi
    Great code, I was wondering if you had any ideas of anyway you could break the output down into areas rather than single widget areas, so you could show all the header widget areas at once, or all the footer areas at once. Any help or pointers you could give would be wonderful! thanks!

     
  5. AliceJuly 18, 2011

    Thank you for your information. Nice read.

     
  6. Johnny SmithSeptember 22, 2011

    Exceedingly revealing cheers, I think your current subscribers might want even more posts along these lines maintain the good hard work.

     
  7. Colorado Springs DentistSeptember 28, 2011

    Great article and nice read. I’ll incorporate the ideas into our dental website.

     
  8. Dental Website DesignerSeptember 28, 2011

    We design dental websites and other online marketing for dentists and the JQuery idea is something I may try using in the future. Nice article, thanks.

     
  9. Alternative health was the “only” route I considered for this challenge. Are you still debating? Wishing for more? | kristiegarcia's IreallybelieveOctober 15, 2011

    [...] Health And Medicine. Magnet therapy seeks to align and purify negative ions from within the body. My ace in the hole was rooted in this post. Over time, wearing a magnetic product will help align the ions within your body and reduce pain, [...]

     
  10. Alternative health treatment information that is easy to understand with healthy solutions to your health concerns. Read and grow rich. Interested? | eloiseblackwell's IreallybelieveOctober 17, 2011

    [...] an all-natural renewable product out there that can help heal your joints and muscles? Been there, done that. It is projected that a little over 33% of the United States population are practicing some form of [...]

     
  11. Do you feel using alternative health is dangerous. It is really not a mystery. The best methods. | In All But NameNovember 28, 2011

    [...] the human body. Many struggle with some kind of physical injury, joint problem, or persistent pain. A good year is determined by its spring. That’s right, magnets! Magnet therapy has been used to supplement treatment for all sorts of [...]

     
  12. Vivian KuhlsDecember 14, 2011

    Thank you for sharing this. Well done and very informative.

     

Leave a Reply