SideMenu

SideMenu

This plugin works really well with new FSE (Full Site Editing) themes such as Twenty Twenty-Two. Check out the menu in the Rye website for an example real-world use of this lightweight plugin!

This plugin will inject a responsive SideMenu sidebar and menu location into your theme that you can add widgets to.

The SideMenu is opened by clicking on a menu button that you can add to any menu in your site.

When the SideMenu slides open, the entire site is dimmed and slid to the left.

The SideMenu is closed by either clicking the close icon at the top right of the SideMenu, clicking on the dimmed site or by scrolling down.

This plugin can also hijack the existing mobile menu button within your theme if required. Themes that already work with this feature are …

• Astra
• Auction Theme (AT10)
• BeTheme
• Divi
• Inspiro
• OKAB
• Twenty Seventeen
• Twenty Twenty
• Twenty Twenty-One
• Twenty Twenty-Two
• Varia (and child themes like Rockfield)

… ask us in the SideMenu Support Forum to add your theme!

You can also enable a “Mega Menu” style dropdown menu feature.

How to use the SideMenu block

The SideMenu block to show the button to open the SideMenu. The optional title attribute is the text that is shown on the button.

Please note that for the meantime, all options are still found in “Customizer – SideMenu”.

How to use the [sidemenu] shortcode

• Use [sidemenu] to just show the default button
• Use [sidemenu]My Button Title[/sidemenu] or [sidemenu title=”My Button Title”] to show the button with your own text
• Use [sidemenu class=”my-class” title=”Filtered SideMenu Button”] to show a button which only shows widgets or menu items with the specified class

To add a class to a menu item in “Dashboard – Appearance – Menus” click “Screen Options in the top right hand corner of the screen and tick “CSS Classes”. The menu items will then show a “CSS Classes” field when expanded.

To see the class of a widget in “Dashboard – Appearance – Widgets”, expand the widget that you’ve added to the SideMenu widget area and the class name is shown at the bottom. Since WordPress v5.8 with the new Block Widget Editor, it’s super easy to set a custom CSS class for each block, just select the block and in the block options on the right, scroll to the bottom and expand “Advanced” where you can add them into “Additional CSS class(es)”.

This video will help to explain how to use classes to control the content of the widget …

To use a link as a button to open the SideMenu, set the class attribute of the link to be “open_sidemenu” <a href="#" class="open_sidemenu">Example Link</a>. You can add classes to the element to control what content is shown as with the shortcode.

To use an anchor link to open the sidemenu, set the link to be “#open_sidemenu”. This doesn’t require a class to be set. To control what content is shown, add a dash and the class of the element(s) to be shown, for example “#open_sidemenu-testclass”.