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.

22 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.

     
  13. I’m suffering and need help with Alternative Therapy for Cholera with current information?April 9, 2012

    [...] and illness? Many struggle with some kind of physical injury, joint problem, or persistent pain. Keep your nose to the grindstone. Over time, wearing a magnetic product will help align the ions within your body and reduce pain, [...]

     
  14. Kendall SchlappiApril 14, 2012

    WordPress is a great platform, particularly if you have some programming skills. I recommend the thesis theme to newbies as it makes configuring wordpress so much easier

     
  15. How do I find the best side effects of tuberculosis that gives me what I really need? @ Blow One'S Own HornApril 17, 2012

    [...] by physicians or non-physicians, as an additional to or apart from the conventional medicine. Beauty is in the eye of the beholder. For example, do you have problems with an ankle, knee, shoulder or back injury? The best part about [...]

     
  16. This is legitimate info on somatic tinnitus and I can trust it? | Life Of The PartyApril 23, 2012

    [...] you cannot see. Many struggle with some kind of physical injury, joint problem, or persistent pain. How long does it really take to do something like this? Over time, wearing a magnetic product will help align the ions within your body and reduce pain, [...]

     
  17. How do I find the best Alternative Therapy for Coughing and I can trust it? « Run Like The WindApril 27, 2012

    [...] an all-natural renewable product out there that can help heal your joints and muscles? A fountain of energy. Believe it or not there are wide variety of braces available with magnets for use with specific [...]

     
  18. Ed NailorMay 16, 2012

    Great idea and implementation. I took this a little further in terms of making it fit in nicely. When I added the scripting, the select box popped up in a weird location. I wanted it to be more in line with the widget boxes it was changing. So the following changes made it happen:

    Around Line 15:
    selectorHTML = “Choose: \n”; // Placed Select in a div, same width as the widget box and moved it to above the boxes

    Around Line 21:
    selectorHTML = selectorHTML + “”; // Close the and the

    End of Script, I added the following to push the widget box down allowing me room for my selection box:
    jQuery(‘.widget-liquid-right’).css( “margin-top”, “+=50″ );

    With these few changes, now the Select dropdown lines up with the Widget Boxes, and a small line of text tells the user to Choose.

    Thanks again!
    Ed

     
  19. Ed NailorMay 16, 2012

    Yikes… Ate my code…
    Try this again:

    Line 15:
    selectorHTML = "Choose: \n";

    Line 21:
    selectorHTML = selectorHTML + ""; // Close the block

    Added to end:
    jQuery('.widget-liquid-right').css( "margin-top", "+=50" );

     
  20. Ed NailorMay 16, 2012

    One last time…

    Line 15:

    selectorHTML = "Choose: \n";

    Line 21: 

    selectorHTML = selectorHTML + ""; // Close the  block

    Added to end:

    jQuery('.widget-liquid-right').css( "margin-top", "+=50" );

     
  21. Managing Many WordPress Widgets | Ed NailorMay 16, 2012

    [...] it all together. These are the touches I added to the script. The original script is provided by SoulSizzle. Be sure to check this site out too, as there is some great stuff [...]

     
  22. Ed NailorMay 16, 2012

    Since I can not post code in the comments, I have posted the modified code on my website: http://ednailor.com/2012/05/16/managing-many-wordpress-widgets/

    Thanks
    Ed

     

Leave a Reply