How To Easily Manage Wordpress Slidebar Using 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.

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.

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.

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

});

});

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.