Skip to content

Snippet: Add New Widget Area Above Content on Mobile

This code will register a new widget area (Mobile Sidebar) above your site content for mobile only (to display at your mobile menu breakpoint).

/**
 * Registers new widget areas (this could also be done via Appearance > Widget Areas).
 *
 * @link https://total.wpexplorer.com/docs/snippets/mobile-sidebar-above-content/
 */
add_filter( 'wpex_register_sidebars_array', function( $sidebars ) {
	$sidebars['my_mobile_sidebar'] = __( 'Mobile Sidebar', 'total' );
	return $sidebars;
} );

/**
 * Insert custom widget area above the site content.
 *
 * @link https://total.wpexplorer.com/docs/snippets/mobile-sidebar-above-content/
 */
add_action( 'wpex_hook_content_before', function() {
	if ( ! is_active_sidebar( 'my_mobile_sidebar' ) ) {
		return;
	}

	echo '<div id="my-mobile-sidebar" class="show-at-mm-breakpoint">';
		dynamic_sidebar( 'my_mobile_sidebar' );
	echo '</div>';
} );
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