Below, you’ll find a detailed guide on how to add the Shortcode Menu Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Shortcode Menu Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Shortcode Menu Plugin and the shortcodes it provides:
"Shortcode Menu is a versatile WordPress plugin that allows you to easily embed menus within your content, using simple, customizable shortcodes."
- [shortmenu]
Shortcode Menu [shortmenu] Shortcode
The ‘shortmenu’ shortcode from the Shortcode-Menu plugin is designed to enhance the visual display and functionality of menus on your WordPress site. It allows you to customize various aspects of your menu, such as color, anchor color, hover color, and transparency. It also provides the option for your menu to be responsive, adapting to different screen sizes for optimal viewing. The shortcode also includes an ‘enhance’ feature, enabling a more visually appealing, vertical block display.
Shortcode: [shortmenu]
Parameters
Here is a list of all possible shortmenu shortcode parameters and attributes:
id– Unique identifier for the menu.class– Additional CSS classes for the menu.menu– The name of the menu to be displayed.display– Defines how the menu is displayed; block or inline.enhance– Determines if menu enhancements are applied.menu_color– Sets the background color of the menu.menu_anchor_color– Sets the color of the menu link text.menu_anchor_hover_color– Sets the hover color of the menu link text.submenu_color– Sets the background color of the submenu.submenu_anchor_color– Sets the color of the submenu link text.submenu_anchor_hover_color– Sets the hover color of the submenu link text.submenu_transparency– Sets the transparency level of the submenu background.arrow– Decides if arrows are shown in the menu.css– Custom CSS for the menu.is_responsive– Determines if the menu is responsive.responsive– Sets the breakpoint for responsive behavior.
Examples and Usage
Basic example – In this example, we will use the shortcode to display a menu by referencing its id. The menu will load by the specified id.
[shortmenu id="menu1" /]Advanced examples
Display a menu with a specific design by specifying the menu color, anchor color, and hover color.
[shortmenu id="menu2" menu_color="#000000" menu_anchor_color="#ffffff" menu_anchor_hover_color="#cccccc" /]Display a responsive menu with a specific breakpoint. The menu will switch to a mobile-friendly design when the screen width is less than or equal to the specified responsive value.
[shortmenu id="menu3" is_responsive="true" responsive="650" /]Display a menu with specific submenu design by specifying the submenu color, anchor color, hover color, and transparency.
[shortmenu id="menu4" submenu_color="#000000" submenu_anchor_color="#ffffff" submenu_anchor_hover_color="#cccccc" submenu_transparency="0.8" /]Display a menu with a specific class. The specified class will be added to the menu’s HTML element, allowing for further customization with CSS.
[shortmenu id="menu5" class="my_custom_class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [shortmenu] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('shortmenu', array($this,'display_shortcode_menu'));Shortcode PHP function:
function display_shortcode_menu($attr)
{
wp_enqueue_script('enhance-script-enhance-menu');
wp_enqueue_script('enhance-script-shortcode-menu-responsive');
wp_enqueue_style( 'shortcode-menu-style' );
$id = $class = $menu = $display = $enhance = $menu_color = $menu_anchor_color = $menu_anchor_hover_color = $submenu_color = $submenu_anchor_color = $submenu_anchor_hover_color = $submenu_transparency = $menu_style = $css = $is_responsive = $responsive = $arrow = $menu_anchor_color_style = $menu_anchor_hover_color_style = $opacity = $icon_style = $submenu_transparency = '';
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'menu' => '',
//'list' => 'ul',
'display' => 'block',
'enhance' => 'true',
'menu_color' => '',
'menu_anchor_color' => '',
'menu_anchor_hover_color' => '',
'submenu_color' => '',
'submenu_anchor_color' => '',
'submenu_anchor_hover_color' => '',
'submenu_transparency' => '',
'arrow' => 'true',
'css' => '',
'is_responsive' => 'true',
'responsive' => '650'
), $attr ) );
$list = 'ul';
if($menu_color != '')
{
$menu_style = 'background:'.$menu_color.'; ';
}
if($menu_anchor_color != '')
{
$menu_anchor_color_style = 'color:'.$menu_anchor_color.'; ';
}
if($menu_anchor_hover_color != '')
{
$menu_anchor_hover_color_style = 'color:'.$menu_anchor_hover_color.'; ';
}
if($submenu_color != '')
{
$rgba = $this->wpsm_hex2rgb($submenu_color);
if($submenu_transparency != '')
$opacity = $submenu_transparency;
else
$opacity = '1';
$sub_menu_color = 'rgba('.$rgba[0].','.$rgba[1].','.$rgba[2].','.$opacity.');';
$sub_menu_style = 'background: '.$sub_menu_color;
$icon_style = 'color:'.$sub_menu_color;
}
if($submenu_anchor_color != '')
{
$submenu_anchor_color_style = 'color:'.$submenu_anchor_color.'; ';
}
if($submenu_anchor_hover_color != '')
{
$submenu_anchor_hover_color_style = 'color:'.$submenu_anchor_hover_color.'; ';
}
$menu_class = '';
if($id == '')
$menu_id = 'short_menu_'.uniqid();
else
$menu_id = $id;
if($class != '')
$menu_class .= $class;
if($enhance == 'true' && $list == 'ul' && $display == 'block')
{
$menu_class .= ' wpsm-menu wpsm-vertical menu_enhance ';
}
elseif($enhance == 'true' && $list == 'ol' && $display == 'block')
{
$menu_class .= ' wpsm-menu wpsm-vertical enhance_shortcode_menu_list ';
}
elseif(($enhance == 'true' && $list == 'ol' && $display == 'inline')
||($enhance == 'false' && $list == 'ol' && $display == 'inline'))
{
$menu_class .= ' wpsm-menu enhance_shortcode_menu_inline_list ';
}
elseif(($enhance == 'true' && $list == 'ul' && $display == 'inline')
||($enhance == 'false' && $list == 'ul' && $display == 'inline'))
{
$menu_class .= ' wpsm-menu enhance_shortcode_menu_inline ';
}
elseif($enhance == 'false' && $list == 'ol' && $display == 'block')
{
$menu_class .= ' wpsm-menu shortcode_menu_list ';
}
else
{
$menu_class .= ' ';
}
$defaults = array(
'theme_location' => '',
'menu' => $menu,
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'shortcode_menu',
'menu_id' => '',
'echo' => false,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="'.$menu_id.'" class="%2$s '.$menu_class.' ">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
$html = wp_nav_menu( $defaults );
$html .= '<div class="clear"></div>
<style>
#'.$menu_id.' { '.$menu_style.' }
#'.$menu_id.' ul.wpsm-arrow-enabled:before { '.$icon_style.' }
#'.$menu_id.' ul, #'.$menu_id.' ul ul { '.$sub_menu_style.' }
#'.$menu_id.' a { '.$menu_anchor_color_style.' }
#'.$menu_id.' a:hover { '.$menu_anchor_hover_color_style.' }
#'.$menu_id.' ul a { '.$submenu_anchor_color_style.' }
#'.$menu_id.' ul a:hover { '.$submenu_anchor_hover_color_style.' }
'.$css.'
</style>
<script type="text/javascript">
var show_arrow = "'.$arrow.'";';
if($is_responsive == 'true')
{
$html .= 'var $sm = jQuery.noConflict();
jQuery(function ($) {
$("#'.$menu_id.'").tinyNav();
$("#'.$menu_id.'").next().addClass("shortcode-menu-mobile");
shortcode_menu_responsive();
});
jQuery(window).resize(function($){
shortcode_menu_responsive();
});
function shortcode_menu_responsive()
{
var window_width = $sm(window).width();
if(window_width <= '.$responsive.')
{
$sm("#'.$menu_id.'").hide();
$sm("#'.$menu_id.'").next().show();
}
else
{
$sm("#'.$menu_id.'").show();
$sm("#'.$menu_id.'").next().hide();
}
}';
}
$html .= '</script>';
return $html;
}
Code file location:
shortcode-menu/shortcode-menu/shortcode-menu.phpConclusion
Now that you’ve learned how to embed the Shortcode Menu Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply