Table of Contents
Since WordPress 3.0 we have access to the really useful wp_nav_menu shortcode functionality. We can now create our own menus without resorting 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 site’s visitors could navigate more easily. The best solution appeared to be a 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.
To install the shortcode just place this code inside the 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 easily. 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 to edit and modify the site without breaking 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.
Related Articles
Beginner’s Guide to: What Is WordPress?
Ever now and again the question arises with new clients that aren't really tech savvy: "What Is WordPress?" What I'm hoping to achieve with this post is to drop the technical jargon for a minute and explain in down to earth words what is WordPress, how can it help you, what is WordPress.com, what's a […]
Continue ReadingHow to Eliminate WordPress Spam Registrations (Step-by-Step Guide)
Looking for a way to cut down on WordPress spam registrations? If your WordPress site is set to allow user registration (like a membership site or WooCommerce store), then it's probably vulnerable to user registration spam from spam-bots. Finding a way to eliminate, or at least reduce, WordPress spam registrations is important so that you can focus your efforts and resources on your real users. No matter what type of site you're running, there are some tried-and-true tactics that you can apply to stop spam registrations in their tracks, and they're all available in one single plugin.
Continue ReadingWordPress User Registration
Have you hit a road block when it comes to WordPress user registration? You probably would like to have new users register before being able to take certain actions (for example, posting reviews or commenting) but do not want them to have access to the WordPress Dashboard? Truth is, WordPress User Registration doesn't have to […]
Continue Reading
[…] 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. […]
BRILLIANT. Thank you SO much for working this out!
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
Hello Stuart, can you tell me which is that plugin that you use to show content of sidebar into page.
Thanks
[…] 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/ […]
I’ll read your article, later often to read.
Nice article, thank you very much for sharing.
Great article, solved all my problems… just for today 🙂
Thanks a lot!
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.
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.
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.
[…] add_shortcode("listmenu", "list_menu") Credit for sitemap shortcode idea: CozmosLabsShare this:EmailPrintFacebookStumbleUponMore from the Mayor:The Ultimate Guide to WordPress Custom […]
Saved my bakon thxs
Legend!!!
This works a treat.
Hmm. It’s working. Thank you.
Very helpful! Always nice to be able to use a simple functions.php snippet instead of the overkill of a whole plugin. Thanks for the simple code!
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!
Very helpful, works as advertised and saved me some time. Thanks.
Works like a charm! Thanks 😉
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!
Thanks for sharing this Cristian. Will come in handy on a project I am working on now.
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.
Works perfect for what I needed, thanks!
!Muchas graçias! This was just what I needed for a page with a ‘fake’ sidebar. Very helpful, indeed!
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.
brilliant, thankyou… saved me from sitting here scratching my head and trying to throw together some code!
Love this elegant solution. Thanks for posting this up Cristian.
This is great, thanks a lot!
this doesn’t work for multiple menu’s in 1 page?
It should work… Have you tried changing the menu name?
[listmenu menu=Sitemap]
[listmenu menu=Sitemap2]
Very good solution to integrate WordPress menu in posts or pages.
Thanks a lot!
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).
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.
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
no one can help me … 🙁
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
Works great! Thank you!
Very interesting !
Thx a lot 🙂
Wonder how do you deal with the submenu part too ?
Is it necessary to add some code?
I add all your part into a plugin to display this shortcode into big sections but cannot override theme styles. But e.thing is great !
I want to add h1 tag to the menu item, is it possible?