WordPress Bits

Hacking WordPress. Keeping the bits together.

Home and the rest of main menu on a WordPress based web site

Posted by Leonid Mamchenkov on August 3, 2007

Now that we established that WordPress is not just a blogging engine, but a complete platform, which can be used for building all sorts of web sites, it is time to look at some issues which arise along the way. Today, I’ll show one of the ways to go about creating web site’s main menu.

For most traditional web sites, WordPress pages provide all required navigational functionality. Simply create pages for main menu items, like “About Us”, “Contact Us”, “Services”, “Company Profile”, etc. Those pages which need sub-sections, can have sub-pages (via “Page Parent” selection box).

Pages can be ordered in a number of ways with parameters in the theme files, and there is even some control in the administration interface. Take a look at arguments for wp_list_pages() function and “Page Order” selection box in the administration interface.

The biggest issue that I came across, is the one with Home link. There is usually a company or web site logo, which is linked to the front page of the site, but often also a main menu item makes sense. People expect a “Home” or “Main” or “Front page” link in the main menu.

OK, no problem. We create a separate page, call it “Home” and arrange the ordering for it to be the first. Also, in the Options->Reading we select “Front page displays a static page” and select our “Home” page. Now our menu works just fine.

Except for the tiny little detail – “Home” link in the menu doesn’t point to the web site’s front page, but to an address of the page. With fancy URLs it might not be that noticeable (/home), but with regular links, it doesn’t look right (/page_id=2). Updated: this seems to be not true for the newer version of WordPress, which use blog’s home automatically. Thanks to Rich Schmidt for pointing this out.

Also, our front page looks a little bit strange, with the title “Home” instead of something more traditional like “Welcome to our new web site!”. We could, of course, take care of this by using a different template for the front page, but why bother, especially when we can solve both issues at the same time and do it easily to.

A quick and simple solution is to separate the “Home” link from the rest of the pages menu. So, instead of:

wp_list_pages()

We’ll have something like this:

Main menu with wp_list_pages()

Here, 2 is the ID of our “Home” page, which we want to exclude from the main menu (check Codex for more about wp_list_pages() ). Otherwise we’ll have two entries in there and it will be confusing.

Update: Thanks to Adam and Greg (see comments) for a better way to do the above:

Proper way to do main menu with wp_list_pages()

So, now, not only our “Home” link in the main menu points to something sensible, but we also get to choose our front page title separately from the menu item.

This approach works well if your web site can be easily structured with pages and you need only a few pages to be handled separately (“Disclaimer”, “Privacy Policy” are two other frequent things that you want to exclude from the main menu and show separately at the bottom of the page, or something like that).

If your web site should be more flexible with page titles and menu items, but you still want to keep the administration simple (because, most probably, very non-technical people will handle the content), you can use Links instead. We’ll see how to do it next time.

About these ads

