Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Hard-code your navigation and get over it

Posted on 23 September 2009 66 comments

Article illustration for Hard-code your navigation and get over it

There’s a question I get asked all of the time and it surprises me every time I hear it.

How do you create your navigation when you’re using WordPress? How do you control the order of the items when you have to use functions like wp_list_pages and wp_list_categories?

The answer is simple: hard-code your nav!

You see, when using WordPress, we seem to get caught up in a particular mindset: one that says, “I must make everything updatable through the back-end.” And sure, when you’re creating a theme for public use or a for site that’s going to be changed constantly by a client, that’s a sensible approach to take. But what about your personal site, where you’ll be maintaining everything and writing all of the templating code anyway? What about your clients’ site where you’ll be the webmaster, and where updating the nav structure will be a simple HTML edit every six months?

Hard-code it.

I touched on this subject very briefly in response to an audience question when I spoke at the FOWD Tour in Bristol the other week and I’ll be expanding upon it again when I return to the subject for FOWD New York in November. There are times when it’s simply not practical to jump through all those CMS templating hoops just to achieve something that would take seconds to hard-code. So seriously, go out there and hard-code your nav. Stop worrying and get on with it.

But if you insist

For those of you who do want to create your navigation with WordPress’ built-in functions and therefore keep things as dynamic as possible — but want to control the ordering to some degree — here’s a solution you might be interested in, as suggested to me via email by David Smith:

<?php wp_list_pages('include=7&title_li=&depth=1'); ?> <?php wp_list_categories( $catargs ); ?> <?php wp_list_pages('exclude=7&title_li=&depth=1'); ?>

Although there’s some debate about whether making two database calls with wp_list_pages is a good idea, it’s certainly a solution, and demonstrates that WordPress can be relatively flexible when using include and exclude arguments.

