Move Wordpress Admin Collapse Menu

Hi - I am trying to move the wordpress admin collapse menu button to the top admin bar but having trouble doing so.

This is what I have added to my functions.php file but it isn't working properly.

function collapse_menu_button($wp_admin_bar){
    $args = array(
        'id' => 'collapse-button',
        'title' => '<button type="button" id="collapse-button" aria-label="Collapse Main menu" aria-expanded="true"><span class="collapse-button-icon" aria-hidden="true"></span><span class="collapse-button-label">Collapse menu</span></button>',
        'meta' => array(
            'class' => 'collapse-button-label'
        )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'collapse_menu_button', 0);

What do I need to edit in this so that it will work properly?

Thank you!

  • Predrag Dubajic

    Hey Boyd,

    The code you provided above actually works for me and adds the collapse menu in admin bar but the button itself doesn't work.

    What I would suggest is trying with moving the item with some jQuery so it keeps its functionality.

    Adding this to your child theme functions.php should do the trick:

    function collapse_menu_button() { ?>
    
    	<script type="text/javascript">
    		jQuery( document ).ready(function() {
    		    var element = jQuery('#collapse-menu').detach();
    			jQuery('#wpadminbar').prepend(element);
    		});
    	</script>
    	<style type="text/css">
    		#wpadminbar #collapse-menu {
    		    width: 130px;
    		    list-style: none;
    		}
    		.folded #wpadminbar #collapse-menu {
    		    width: 30px;
    		    list-style: none;
    		}
    	</style>
    
    <?php }
    add_action('admin_head', 'collapse_menu_button', 0);

    Best regards,
    Predrag