WordPress.org

Ready to get started?Download WordPress

Forums

In Appearance > Widgets, show sidebar default collapsed (3 posts)

  1. Chris
    Member
    Posted 1 year ago #

    I'm working with a theme framework that, when you go to the Appearance > Widgets page and view all available sidebars, the top one is by default "open." Meaning, you see all the widgets placed within the sidebar. Below this, the remaining sidebars are "closed."

    Visually I find this distracting, and I'm trying to find - deep in the framework - where it is defined to display the top sidebar is open/uncollapsed, so I can change this.

    It's a minor thing but a learning experience as well. Would this be in a different file for every theme? I found where the sidebar is registered, but there is no indication in the code that by default it is to display uncollapsed.

    Thanks for any tips.

  2. wpismypuppet
    Member
    Posted 1 year ago #

    I think I can assist with this... seems easy enough. First, you need to have a JavaScript file that will launch with the admin interface only. So we need to enqueue that file. In your functions.php file, add the following:

    <?php
    	if( is_admin() ) {
    		// Register our admin script files
    		wp_register_script( 'wp_admin_script', get_template_directory_uri() . '/scripts/wp-admin.js', array( 'jquery' ), '1.0', true );
    		// Include custom script files to wp-admin area
    		function custom_admin_scripts() {
    			wp_enqueue_script( 'jquery' );
    			wp_enqueue_script( 'wp_admin_script' );
    		}
    		add_action( 'admin_enqueue_scripts', 'custom_admin_scripts' );
    	}
    ?>

    Based on this code, you should create a file called "wp-admin.js" in a folder called "scripts" in your theme's folder. If you wish it to be somewhere else, change the code appropriately. Also, I know jQuery is usually already launched with WordPress, but it doesn't hurt to enqueue it just in case! The function will ignore it if it's already running, not duplicate it.

    The next piece you'll want to do is open that wp-admin.js file and add the following to it:

    jQuery(function(jQuery) {
    	if(jQuery('.widgets-holder-wrap').length > 0) {
    		jQuery('.widgets-holder-wrap').each(function() {
    			jQuery(this).addClass('closed');
    		});
    	}
    });

    What that code does is first checks to see if there are any elements on the page that have the ".widgets-holder-wrap" class. If so, loop through each of them and add the "closed" class to them. This will close ALL sidebars by default, but still allow the functionality of click to open/close them.

    If you only want to close the first one by default, let me know. It's a little more involved, but shouldn't be too hard.

  3. wpismypuppet
    Member
    Posted 1 year ago #

    Ok... so apparently my code will also close the "Available Widgets" and "Inactive Widgets" meta boxes, which I didn't notice right off the bat. If this is undesirable, and you only want the right side sidebar widgets to close, modify the code like so:

    if(jQuery('#widgets-right .widgets-holder-wrap').length > 0) {
    	jQuery('#widgets-right .widgets-holder-wrap').each(function() {
    		jQuery(this).addClass('closed');
    	});
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.