66 comments

  1. Samantha

    Samantha

    23 September 2009 @ 09:45PM #

    amen. Saves a ton of time… especially for a personal site

  2. Ole Martin Kristiansen

    Ole Martin Kristiansen

    23 September 2009 @ 09:46PM #

    I tend to do the same thing myself. I got your back, Elliot.

  3. Matthew Haltom

    Matthew Haltom

    23 September 2009 @ 09:47PM #

    Great article Elliot. If someone does choose to go with those WordPress functions for listing pages, a good plugin to accompany it is “PageMash”. This allows you to re-order your navigation & hide pages from the main navigation. Has worked pretty good in the past for me.

    http://wordpress.org/extend/plugins/pagemash/

  4. Patrick Haney

    Patrick Haney

    23 September 2009 @ 09:48PM #

    I completely agree with the idea that not everything needs to be “updatable through the back-end.” I think we as designers and developers are so enamored with everything we can do with systems like WordPress, that we forget that sometimes flexibility comes with a cost. Instead of racking our brains over built-in functions that don’t quite do what we want or building custom functions of our own, why not make things easy on ourselves and write the static HTML for navigation instead? In a lot of cases, especially the ones you pointed out, it doesn’t hurt and it’s so much easier to deal with.

    This comes down to another case of “just because you can, doesn’t mean you should.”

  5. David Coveney

    David Coveney

    23 September 2009 @ 09:49PM #

    Or… you could use a simple plugin (or theme include) to control the navigation separately. Then you can have automatic and manual control, as required. Performance won’t be an issue.

    We have our own in-house solution based on some open source code we found, but we’ll be doing something slicker, simpler and more powerful soon which me may well release to the world.

    Using WP’s own methods is clunky, to say the least.

  6. Chris Coyier

    Chris Coyier

    23 September 2009 @ 09:52PM #

    Remember that WordPress DOES allow you to control the order of Pages, directly through the page itself:

    http://skitch.com/chriscoyier/nymgh/edit-page-digging-into-wordpress-wordpress

    It’s a little cumbersome perhaps, but it works, and it does ultimately effect the order that wp_list_pages outputs them in (as well as the order in which they appear in the Admin).

  7. Chris Garrett

    Chris Garrett

    23 September 2009 @ 09:55PM #

    Or how about just learn to iterate over a php array? That way you could just use get_posts() to return your pages as objects AND display them with your own markup… Truely genius!

  8. Byron Rode

    Byron Rode

    23 September 2009 @ 09:56PM #

    Finally, someone with a bit of status that agrees on something that has bugged me for ages.

    I fully agree with the whole post, especially with “public use” themes. I can however, add one bit of information for those again hard-coded navigation.

    If you are using pages as your navigation, there is a way to order the wp_list_pages() output.It requires adding the order number (0 being first) to your page settings, and then in the hook adding ‘sort_column=menu_order’, which will order the pages based on the number above.

    e.g. wp_list_pages(sort_column=menu_order&title_li=’);

  9. Rick

    Rick

    23 September 2009 @ 09:59PM #

    How wrong can you be. The best functionality is that which is used so infrequently that we forget about it. I can’t tell you how many times I’ve used the “potato” setting on my microwave – because I’ve never used it. But when my aunt was over during the holidays she pointed out that “your microwave has a potato setting, that’s neat.” As a web developer, to “say” your navigation is dynamic is sometimes worth the effort.

  10. Carlos

    Carlos

    23 September 2009 @ 10:00PM #

    there are some themes (most of them actually) that have these lines within the “nav” div.

    When you create a page, the title will show as a navigation item and you can make your own order by giving the page a number from 0 to… you decide. That’s the most simple solution I’ve found.

  11. Alex Rogahn

    Alex Rogahn

    23 September 2009 @ 10:01PM #

    Glad someone finally takes my perspective on this! I’ve been trying to convince my friends to just hard code navigation instead of being a lazy-bum and using Wordpress’ php snippets :P

  12. Graeme

    Graeme

    23 September 2009 @ 10:09PM #

    Definitely agree with that. I’ve just re-designed my own website and there are several things which are hard-coded, which I wouldn’t do on a client site normally but they’re areas that aren’t updated on a regular basis and take two seconds to change in the files.

    Eventually I’ll maybe change them into widgeted areas but I think it’s a balance between hard-coding things and deciding what should be dynamic. That decision on navigation could be done at the planning stage of the project about whether it should be hard-coded or not.

  13. Scott

    Scott

    23 September 2009 @ 10:11PM #

    anyone care to shed some light on what the problems with multiple instances of wp_list_pages?

  14. Steve Rydz

    Steve Rydz

    23 September 2009 @ 10:14PM #

    I agree with your solution here Elliot as hard coding nearly always seems to be the best option when it comes to navigation. Even when the client would like to add more pages they don’t always want them to appear in the main navigation.

    It is so tempting to make everything dynamic in Wordpress but as you say, unless it is for a public theme or a client who wants complete control over the pages and navigation then it really isn’t necessary.

    As Chris points out there are ways to control the order of pages quite simply from the page editor which is fine for smaller sites and blog but not ideal for every situation.

  15. DanC

    DanC

    23 September 2009 @ 10:21PM #

    Glad I’m not alone in doing this although it felt naughty when I took the plunge and hard-coded. The tendency to want everything updatable can really hold projects back sometimes methinks.

  16. Shane

    Shane

    23 September 2009 @ 10:30PM #

    I remember having some issues with dynamic page ordering with Wordpress.

    It’s a fair point that hard-coding is something that I’ve done to keep things simple.

    Just hope that your client doesn’t add a new page, right, because they won’t be seeing it in that top-nav. If they do, that’s an issue.

  17. Simon

    Simon

    23 September 2009 @ 10:33PM #

    Couldn’t agree more. I’ve always hard-coded my personal Wordpress project navigation links.

  18. Martin

    Martin

    23 September 2009 @ 10:36PM #

    Seeing this makes me feel much better about my decision :)

    I spent a while looking into this when building my site, I ended up using wp_list_pages and only including the IDs of the pages I wanted, just so if I ever want to move it, it won’t break the nav.

  19. Duncan Jimbo

    Duncan Jimbo

    23 September 2009 @ 10:40PM #

    I think this is something that should be taken care of when doing a site’s IA. If it is done well then there probably won’t be a need to change in the future. And I would rather have a dynamic setup for my personal sites since I know I won’t screw up.

  20. Jim Pannell

    Jim Pannell

    23 September 2009 @ 11:15PM #

    Very wise words Elliot! The amount of time I’ve spent perfecting 100% dynamic navigation using CMS systems is enough to make me weep! At the end of the day it simply isn’t worth the time it takes to do it (unless it’s easy using the system you’re using).

    Like you say – get over it. Your time is better spent elsewhere… like with your partner or family!

  21. Eddie Giese

    Eddie Giese

    24 September 2009 @ 12:11AM #

    There has also been a plugin developed called Classy wp_list_pages which allows you to assign more semantic class names to the navigation list items thus making them easier to style. As always, thanks for your excellent advice and grammar! :)

  22. Long Nguyen

    Long Nguyen

    24 September 2009 @ 12:13AM #

    If it’s personal, I often won’t even bother with a CMS.

  23. Miiitch

    Miiitch

    24 September 2009 @ 12:14AM #

    Couldn’t agree more! It’s absolutely a waste of time to insist on making the navigation dynamic unless it’s going to change so frequently that updating a few lines of code wouldn’t be worth it. For client work as well as my own, the navigation is always something where I completely ignore the options Wordpress offers to generate navigation. Not only is it easier, but it gives me more freedom as to how to set up the website.

    For example, if I have a Wordpress page that I would like to show up in the navigation, and another that I would not, how would I go about doing that dynamically? It’s too much thought (and wasted time) trying to find the answer, when I could just set things up and move on to the next part of the website within minutes.

    So thank you, for putting this far more eloquently than I could have!

    (ps. I absolutely love your blog design. Fantastic!)

  24. Andy Bailey

    Andy Bailey

    24 September 2009 @ 12:28AM #

    I struggled for ages to find some fancy way of displaying a two layer menu bar using pages and category commands and it felt like a triumph when I realised that I could just hard code it!

    glad to see I’m not alone!

  25. Nitin Reddy Katkam

    Nitin Reddy Katkam

    24 September 2009 @ 01:09AM #

    Alternatively, you could put the values into another file and include it in – probably within the config.php.
    …thinking along the lines of a resource file to store strings from back in the day.

  26. Jason Beaird

    Jason Beaird

    24 September 2009 @ 01:19AM #

    For personal websites, I wholeheartedly agree. I always hate making redundant css classes though so I do something like this within each (static) nav list item:

    I guess redundant inline PHP code is worse than redundant CSS, but it does the job.

  27. Jason Beaird

    Jason Beaird

    24 September 2009 @ 01:21AM #

    Wordpress ate my snippet. Here ya go:

    if (is_page(‘286’)) { echo ‘class=“active”’; }

  28. Andy Marshall

    Andy Marshall

    24 September 2009 @ 03:30AM #

    again, agree.
    I’m an expression engine kinda guy, but the same rules apply.
    And it’s easy enough to create an include with just a nav ul in it that is embedded in every page.

  29. Scott Barrett

    Scott Barrett

    24 September 2009 @ 06:26AM #

    Classy wp_list_pages is a great plugin and I’ve used it a few times in the past but it can be a bit buggy at times. Especially with 2.8.4. I really like the idea of just hard coding though. Thanks for the advice everyone.

  30. David Smith

    David Smith

    24 September 2009 @ 12:57PM #

    Thanks for the mention Elliot.

    I agree with you that it’s sometimes much easier to hard code your nav. Especially if you have a lot of complicated Wordpress hacks going on. Just use CSS selectors from the body tag to achieve an “current” state.

    However, if you are using only Pages then you might as well use the CMS’s wp_list_pages function.

    Also just to clarify things in the code example you provided, the “wp_list_categories( $cat_args );” function call requires an array of arguments to be stored in $cat_args as seen at http://bit.ly/PdUMt

    Keep up the great work and I like the monorail cat (http://bit.ly/hqjRV)!

  31. Rob

    Rob

    24 September 2009 @ 02:06PM #

    We have a custom built CMS where I work which gives the client complete control over navigation. We are now considering taking that control away. We often find that navigation gets abused, every stake holder wants a top level nav link, every offer or promotion gets a link, minor pages are sometimes given more priority over major links and new people join the company and think its a good idea to change the name of pages etc and its the user experience that suffers in the end.

  32. David Smith

    David Smith

    24 September 2009 @ 03:45PM #

    @rob

    Totally agree. I can think of a number of our clients who when given too much control will run away with navigation. Just too tempting :)

    Is there are way in WP to limit the things certain users are allow to edit. There must be right?

  33. Trent Walton

    Trent Walton

    24 September 2009 @ 05:21PM #

    I agree with Duncan & Rob from the project planning aspect. I think outfitting clients with universal CMS access to their site can be risky. Adding even one new nav link without consideration for overall site usability can have dramatically negative effects. For the record, I hard coded the nav on my personal site. It saved time to push pixels elsewhere. Nice write-up / conversation starter.

  34. Matthew Smith

    Matthew Smith

    24 September 2009 @ 06:29PM #

    Elliot, can you tell me how to make my comment dynamic? I don’t really want to write it here, I just want it to happen when I hear about your post. Does Wordpress do that?

  35. David Perel

    David Perel

    24 September 2009 @ 08:23PM #

    Thanks for mentioning this Elliot. People become too obsessed with making their site dynamic to the point that it sometimes takes more time to do it through an admin section that to just update it old school style.

    Except for the Theme pages on Obox Design I have hard coded all of our copy and the majority of the page layouts, people may gasp at that thought but in our case it works perfectly.

    Hard coded menu’s for the win :P

    P.S Lol @ Matthew Smith!

  36. Emil Bonsaksen

    Emil Bonsaksen

    25 September 2009 @ 01:05PM #

    I could not agree more. We always hardcode the menu, no reason (for us) to make the navigation dynamic.

  37. Leland

    Leland

    25 September 2009 @ 01:20PM #

    I pretty much always hardcode my navigation in my own WordPress sites, so it’s nice to see a lot of others do the same. It’s just easier to manage, plus I don’t mind editing code in my theme if I need change something.

    If you want more control over navigation links and want them “updatable through the back-end” you could probably use WordPress’ own built-in bookmarks functionality (with wp_list_bookmarks) which I’m surprised to see noone has mentioned yet.

  38. Kirstin Pauk

    Kirstin Pauk

    25 September 2009 @ 01:33PM #

    I totally agree – I hard code all my sites’ navigation. I personally hate to use the backend features and for me the fun of working with wordpress is getting your hands dirty in the coding. I also prefer to hardcode widgets etc as well.

  39. Gilbert

    Gilbert

    25 September 2009 @ 02:35PM #

    I have to agree with this one. I think on every personal site template that I’ve ever made I’ve resorted to hard coding the nav. It just makes sense.

  40. shah

    shah

    25 September 2009 @ 10:03PM #

    Thank You… Good Article… By

  41. Ben Matewe

    Ben Matewe

    25 September 2009 @ 10:57PM #

    Great article. Finally someone has said it loudly. May logic continue to rule over our decisions when coding.

  42. Dan Smart

    Dan Smart

    26 September 2009 @ 11:55AM #

    I hear where you (and a lot of others) are coming from. I recognise that it’s sometimes good to take away the control from an over-eager user who might mess up the navigation. And sometimes we do battle the built-in functions (maybe a call for Wordpress to improve the flexibility of their functions?)

    But for at the same time a porfolio or a small site, a lot of the time wp_list_pages is good enough, and I struggle to see why people would hardcode in those occasions. Dynamic is one of the reasons why we’re using a CMS in the first place. And I know that I sometimes change my Portfolio site – and don’t always have a lot of time to do it – so if I can make the change solely in one place (e.g. the dashboard) rather than two, then surely that’s better.

  43. Lawrie

    Lawrie

    27 September 2009 @ 11:58PM #

    Thank the lord for this awesome portion of sense. I’ve gotten into a couple of arguments with clients who wanted the nav to update automatically every time they added a page. Bearing in mind it’s usually 5 or 6 items laid out horizontally in the header, and you can see instant problems.

    One such client (who I spent a full week talking down from this insanity) has since added 93 pages to his site. Yeah.

    Oh, and thanks for this fantastic article on Umar Shalaman the thief. He just sent me an incredibly arrogant email talking about how one of my rather high-profile sites was ‘bad’. In fact, here’s some choice snippets from his email:

    “I’ve seen the official website – I think it is really bad and being a fan of the band I think it can and should be much better – for them and the fans.”

    “I’m the best designer you’ll ever come across – take a look at my work -
    www.hollisterbaystudio.com

    “…trust me, take a look at my work and you’ll know it will be amazing. If I had direct contact with the band they would take me up on this offer also.”

    Google disagrees, Umar!

  44. Daniel

    Daniel

    28 September 2009 @ 01:46AM #

    As a Wordpress developer, I’ve encountered this problem many times when I develop themes that have been outsourced to me by a web development company so that I don’t get to interface with the client at all. Wordpress could easily implement a system to fix some of the bigger issues with dynamic navigation, but they refuse to. Many times I end up having to use conditional code on hardcoded navigation, and I hate it.

  45. Max.W

    Max.W

    28 September 2009 @ 03:37AM #

    Yes definitely the hard coded method is best, I find that you have greater control of how the nav is displayed using this method.

  46. Jan Schuster

    Jan Schuster

    28 September 2009 @ 07:16PM #

    Hey Elliot, i tend to do the same thing. Hard-Code always saves a lot of time, when you’re not directly read into the Wordpress system.

    Anyways, i like to forward the quote you started with to another point worth thinking of in my opinion.

    When you Hard-code your navigation, what about Childpages? Name them? And i think it might take a little longer to do it via hard-code. Especially when you want to hide them on several pages.

    Ever thought about that problem when you hard-code your navigation?

    Greetings, Jan

  47. estudio web

    estudio web

    29 September 2009 @ 04:45PM #

    Muy buen blog de diseño! great blog! thanks from Argentina.

  48. Dan

    Dan

    30 September 2009 @ 06:41PM #

    I’ve controlled the order in which navigation links appear by manipulating the page IDs before but it’s clumsy. For the time and effort this takes, you might as well just hard code the nav. At least that way you get simple control over what links are included/excluded.

    A good point, well made.

  49. Tevi Hirschhorn

    Tevi Hirschhorn

    30 September 2009 @ 11:52PM #

    This is one of those beautiful examples where we can all see how Wordpress is inefficient at acting like a real CMS (rather than a blogging platform). It’s come a long way, but it’s not there yet.

    Drupal can set up menus quite easily, and is the main reason I’m trying to push it to be used by regular designers (not developers) more, especially for portfolio sites.

    I love Wordpress, but not as a CMS.

  50. Philippine Outsourcing

    Philippine Outsourcing

    07 October 2009 @ 09:49AM #

    I totally agree with you Elliot, I’m a hard coder myself. Generally the best way to get the results you want. Great Post.

  51. Harrison

    Harrison

    09 October 2009 @ 05:15PM #

    Yeah this is the advise from a seasoned professional.I support it all the way.

  52. Tyler Shaqiri

    Tyler Shaqiri

    11 October 2009 @ 12:58AM #

    Elliot,

    I loved this post; I recall e-mailing you about this very topic and I am glad you made an entry. Thanks for your help!

  53. Abhishek Nandakumar

    Abhishek Nandakumar

    13 October 2009 @ 10:16AM #

    Sound advice. If this gets picked up by more Google Searches, less phone calls and emails from people about WordPress template tags.

  54. Brian Miller

    Brian Miller

    13 October 2009 @ 11:55PM #

    I agree with Chris Coyier, this really isn’t that difficult…is it? I simply use wp_list_pages and exclude any of the pages I don’t want to show in the nav. As far as ordering I use the built in Order of Pages control. Wham done! Am I missing something…I’m still learning.

  55. Ange Chierchia

    Ange Chierchia

    14 October 2009 @ 03:03AM #

    I completly agree with you Elliot! I think, like you’ve said it, that hard-coding the nav menu is the best solution for personal sites/blogs or sites which navs aren’t always updated and keep static.
    In add to that, to hard code the nav menu is a faster way to design complex nav which include a catch phrase. It’s too complicated to implement a such nav menu using wordpress basics functions, in my case, anyway.

  56. Martin Lucas

    Martin Lucas

    19 October 2009 @ 12:59PM #

    Agree, I’ve been hand coding the navigations on my wordpress sites for ages – gives you all the control and definitely saves time.

  57. factotum218

    factotum218

    20 October 2009 @ 04:26AM #

    Great idea. I’m just introducing myself to working with the actual code and this looks like something great to tinker with.

    I’m a quite a ways behind the curve, but I just can’t bring myself to buying a theme anymore.

    P.S.
    A belated “Awesome, thank you!” on the starkers theme by the way.

  58. Tom

    Tom

    29 October 2009 @ 07:31PM #

    I think if your nav reaches a point where it’s changing every other day, there’s something wrong with your site structure.

    Users get used to navigation out of habit – if it keeps changing I think you’d lose people before they reached any of your content.

    Concrete your site structure, hard-code your nav, and put the time into making your site easier to navigate rather than harder!

  59. Big Buddy

    Big Buddy

    31 October 2009 @ 09:17AM #

    Or you could just use Modx CMS and do anything you want without hacking a thing.

  60. Tom

    Tom

    31 October 2009 @ 12:31PM #

    You could base your WP theme on Sandbox and instantly get post- and page-level control over your theme’s content using nothing but CSS.

    Using this together with a simple plugin to show/hide pages in the nav and WP’s own page ordering functionality, I’ve nailed my nav with minimum fuss and the ability to update it from the CMS.

    Hardcoding is fine in a range of scenarios. My approach is equally valid, efficient and sustainable.

  61. Joe Hickman

    Joe Hickman

    03 November 2009 @ 03:42AM #

    Agreed. Great post!

  62. Brandon

    Brandon

    03 November 2009 @ 04:27AM #

    Bookmarked to be used as a reminder for myself and a tip for others.

    P.S. I love how much I hate your site footer…

  63. Milos Dakic

    Milos Dakic

    06 November 2009 @ 11:00AM #

    When I first looked at WordPress this is what got me so frustrated as to how to do it best and future proof it as much as possible. Later I found my answer; I manage my own site. Hard-coding isn’t as bad as some people think, as not everything can be future/feature proof.

  64. Elizabeth Crane

    Elizabeth Crane

    15 November 2009 @ 12:27AM #

    My first reaction when reading this was that I am not a coder and it would have to be way too complicated for me. But on further reading of the comments I became more enthused and gave it a try. Much easier than I thought. Thanks for the confidence and help.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.