Skip to content

Snippet: Add Custom Widget Area to Bottom of Sidebar Mobile Menu

// Add new widget area "toggle_sidebar"
add_action( 'widgets_init', function() {
	register_sidebar( array(
		'name'          => 'Toggle Sidebar',
		'id'            => 'mobile_menu_sidr_widgets',
		'before_widget' => '<div id="%1$s" class="sidebar-box widget %2$s clr">',
		'after_widget'  => '</div>',
		'before_title'  => '<div class="widget-title">',
		'after_title'   => '</div>',
	) );
}, 10 ); // Change the 10 priority to move it up/down on the widgets list

// If the "mobile_menu_sidr_widgets" widget area has widgets insert the widgets
// as html to the bottom of the site and hidden so they can be rendered
// inside the sidebar mobile menu via the theme's javascript
add_action( 'wp_footer', function() { 
	if ( ! is_active_sidebar( 'mobile_menu_sidr_widgets' ) ) {
		return;
	}
	echo '<div id="mobile-sidebar-widget-area" class="clr">';
		dynamic_sidebar( 'mobile_menu_sidr_widgets' );
	echo '</div>';
} );

// If the "toggle_sidebar" widget area has widgets add it to the list of
// elements to grab for the mobile sidebar menu
add_filter( 'totaltheme/mobile/menu/sidr/source', function ( $source ) {
	if ( is_active_sidebar( 'mobile_menu_sidr_widgets' ) ) {
		$source['mobile-sidebar-widget-area'] = '#mobile-sidebar-widget-area';
	}
	return $source;
} );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top