How It Works

The plugin uses a shortcode ( or ) to render WordPress menus based on user-defined attributes. Key steps include:

• Menu Selection: Specify a menu by its slug (e.g., name="main-menu") from Appearance > Menus.
• Customization: Apply attributes like theme, style, or depth to control appearance and structure.
• Dynamic Rendering: Generates HTML for menus, supporting inline or list layouts and nested submenus.
• Theme Styling: Loads CSS for selected themes (e.g., Modern Horizontal, Dark Mode) only when the shortcode is used.
• Accessibility: Adds ARIA labels and aria-current for screen reader support.
• Multilingual Support: Uses the lang attribute for compatibility with WPML or Polylang.
• Page Builder Integration: Provides blocks, widgets, or modules for popular page builders.
• Fallback Handling: Displays custom text if the specified menu doesn’t exist.

Why Use OOW Custom Menu Shortcode?

• Flexible Placement: Add menus to posts, pages, or widgets via shortcode.
• Predefined Themes: Choose from 10 styles like Minimalist or Dark Mode for instant styling.
• Real-Time Preview: Preview menus in the Shortcode Assistant before publishing.
• Nested Menus: Display submenus with customizable depth.
• Page Builder Support: Works seamlessly with Gutenberg, Elementor, Divi, and WPBakery.
• Multilingual Ready: Supports WPML and Polylang for localized menus.
• Accessible Design: Enhances usability with ARIA labels and semantic markup.
• Performance Optimized: Loads CSS only when needed for faster page loads.
• User-Friendly: Modern admin UI with light/dark theme toggle.

Shortcode Assistant

The Shortcode Assistant, accessible at OOWCODE > OOW Menu Shortcode > Shortcode Generator, provides an interactive interface to:

• Select Menus: Choose from available menus created in Appearance > Menus.
• Customize Options: Set style (list/inline), theme, depth, separator, and more.
• Preview in Real-Time: See how the menu looks with selected themes and settings.
• Generate Shortcode: Automatically create the shortcode and copy it to your clipboard.

To use:

1. Navigate to the Shortcode Generator tab.
2. Fill in fields like Menu Name, Style, and Theme.
3. Preview the menu instantly in the Live Preview panel.
4. Click Generate Shortcode and copy the result (e.g., ).

Shortcode Attributes

The shortcode supports multiple attributes to customize menu display. Below is a detailed breakdown:

Page Builder Integration

The plugin integrates with popular page builders for easy menu placement:

• Gutenberg: Use the OOW Custom Menu block to add menus in the block editor.
• Elementor: Add menus via the OOW Custom Menu widget (requires Elementor).
• Divi: Insert menus with the OOW Custom Menu module (requires Divi).
• WPBakery: Use the OOW Custom Menu component (requires WPBakery).

If a page builder is inactive, a dismissible admin notice will appear in the respective editor to guide you.

Tips for Optimal Usage

Finding Menu Slugs

• Go to Appearance > Menus and note the lowercase, hyphenated menu name (e.g., “Main Menu” is main-menu).
• Use the Shortcode Assistant to select menus directly.

Applying Themes

• Preview themes in the Shortcode Assistant to match your site’s design.
• Ensure the selected theme’s CSS loads correctly by testing on the front-end.

Custom Styling

• Add a class attribute and style it in your theme’s CSS (e.g., .my-menu-style { color: #0073aa; }).
• Avoid conflicts with theme styles by using specific selectors.

Nested Menus

• Set depth="2" or higher for submenus, and test responsiveness on mobile devices.
• Use themes like Dark Mode for better submenu visibility.

Multilingual Support

• Use the lang attribute with WPML or Polylang for localized menus.
• Test menu rendering in each language to ensure consistency.

Page Builder Compatibility

• Install and activate the required page builder (e.g., Elementor) for its integration to work.
• Dismiss admin notices for inactive page builders to avoid clutter.

Accessibility

• Always include an aria_label for navigation menus to support screen readers.
• Test with accessibility tools to ensure compliance.

Performance

• The plugin loads CSS only when the shortcode is used, but verify with browser tools.
• Minimize the number of themes loaded by selecting one per menu.

Example Shortcodes

Here are practical examples for different use cases:

• Basic Menu: (vertical list layout).
• Themed Menu: (horizontal themed menu).
• Nested Menu: (menu with submenus).
• Inline Menu: (horizontal with separator).
• Custom Styled: (apply custom CSS).
• Multilingual: (French menu).
• Accessible: (screen reader support).
• Fallback: No menu available (custom fallback text).

Troubleshooting

Menu Not Displaying

• Verify the name attribute matches the menu slug in Appearance > Menus.
• Check for typos in the shortcode (e.g., not [oow_menu]).

Theme Not Applying

• Ensure the theme attribute is valid (e.g., dark-mode, not dark).
• Check browser console for CSS loading errors (F12).

Submenus Not Showing

• Confirm depth is set to 2 or higher (e.g., depth="2").
• Verify the menu has subitems in Appearance > Menus.

Page Builder Issues

• Ensure the required page builder (e.g., Elementor) is active.
• Dismiss admin notices for inactive builders to avoid confusion.

Multilingual Menu Not Rendering

• Confirm WPML or Polylang is configured and the lang attribute matches (e.g., lang="es").
• Test with a default theme to rule out conflicts.

Accessibility Concerns

• Add an aria_label attribute to improve screen reader support.
• Test with tools like WAVE or Lighthouse.

Plugin Conflicts

• Temporarily deactivate other plugins to identify conflicts.
• Check for theme CSS overriding menu styles (use browser developer tools).

Support

• Contact [email protected] or visit OOWCODE > OOW Menu Shortcode > Support.
• Check full documentation at oowcode.com/oow-custom-menu-shortcode.