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.

// 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.

By This entry was posted in General, Wordpress and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

11 Comments

  1. Posted August 25, 2010 at 6:46 am | Permalink

    BRILLIANT. Thank you SO much for working this out!

  2. Stuart
    Posted September 3, 2010 at 7:09 am | Permalink

    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. Posted November 16, 2010 at 5:04 pm | Permalink

    I’ll read your article, later often to read.

  4. Posted December 6, 2010 at 12:05 am | Permalink

    Nice article, thank you very much for sharing.

  5. Posted December 6, 2010 at 11:42 pm | Permalink

    Great article, solved all my problems… just for today :)

    Thanks a lot!

  6. Posted February 1, 2011 at 11:19 pm | Permalink

    Until I read that post I was not aware of the wp_nav_menu possibilities, this post gave me new insights.

    Integrating the code right now.

  7. Posted March 9, 2011 at 10:33 am | Permalink

    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.

  8. Posted March 25, 2011 at 12:08 am | Permalink

    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.

  9. phill
    Posted April 12, 2011 at 2:58 pm | Permalink

    Saved my bakon thxs

  10. Posted June 28, 2011 at 2:04 pm | Permalink

    Legend!!!
    This works a treat.

  11. Posted October 11, 2011 at 6:27 pm | Permalink

    Hmm. It’s working. Thank you.

3 Trackbacks

  1. By links for 2010-06-29 | Links | WereWP on June 29, 2010 at 4:06 pm

    [...] wp_nav_menu shortcode 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). (tags: wordpress menu tutorial sitemap) Leave a Reply Click here to cancel reply. [...]

  2. [...] Instead we’re going to further add to our functions.php file and convert this into shortcode that can be used anywhere in WordPress and I found a great example of how to do this here – http://www.cozmoslabs.com/2010/06/28/wp_nav_menu-shortcode/ [...]

  3. [...] add_shortcode("listmenu", "list_menu") Credit for sitemap shortcode idea: CozmosLabsShare this:EmailPrintFacebookStumbleUponMore from the Mayor:The Ultimate Guide to WordPress Custom [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting