wp_nav_menu shortcode

Along with WordPress 3.0 we now have access to the really useful wp_nav_menu functionality. We can now create our own menus without resulting to several plugins or tricks.

Another cool thing we can do with this new menu is build the sitemap. I was in need the other day of a plugin that would generate a sitemap page (something like an archive page). Not an xml sitemap, just a standard page from where the visitors of the site could navigate more easily. The best solution appeared to be an WordPress menu shortcode.

Since I couldn’t find something like this I realized that I could use the wp_nav_menu function and built a shortcode to insert it into my page.

wp_nav_menu shortcode

To install the shortcode just place this code inside functions.php file of your theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Function that will return our Wordpress menu
function list_menu($atts, $content = null) {
	extract(shortcode_atts(array(  
		'menu'            => '', 
		'container'       => 'div', 
		'container_class' => '', 
		'container_id'    => '', 
		'menu_class'      => 'menu', 
		'menu_id'         => '',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'before'          => '',
		'after'           => '',
		'link_before'     => '',
		'link_after'      => '',
		'depth'           => 0,
		'walker'          => '',
		'theme_location'  => ''), 
		$atts));
 
 
	return wp_nav_menu( array( 
		'menu'            => $menu, 
		'container'       => $container, 
		'container_class' => $container_class, 
		'container_id'    => $container_id, 
		'menu_class'      => $menu_class, 
		'menu_id'         => $menu_id,
		'echo'            => false,
		'fallback_cb'     => $fallback_cb,
		'before'          => $before,
		'after'           => $after,
		'link_before'     => $link_before,
		'link_after'      => $link_after,
		'depth'           => $depth,
		'walker'          => $walker,
		'theme_location'  => $theme_location));
}
//Create the shortcode
add_shortcode("listmenu", "list_menu");

To use the shortcode just place [listmenu menu=Sitemap] into your post and that’s it (replace Sitemap with the id, slug or name of the menu you want to list.)

You can also use all the variables that come with the new wp_nav_menu function, like menu_class, or container so you can customize your menu really easy. Just separate the attributes by space like so:
[listmenu menu=Sitemap menu_class=sitemap_menu]

Conclusions

This is really useful for client sites, where you want to make it easy edit and modify the site without braking the html. We could have just manually created the sitemap, but this is a lot nicer. Another way you could use this shortcode would be to create sub-menus on certain pages only.

If you find use for this shortcode in an interesting way don’t hesitate to share it in the comments.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

36 thoughts on “wp_nav_menu shortcode

  1. Pingback: links for 2010-06-29 | Links | WereWP

  2. I use a custom sidebar plugin which allows me to add custom content to any page within the sidebar.

    The upshot is, using a shortcode like this within the widget allows my clients to modify custom menus for each child page and only show the relevant menu subset.

    Many thanks

  3. Pingback: Extending Custom Menus | Seja Design – WordPress Templates

  4. Thank you. The site I was building was unable to use the parent structure due to an issue with URLs and specific request from the client. The custom menu was created to appear like a hierarchal page structure however this made it difficult to print out the HTML sitemap page. Your solutions saved me a lot of time in trying to get this to work properly.

  5. Awesome! Was able to integrate the above technique into my Thesis Theme – CSS was goofy at first, but made use of the “menu_class” to get a better design going.

    P.s. adding to Thesis was easy, copy and paste it into your custom_functions.php file.

  6. Pingback: The Ultimate Guide to WordPress 3 Menus - WP Mayor

  7. Cristian this is a very helpful bit of code. I’m using it on a site now.

    I included an add_filter to my functions.php so I could use menu shortcodes in sidebar widgets:
    add_filter ('widget_text', 'do_shortcode');

    Thanks so much!

  8. Thanks so much for this. Worked quickly and easily. I wanted to create a password protected page that contains menus without using the sidebar widgets. This did it. Thanks again!

  9. Hi,

    I have used golden-eagle-lite theme in my website. In menu we displayed pages,custompost,categories. Also we need to display some departments which is added through a plugin in admin side. Need to call a function in exising wp_nav_menu

    Here is our current header.php

    We need to add this function also

    this is our functions.php

    function goldeneagle_nav() {
    if (function_exists(‘wp_nav_menu’))
    wp_nav_menu(array(‘theme_location’ => ‘custom_menu’, ‘container_id’ => ‘menu’, ‘menu_class’ => ‘ddsmoothmenu’, ‘fallback_cb’ => ‘goldeneagle_nav_fallback’));
    else
    goldeneagle_nav_fallback();
    }
    How can i add the plugin functon also in wp_nav_menu. We need to display page, custom post, categories also plugin content in menu. Kindly help me pls.

  10. Thank you for this. I was in the process of building my own when I thought to search for one built into WordPress because this is so logical especially with so many shortcode based themes. They didn’t have it, but you had a very elegant one.

  11. Indeed, something I was looking for for a long time now; but it would be perfect if I could embedd dropdown menus inside a WordPress page instead of entire menus (only with parents on the page, the children being accesible as dropdowns).

  12. Hi,

    I have used golden-eagle-lite theme in my website. In menu we displayed pages,custompost,categories. Also we need to display some departments which is added through a plugin in admin side. Need to call a function in exising wp_nav_menu

    Here is our current header.php

    We need to add this function also

    this is our functions.php

    function goldeneagle_nav() {
    if (function_exists(‘wp_nav_menu’))
    wp_nav_menu(array(‘theme_location’ => ‘custom_menu’, ‘container_id’ => ‘menu’, ‘menu_class’ => ‘ddsmoothmenu’, ‘fallback_cb’ => ‘goldeneagle_nav_fallback’));
    else
    goldeneagle_nav_fallback();
    }
    How can i add the plugin functon also in wp_nav_menu. We need to display page, custom post, categories also plugin content in menu. Kindly help me pls.

  13. hi there, great idea … but i can’t understand how to put my shortcode.. i mean i want to put in my main menu the [printfriendly] shortcode ..
    i put the code in php file i hope in the right place …
    but in admin area in the menu section i put the shortcode but the system change it ..

    :(

    any suggestion?

    thanks

  14. Thanks Christian
    Great shortcode, spent hours trying to find a solution until I came across this, works like a charm. It has enables me to display 3 menus side by side without resorting to a plugin

    Lee

Leave a Reply

Your email address will not be published. Required fields are marked *