Add Widget Area in Mobile Menu

This is a Developer Level doc.

If you're unfamiliar with PHP and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

If you want to display custom content in mobile menu, then you need to register a widget area for it. Follow the below steps to do it:

1. Install and activate the OceanWP child theme

2. Copy the mobile-nav.php file from the oceanwp > partials > mobile folder into the child theme following the same path

3. Open the child theme's functions.php file and add the below code there to register the widget area -

function mobile_menu_widgets_init() {
 register_sidebar( array(
 'name' => 'Mobile Menu Widget',
 'id' => 'widget_area' ) );
}
add_action( 'widgets_init', 'mobile_menu_widgets_init' );

4. Open the copied mobile-nav.php file and add the below code like in the screenshot -

<?php if ( is_active_sidebar( 'widget_area' ) ) : ?>
<div id="mobile-menu-widget-area" class="mobile-menu-widget widget-area" role="complementary">
    <?php dynamic_sidebar( 'widget_area' ); ?>
</div>
<?php endif; ?>

5. Go to Dashboard > Appearance > Menus and also enable the mobile menu (optional) checkbox for your menu.

6. Now go to Dashboard > Appearance > Widgets and add a widget in the registered Mobile Menu Widget area.

Add Widget Area in Mobile Menu

Related Articles