Turn a Menu into a Site Map with WordPress

Websites for Small Biz on mobile
Websites for Small Biz on mobile

First, a poll.

What is Important on a Mobile Home Page?

[poll id=9]

How to Use a WordPress Menu for a Sitemap

Warning: this section is for code lovers.

I was working on a client’s site, and we wanted to get a link to the full site somewhere on the mobile site. The mobile site is build with responsive web design; however, much of the original home page is not displayed on the mobile version in order to highlight a few key pages for the mobile user (such as Contact and Pay My Bill).

Instead of manually building a whole site map, I realized I had links to every page on the site via our main menu. The main menu is dynamically built with WordPress and not hard-coded, so the client can go in and add a link or change the order. Your WordPress theme probably supports at least one such menu.

So what you can do is create this function in your functions.php (thank you to Stephanie of sillybean):
/*Add menu to a post*/
function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( 'name' => null, ), $atts));
return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) );
}
add_shortcode('menu', 'print_menu_shortcode');

Then you use the shortcode [menu name=”main-menu”], replacing main-menu with whatever you named your menu. If you put this on a new page, you will find that the result looks remarkably like a site map.

If you want this to show up only for mobile, learn how to implement media-queries and wrap your menu in a special div class (for example, ‘mobile-menu’). Set this class of mobile-menu to display:none in your style.css. In your media-queries.css you then set mobile-menu to display:block to show the menu when the browser size is less than 480px.

// end of code section

Back to You: Your Comments, Please

What are some of the best small business mobile websites you have encountered? What are some of the worst? What do you look for on a mobile website?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

23 thoughts on “Turn a Menu into a Site Map with WordPress

    1. And as soon as you think you have found them “all” (is that even possible), developers will create a whole bunch of new ones. But it’s all part of the game. No need to get every single possibility. Just a few impressive ones.

    1. Yes, it would be nice if more companies paid attention to mobile, wouldn’t it? What I have found is that because mobile is a smaller screen, one does have to make choices. Do you want to display simple links to all pages of your site? Or sophisticated links to a few key pages? There’s no right or wrong answer, but some users will have definite opinions.

  1. Hi Leora.
    This is a nice little post with some handy information.
    Personally I just don’t use mobile devices for browsing unless it’s a life death situation.
    I know, I know, I sound like a grumpy old man. Did I say sound like. lol.
    Anyway, that asside, I do know this is a very fast growing trend and we have to move with the times.
    It’s really useful to find a simple but handy tip like this so thank you, from a grumpy old man.
    Oh and by the way, I really do feel old now. I just found out that I’m to be a Grandad and it feels great.
    Steve Hippel recently posted…Will Your Small Business Survive These Changing TimesMy Profile

    1. Well, congratulations on the Grandad piece of news! Wishing your family all the best.

      I was slow to get on the mobile bandwagon, but my excuse was for work. Indeed, I now do programming for mobile, so it is part of my repertoire. Steve, media queries CSS is fun – you should learn how so you can offer your small businesses a real treat.

  2. Hi Leora,

    Like Steve I don’t use mobile devices for browsing the web. I once had my phone set up for Twitter and got fed up with the phone going off at silly o’clock with a tweet so came away from it altogether.

    I do have a plugin on my blog so that it displays properly for those that use mobiles for their browsing and have had people test it for me and it works ๐Ÿ™‚

    For those that do though I can see you offer a great solution Leora, fair play to you.

    Barry
    Barry Wells recently posted…A Solution To Your Plugin Nightmares and Slow Loading BlogsMy Profile

    1. Barry, as more and more people use mobile (some people who don’t own computers do own smart phones), it’s important to know how your site will look on their set up.

      The code actually isn’t specifically for mobile – you can use this to build a site map for desktop as well. But it is contingent on your already haven’t built a menu to use.

      Nice to hear from you, Barry.

  3. I’m one of those that don’t use mobile Leora but I KNOW I’m of the minority in that.

    I use a plug-in on my blog to help with the way my blog is read but I’m not up on all the other ins and outs of how to make your site readable on a mobile device. That’s just so over my head.

    Not you though. Leora to the rescue with plenty of coding to help! ๐Ÿ˜‰

    1. Adrienne,

      The simplest way to do mobile is to have one of those switchover mobile themes. They aren’t ideal (is anything?), but they are easy enough to set up. I used to use WordPress Mobile Pack, but I don’t even think the developer supports it any more. Another easy way to go is to pick a responsive theme, like Twenty Eleven. That’s even better than those switchover mobile themes; one doesn’t have the duplicate content problems one might have with the mobile packs, for example. And the look and feel of the overall site stays the same on mobile.

      OK, Adrienne, you make me work hard to explain stuff! Hope you understood some of this.

  4. Hey Leora,

    Like many others in this page, I don’t use mobile browsing, at least not now. I have used it in the past, mainly for blogging. I think the most important thing to remember in a mobile site is to keep it minimal. We don’t want it to be fancy like we do in our full site – just display the content and a navbar with essential links such as about us and contact.

    I think that people who are interested in doing more in a site would probably check the full version at their desktop.

    Anyways, thank you for the post Leora,

    Jeevan
    Jeevanjacobjohn recently posted…List Building Experiment: Welcome Email and AutorespondersMy Profile

    1. Thanks, Jeevan.

      Many people that use mobile, however, DO want to see the full site, especially if they are on the go a lot and have more time with mobile. Also, there are some people that don’t even own a desktop but do own mobile. Each company really has to do its own research to discover what is most important (one can start by looking at Google Analytics).

  5. What a great idea, Leora!

    There are not many choices available for a good sitemap plugin, and this solution fit my needs perfectly. What a simple and elegant solution. Thank you so much.

    I would add that WordPress best practices suggest that when modifying a theme file such as functions.php, a child theme should be used so that you don’t loose your changes when the theme is updated. Instructions on how to do that can be found here:

    http://codex.wordpress.org/Child_Themes

    Also, I am now using a plugin called Responsive Select Menu, which turns any menu displayed on your WordPress site into a mobile friendly select box when the screen display gets smaller than the pixel width you designate… and it did that with the menu displayed on the sitemap I created using your (and Stephanie’s) idea.

    Thanks again, Leora.
    Scott

  6. Hi Leora,

    This works great, saves me from installing an extra plugin.
    I use it for displaying different menu’s in content for the sitemap.

Please leave a comment.

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

CommentLuv badge