27 Responses to “Home and the rest of main menu on a WordPress based web site”

  1. BoltClock said

    Ingenious post though I’m using another application framework (CodeIgniter) to develop my site :/

  2. I’m glad you liked it. ;)

    Pass by once in a while – maybe you’ll look more into WordPress as a platform.

  3. adam said

    for theme authors, here’s a way to discover the home page, based on the static front page options:

    http://disconnected.svn.sourceforge.net/viewvc/disconnected/Trunk/functions.php?revision=52&view=markup#l_10

  4. Excellent tip, Adam. Thanks for sharing!

  5. There is a nice plugin – Static Front Page ( http://www.semiologic.com/software/publishing/static-front/ ) It solves that problem easily :)

  6. Thanks Michael! I thought I saw the plugin for this somewhere, but couldn’t remember where.

  7. Excluding a home page by using its ID value is, in my opinion, not an ideal solution for what you’ve outlined above. Deleting the Home page or even changing the static front page to something else using the Options -> Reading setting you mention above will render your ‘exclude=2′ parameter useless since the page ID would be something other than ‘2’.

    Each time I run across one of these help or how to articles and I think Why would you do that?. It’s only because this article appeared in my WordPress Dashboard that I even paid any attention to it; I think of the thousands of readers that may look at this.

    Please don’t take this wrong way, I think its a great idea to propagate information and offer helpful tips to those that are learning or are looking for this type of information. However, if you are going to write articles explaining ‘word-arounds’ for these types of ‘gotchas’ then I think the solution should be one that actually solves the problem.

    From a programming point of view, the use of known values as function arguments in function calls such as wp_list_pages() is just not a good idea. One I would steer people away from practicing because it only resolves a problem caused by a unique set of known circumstances. If and when those circumstances change, the solution will fail and the failure would undoubtedly be perceived as a bug.

    The database assigns the page ID number when a page is created. The actual number value is known only to the database and that knowledge should remain with the database. To obtain the number so it can be used in a script means looking at the database to see what number the page was assigned – there are other methods I’m sure. However, the moment you hard code the page ID value as a function argument – you’ve limited the usefulness of your solution – The menu you’ve created will work provided the page ID you want excluded is always a value of ‘2’. Changing the home page to some other static page means editing the function call to provide the new page ID value. Giving a theme to someone else containing the function call with a hard-coded value would mean that their ‘home’ page would also need to be set to page ID ‘2’ – that is not likely to be the case. ‘Programming’ and ‘editing’ are not the same thing…

    Since we are programming, we should want to exclude any static page used as the ‘Home’ page – not just one that happens to be assigned one particular page ID. There are two wp database options that can be used for the purposes of excluding the currently designated ‘Home’ page from being returned by the wp_list_pages() function. The option values tell you if there is, in fact, a static page being used and if so, which page it is.

    If the front page of the web site is a static page then the value returned by get_option(‘show_on_front’) will be the value ‘page’. The page id of that static page can be obtained by calling get_option(‘page_on_front’).

    So the quick and simple solution to exclude ANY page set as the front page would be:


    wp_list_pages(('page' == get_option('show_on_front')) ? 'exclude=' . get_option('page_on_front') : '');

    Sorry for the ‘windy’ comment.

  8. If you don’t mind the title of the page being the same in the menu and on the page itself (I used “Welcome!” on my latest one), then you can avoid this whole thing. Just set it as your front page in the Reading Options panel.

    But what about the wonky “www.domain.com/welcome/” link? It doesn’t happen. The link is automatically changed by WP to “www.domain.com” (evidently, as that’s how it’s working on mine).

    So you really only need to use Leonid’s workaround (as modified by Greg, I suppose) if you don’t want to use the page title as the link in the menu.

  9. Truden said

    I don’t quite get the “tricks” in this posting.
    It’s probably my English playing me bad.

    If you want to have many not listed pages, you just have to create them under one page (“Page Parent”) and when you list your pages use: php wp_list_pages('depth=1'); (you can add some more parameters).
    In this case your “sub-pages” do not show up in the list.
    You can insert them manually where ever you want to, including in your menu.
    As for the home page, there is no easier than: &alt;a htref="/" alt="Home">Home&alt;/a>

  10. Greg,

    Thanks for the comment.

    You are right. The solution that I described was far from perfect. You showed a better way, as did Adam above. I will update the post shortly.

    Regarding the popularity of this post – I was stunned by myself. It got more than 500 view in just a few hours. That by far exceeded any previous audience. So, I’ll try to be more careful with these things now. ;)

  11. Truden,

    as was pointed out, the scenario described in this post is very specific to my environment. Probably you do this stuff differently and that’s why it makes no sense to you.

    Regarding the Home link, it’s better to link to bloginfo('siteurl') or bloginfo('home'), as “Home” is not always at the / . It will also make it easier to have a development version of the site under a subdirectory, together with other projects.

    Anyway, I’ll try to be a bit more generic with my suggestions in the future.

  12. Adam, Greg,

    Thanks for letting me know about a better way. I’ve updated the post.

  13. satoridork said

    I had been wondering how to sort out this issue for a client’s website, and this article (and Greg’s comment) has been extremely helpful. Thanks for sharing your expertise (`windy´ or not!).

  14. Doug Wray said

    I’m still hoping to see the wonderful King plug-ins updated (there IS a minor tweak/fix to get it working, but I’m hoping an author-generated update is forthcoming soon). That set of plug-ins does ALL the things you need to adjust the menus in a wide variety of ways. Would love to see some of the functionality incorporated into WordPress.

    GREAT BLOG Leo! You’re in my news reader (NetNewsWire) and I’ve been enjoying the posts a lot. Keep it up!

  15. Leonid,

    Any chance you’ll change your 6th paragraph, too, to reflect what I said in comment #8? In my experience (with WP 2.2.1, not sure about earlier versions), what you described is not what happens. The link points to the blog’s home URL, not to the page’s URL, right out of the box, no fiddling required.

  16. Erik said

    Nice work chap! This is what collaboration is all about. I applaud you for taking the constructive criticisms and keeping an open mind.

  17. Truden said

    Leonid,

    yes I forgot that the “HOME” could be specified and will differ from “/”.
    Then use the path to the page, not the function for “home”.
    Spare some server resources whenever and wherever you can.
    Try to keep your blog faster.

  18. […] Home and the rest of main menu on a WordPress based web site Now that we established that WordPress is not just a blogging engine, but a complete platform, which can be used for […] […]

  19. Rich,

    done. Thanks.

  20. redballoons said

    Great tip there, Leonid. Thanks! :) When I was trying to figure out how to exclude pages, I found the WP documentation overwhelming, and the forums also a little intimidating for even the smallest though most obvious things, so your clear and concise instructions here (with comments from Greg and Rich of course) will definitely be very helpful for many many people! Will look forward to more tips!

  21. moshu said

    Interestingly, a few days before this post appeared I have posted two articles about the same issue:
    Two level menu with Pages and Pages and Categories.

  22. Moshu,

    thanks for sharing! I guess with more and more people on the Web it becomes more and more difficult to create unique code. :)

  23. Weston MA said

    Hey, what text editor are those screen shots from? It looks cool.

  24. I’m using Vim for all my text editing needs outside of Firefox. :)

  25. ryodimas said

    I use WP theme that exclude the home bar by default. How to make the home bar before the about bar, and the home bar corresponds to post entry (latest post) as usual blog. Thanks for your helpful answers…

  26. […] Home and Main Menu – Addresses the issue with wp_list_pages and Home. […]

  27. alexs said

    Nice work chap! This is what collaboration is all about. I applaud you for taking the constructive criticisms and keeping an open mind.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 40 other followers

%d bloggers like this: