How To Use JQuery To Manage Wordpress Sidebars

How To Use JQuery To Manage Wordpress Sidebars ?

Today i will tell you that how we can use JQuery to manage wordpress sidebars, recently i finished a work that pushed Wordpress farther than i have ever before. Essentially, each of the 18 categories was a micro-site with its own stylish and two widgetized areas.

That means 36 different widgetized sections !

When viewing the Widget page in the Wordpress Dashboard, the list of widget areas extend 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 may solution on paper. Some simple brainstorming lead me to the following goals.

• Create an array of all the widget areas available.


• Hide all the listed widget areas besides the first.


• Insert into the widget page a drop-drown box containing a list of the widget areas in our array.


• Whenever a user selects a widget area from the drop-down box, show that one and hide the rest.

We'll begin by creating 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 function.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 widget page. If we are, it tells Wordpress to queue up or 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
	});
});