Tiempo estimado de lectura: 2 minutos

How to create and display a WordPress menu with a Shortcode

Shortcodes have been with us for a decade and a half and are still one of the easiest ways to “call content” from our WordPress to our WordPress. In this tutorial I will show you some simple steps to display any menu in Shortcode format, in this way we can create all kinds of content such as:

  • Map of a website or a store.
  • Custom horizontal menus for a blog or store section.
  • Basically anything you can think of that can be used as a navigation menu.

The advantage of Shortcodes is that you can use them in almost any web content, you just need the purpose and imagination to power.

Below I bring you a step by step tutorial to create and display any WordPress menu anywhere on the web using a Shortcode, remember that you can create unlimited amounts of menus, so the possibilities are endless.

Shortcode code in functions.php to display WordPress menu

The first thing to do is to include these lines of code in the functions.php file of the theme, to do this action we recommend you to have a Child Theme, otherwise you will lose this piece of code in each update of your theme:

/**
 * Como crear y mostrar un menú de WordPress con un Shortcode
 */
function rv_print_menu_shortcode( $atts ) {

	/**
	 * Normalize
	 *
	 * Por seguridad vamos a limpiar los atributos
	 * que introdujimos al escribir el Shortcode.
	 */
	$atts = array_change_key_case( (array) $atts, CASE_LOWER );
	$atts = array_map( 'sanitize_text_field', $atts );

	/**
	 * Atributtes
	 *
	 * A continuación guardamos los atributos en 2 variables
	 */
	$menu_name  = $atts['name'];
	$menu_class = $atts['class'];

	/**
	 * Creamos la variable $menu_output que va a retornar todo
	 * lo que conforma nuestro menú y llamamos a la función
	 * de WordPress wp_nav_menu() y le pasamos como
	 * parámetros nuestros atributos.
	 */
	$menu_output = '<div class="shortcode-menu">';

	$menu_output .= wp_nav_menu( array(
		'menu'       => esc_attr( $menu_name ),
		'menu_class' => 'menu ' . esc_attr( $menu_class ),
		'echo'       => false
	) );

	$menu_output .= '</div>';

	return $menu_output;

}

add_shortcode( 'print-menu', 'rv_print_menu_shortcode' );

Now we are going to display the WordPress menu using our Shortcode

In order for you to use the shortcode and display the menu we created previously, just copy and paste the following line wherever you want it to be displayed.

[print-menu name="mi-menu"]

And all you have to do is change the parameter name=”my-menu” where we are going to change the name my-menu to the name you have given to your WordPress menu.

Remember that menus are created in Appearance -> Menus, and I think you already know this and if I don’t tell you, menus are found inside the WordPress admin in the Appearance -> Menus section.

For example, if we create the “Fabrica” menu:

We must use the Shortcode:

[print-menu name="fabrica"]

In principle the menu that has been called by the Shortcode has no CSS, so the appearance it takes will depend on the theme you have installed, now that we are done with the complicated part: making the menu display, now let’s go with the simplest part, giving it styles.

Now let’s give our menu some styling with CSS classes

The CSS classes will be added directly to the Shortcode, you can create as many classes as you want separating them with a space, following the example of the fabrica menu it would look like this for a class that we will call class1

[print-menu name="fabrica" class="clase1"]

And so if we want it to have class1 and class2

[print-menu name="fabrica" class="clase1 clase2"]

Now you only have to add your own CSS classes and styles and we would have it ready.

In case you need the menu to be horizontal

If you need the menu to be presented in horizontal format this would be the CSS code:

.shortcode-menu ul li {
	display: block;
	position: relative;
	float: left;
}
.shortcode-menu li ul {
	display: none;
}
.shortcode-menu ul li a {
	display: block;
	padding: 5px 15px 5px 15px;
	margin-left: 1px;
	white-space: nowrap;
}
.shortcode-menu li:hover ul {
	display: block;
	position: absolute;
}
.shortcode-menu li:hover li {
	float: none;
	padding: 0;
}

I hope this tutorial has been helpful, see you next time, ciao.

¿Te ha sido util esta lección? Vota para poder enviarnos tu Feedback
No me gusta 0 0 de 0 han encontrado esta lección util.
Vistas: 18

Still have doubts?

We don't, we want to help you

Contact Us

2022 ©️ WAOPRESS. ALL RIGHTS RESERVED. PRIVACY | LEGAL NOTICE | COOKIE POLICIES | HOLA@WAOPRESS.COM