Call Us Today! (866) 377-4331 or Request a Quote

Auto Create Navigation Tabs for New Pages

68 Comments
  1. Thanks for the heads up on that Tristan, I fixed the ampersand issue. Unfortunately there’s not much I can do about the copy & paste issue. It’s either show the code in an easily readable format like it is, or make it copy and pasteable, but off-hand I don’t know of a way to have both.

  2. There is a minor but important typo in the code examples above.

    In the line that reads:
    wp_list_pages(‘include=’ . $pageIDList . ‘&title_li=’);

    & should be replaced with just a &

    Also to other readers, beware, when I copy and pasted the code from the examples it didn’t work. I had to type it into my text editor. I think there are some funny characters in the code examples that confused my webserver.

    Otherwise. Thanks for the awesome hack. It was just what I was looking for. Your article was very helpful for me, a novice at php.

  3. Thanks for the Code. Great.

    Question – how do I modify to include the original blog page (HOME) into the links – this is where my blog is. And it does not appear.

  4. @Sergio Sedas: You’ll need to hard code a link to the homepage if you want that. See the original header.php file for reference. You should be able to just copy and paste the home link from there.

    • I’m having the same issue – I can manage to get a “home” button, but it doesn’t contain my blog posts.

      Can you help, please?

      Thanks!

  5. hi John,
    I have tried to use your code to change my functions.php, but it does not work properly. Is there a way for you to post a .txt file so I can do a simple copy paste?

    Thanks for all the tips,

  6. Hi John,

    I was attempting to do the above actions but after changing the Header.php code, my page is coming up with just a dark grey background with no content whatsoever. I finished everything else as noted above, but still the same result. Needless to say, I changed everything back to the original code. I don’t think I typed anything in wrong, but I’ve at least figured out that the problem lies in the header code. Any idea what’s going on?

  7. @Alex: The code should work fine, but if you let me know the error you’re receiving, I may be able to help.

    @Jessica McKay: Make sure you’re not deleting any opening or closing html or php tags…that’s what it sounds like.

  8. Hello,

    Tristan Chambers or John – can you please explain in detail what the following line should contain:

    wp_list_pages(‘include=’ . $pageIDList . ‘&title_li=’);

    ???
    I get the following error – Parse error: parse error in c:usrkrasnalwwwwp-darekwp-contentthemesthis-just-infunctions.php on line 12

  9. @Darek: That line is using the WordPress template tag, documented at http://codex.wordpress.org/Template_Tags/wp_list_pages to display a list of links to certain pages.

    If you visit the link, you can see that two of the parameters that function (template tag) accepts are “include=” followed by a comma-separated list of page/post ID numbers, and “title_li=” followed by the title to be displayed before the list of links is returned.

    $pageIDList, after the other lines of code, is a variable that contains a comma-separated list of all the page ID numbers for the pages that use the custom field “NavMenu” that we set up in this tutorial.

    So, if you assigned the custom field “NavMenu” to four separate page numbers with IDs 2, 15, 27, and 32, then $pageIDList will end up being 2,15,27,32.

    The period is the standard concatenation operator in PHP, which joins strings, so after all is said and done, in the above example, that line would become this:

    wp_list_pages(‘include=2,15,27,32&title_li=’);

    Hope that helps.

  10. @Darek: I experienced the same problem. I just replaced all the ` by ” and it worked perfectly ( no more parse error). I think there is simply a problem with the copy/paste.

    @John: I managed to get my pages on top tabs ( main nav menu) but it looks like it has to be the same title as my page. This of course is a problem for long titles. I want to keep my long titles for my pages but still be able to put a link to that page in the main nav menu. A long title for my pages is good because it creates a long and precise URL ( good for SEO) but a short nav tab is good for user experience. I see from your blog that you managed to still keep the full name of your pages intact but link them with shorter nav tabs. In your case the example is : name of page, about_wordpresshacker, and the tab says only , about. How do you do it?

  11. @Darek: From Alex Teo’s response, I think I know what’s happening. The plugin I use to color code my php code samples like they are in this article, replaces ‘ with `….in other words…single quote with that slanted quote-thing just above the left tab key on a standard pc keyboard. If you change those quotes to make sure they are single quotes (same key on keyboard as double quote), you should be good.

    @Alex: Yeah, that’s a problem…I don’t use the auto tab creation…my nav links are hard coded. However, you could just change the page slug, which will change the actual URL, but it won’t change the title that appears when viewing that single page.

    If you’re fine with the title on the page itself being short, you can make the link the same, and then just change the page slug for the URL…if you’re looking for both the title on the page itself and the url to be long, and the link short, there’s no easy solution using the automated tab creation…your best be may be to hard code the links.

  12. thanks for your help John, I would like to keep my page title long and their URL too , simply because it makes it very targeted for SEO. So I guess now that I have learned how to auto create nav tabs, I will go back to the plain hardcoding. Where do I start? in the header?

  13. Thank you, it works now.

    Another question – button “Home” that was in the Navigation Menu at the very beginning is gone now. Is there any way to put it back – meaning a link to the main page to the NavMenu?

    (my test website can be seen on http://www.dczepiel.yoyo.pl )

  14. @Alex: Look in header.php…if you’re not sure, you can download the theme again and use the original header.php as an example since they’re hard-coded in that.

    @Darek: I answered that question in response to Sergio Sedas above

  15. I have added per your instructions on all of the pages and now when I go to my site I keep getting syntax errors.

    At first I copied and pasted the code, now I have retyped it all. At first I had a syntax error on line 12 of the functions.php page and now I have a syntax error on line 19.
    this is the error message: Parse error: syntax error, unexpected T_STRING in /home/content/e/d/a/edanportaro/html/cms/wp-content/themes/this-just-in/functions.php on line 19.

    This is line 19: ‘before_title’ => ”,

    Not sure what I should do now, I would appreciate any help. Thanks

  16. @Scott: Copy and paste your code from your functions.php file into notepad or another TEXT ONLY editor, then save it as .txt and send it to me at editor {a t} wordpresshacker [d ot] C o m

  17. Excellent guideline. Appreciate the time you have spent to create such nice article I hope, this will be useful for lots of people.

    Do the same work with blogger or is it only for wordpress templates?

    Sherin – Investinternals

  18. Thanks Sherin,

    I’m not sure about blogger as I’ve never tried that before.

  19. Excellent, thanks for this great enhancement!

    One problem I’m having now is that I cant seem to stop new pages I don’t want in the NavMenu appearing there. I’ve looked for the NavMenu property on the edit page and it doesn’t seem to be added with a value of yes by default so I’ve tried adding NavMenu and setting the value to “no” (without the quotes) but that doesnt get rid of it either. Any ideas how to stop every page appearing there now?

  20. @Jules: The NavMenu property should NOT be added with a value of yes by default. The tutorial explains that. What version of wordpress are you using? Did you copy and paste the code or did you type it in by hand?

  21. Yeah understood NavMenu shouldn’t be added by default but thought it might have been incorrectly hence checking for it anyway. WordPress version is 2.6.1 and yes I copied the code but got an error due to the ‘ being incorrect so had to manually change that for the correct ‘ character but apart from that its an exact copy.

  22. @Jules: Make sure the pages that you don’t want to show up do not contain the custom field at all. I just noticed a bug in the code that will cause the page to appear in the nav menu if the NavMenu custom field is set at all (regardless of what it’s set to – yes or no)

    I made an update to the code to solve the problem — Line 7 under “Create a Function to Build the New Navigation Menu” – if it’s not showing up now, give it a bit as the cache has to expire.

  23. Thanks for the update although it doesn’t solve the problem for me. I replaced line 7 (copied & pasted) but pages with out the NavBar property still appear in the top Menu. Just in case, I also added the custom field and set it to “no” but that too made no difference. Any other suggestions?

  24. Has anyone managed to get this working yet? I love the feature but I’m stuck now I cant add anymore pages without the NavMenu overfilling :(
    I’d really appreciate it if anyone could assist. Thanks Guys :)

  25. @Jules: Go ahead and send a copy of your functions.php file to me at editor {at] wordpresshacker dot {com} – first, copy the contents of the file into a standard text document (notepad) and then send it as an attachment.

  26. Hi, sounds good. But I have tried to do this trick using this Theme template “Stylized” (www.freewpthemes.net/preview/stylized) and they have bit different “Function Call” in the header.php as follows:

    <li class=”page_item”><a href=”/”>Home

    I have tried to replace with this as you suggested…

    And it did other bits to the end and caused an error with note saying line something in functions.php. I think the ‘menu’ is using includes pull, etc. Do you know the trick to get around to this? I want to add pages but don’t want to add navigagtion menu list (tabs).

    Hear from you soon, thanks dude.

    Lyndon.
    - London UK

  27. Sorry – the part missing code seem to have eased off itself on above – here it is the rest:

    <li class=”page_item”><a href=”/”>Home

    Sorry its all on one line…!

  28. Damn, it still wipe off the other bits of codes that I am trying to show you…. sigh. Let me know how can I show you the code! Maybe download the header.php code from free ‘stylized’ them website (www.freewpthemes.net/preview/stylized). Let me know, thanks champ.

  29. Would it be possible for someone to let me have a copy of the function.php file please? No matter what adjustments I make (as mentioned above) every time I try it I just get

    Parse error: syntax error, unexpected ‘=’ in /home/content/d/a/v/davieb/html/dbpwordpress/wp-content/themes/this-just-in/functions.php on line 12

    Thanks

  30. To everyone having trouble copying and pasting the code: I’ve updated the syntax highlighter so that it doesn’t mess with the quotes like before. Click the “view plain” link to open a popup with plain text code that is easily copy and pasteable.

  31. How would I add an extra “” in between each nav link?

    I want to add simple vertical dividing bar between each link.

  32. How about border-left: 1px solid black; or something like that in the CSS?

  33. I just replied to your contact form inquiry. One other thing, have you given the navMenu custom field a value of "yes" (without quotes) only on the pages you want to show up in the navigation menu?

    Also, make sure you have this line where it belongs (a previous version of this article had this line written incorrectly and was causing similar errors):
    if(strtolower(get_post_meta($page->ID, $key, true)) == 'yes')

  34. I am having trouble with this code:
    it is showing all pages and not just the ones marked with the navMenu; have coppied the code directly.

    Any ideas?

  35. Hi everybody,
    I’ve just discovered this post and really like the idea of using custom fields for this purpose.

    Maybe you’re interested that I wrote about a dynamic menu that you can manually manage from the widget screen.

  36. <!– Main navigation menu–>
    <ul id="menu">
    <? // This code gets changes the home page tab to current_page_item.
    $this_page = basename($_SERVER['REQUEST_URI']);
    if($this_page == "index.php") { $class='page_item current_page_item'; } else { $class='page_item'; } ?>
    <li class="<?=$class?>">Home</li>
    <?php buildMenu(); ?>
    </ul>
    <!– End Main navigation menu–>

  37. is there a way to implement this functionality so that it shows the categories in the tabbed menu instead of pages?

    • Anything’s possible, but that’s not easily explained based on this example, and, unfortunately, it’s not quite as simple as this. Maybe I’ll do a write-up on that in the future.

  38. How could we add “dropdown” menus to the menus ? Wether it be through subpages, or by handwiring the options.
    Thanks,

    Sergio
    PS. Your code works great ! Thx.

    • That’s a topic for it’s own post entirely. I’m actually working on a tutorial for something like that now based on a recent project I did, but it’s a bit complicated and it’s taking me some time to simplify it into something manageable to post here.

  39. The fix worked great. Thanks a lot for providing a simple explanation!

  40. I am also trying to get the navigation tabs to only show the pages that have the custom field NavMenu. I see some code was mentioned in your Nov. post; is this what I need, and wher does it go?

    Otherwise loving the theme so far!

    thx

  41. Great template. Do I have to do all of the above to make it so that pages appear in the top navigation bar?

  42. Thank you for all the hard work you have created. A+

    I installed your code to your theme “this just in” and it works great.

    Question: Is there any way to have the page the “current’ page to not be highlighted to indicate that you are still on the “current” page. Thus the “current” page will not have a highlighted background?

    Again, thanks.

    Shane

  43. really needed this article, great theme, thanks again john

  44. Thanks matey! That hit my confusing question right on the nail. I guess it’s helped by the fact that I’m using your theme now. <3 it, well done.

  45. It worked! However, the tabs are arranged alphabetically, and my home tab is in the middle. Is there a way to rearrange?

  46. What does this mean? I have seen other errors, in the comments, but I wasn’t able to find the one I am getting.

    Warning: Cannot modify header information – headers already sent by (output started at /home2/dreadloc/public_html/lives/wp-content/themes/this-just-in/functions.php:2) in /home2/dreadloc/public_html/lives/wp-admin/theme-editor.php on line 70

    I get this every time I try to change anything.

    Thanks so much!!!!

  47. ps. It gives the error on different lines each time, and also it still allows me to make the changes, it just acts like it isn’t going to.

    Any suggestions?

    • Hmm. I’m not sure what that could be offhand. I’m not sure if the register_sidebar function sends header info, but that’s what this error suggests, and that seems to be conflicting with the headers being sent by the theme editor.

      I can’t remember the last time I used the theme editor though so I’m not as well versed with that as the other parts of WordPress. What version of WP and This Just In! are you using?

      • Hi John, same problem over here…
        Warning: Cannot modify header information – headers already sent by (output started at /var/kunden/webs/akirsch/family-kirsch.de/htdocs/wp-content/themes/this-just-in/functions.php:32) in /var/kunden/webs/akirsch/family-kirsch.de/htdocs/wp-includes/functions.php on line 784

        I use latest version of wordpress: Version 2.8.1 DE-Edition
        and This-Just-In 2.9

        Thx for help
        Alex

        • Hey Alex, start a thread in the forum and post the contents of your functions.php file there and I’ll take a look.

  48. thanks for the well explained hacks (plus … thanks for explaining the code … most programmers don’t take the time… much appreciated). Anyway.. How can I control the order of the tabs on the NavMenu? if I reordered the array of page ids would that work? By default, they appear to populate alphabetically. Thanks!

  49. Hello John,
    Please could you try to help me out here. I simply cannot add any main navigation tabs to my blog. I think I have added all of the code carefully and correctly. I’m a little less sure about the Custom Fields on the Edit Page: I see Name and Value, not Key and Value (as you show); perhaps I have a different version of WordPress (2.7). What do you suggest I check? Can I send you anything to have a look at? Please help me out. I really like the theme, and have settled into it. Having navigation tabs seems to me important for the general presentation. I just don’t know what is preventing it from working. Many thanks in advance! Best regards.

    • Yes, name and value are what I’m referring to there…it must have changed since I wrote that post. Are you getting any error messages when you try this?

  50. Many thanks for this information. I’d spent hours trying to find a way of having tabs across thetop of the page and your explanation was easiest and it works. Fab!

    Kind regards,

    John

  51. thats awesome John, even I could follow and implement! Thanks!!

  52. Thanks John! I am in the process of changing over to wordpress (and a noob!).

    I LOVE wordpress and your theme is great, I admit I was a bit daunted by having to code the page headers but you must have explained it well because it works ;-)

    I don’t regret learning basic html (before falling in love with wordpress) because it gave me the confidence to tackle this!

    However, I have been studying: html, css, php, ftp, wordpress, e-commerce, internet marketing, seo, sem, linking strategies, writing copy etc etc and after a whole year I feel like I only have a broad overview!

    How on earth do you guys manage to learn all this stuff (and have a life!) before you die is beyond me!

    Learning the basics is a full time job for a 40 year old former builder!!

    Hope to stick around though John,
    Thanks again for the tutorial,
    Stay well
    Ian

    • How on earth do you guys manage to learn all this stuff (and have a life!) before you die is beyond me!

      That’s funny. For the first two years in this business I DIDN’T have a life! There’s definitely a lot to learn, but the good thing is there are a lot of great resources out there, especially when it comes to WordPress.

      The one thing I’d suggest with regard to SEO is be careful who you take advice from, especially when it’s in a forum. In my experience a lot of people give advice on things they haven’t actually tried yet…they’re just regurgitating information they heard somewhere else. It’s hard to sift through what’s right and what’s wrong, but what I can say is learn as much as you can, try as much as you can to figure out what works, and remember who you’re taking advice from at all times.

      Good luck!

      • Thanks John,
        So agree with your SEO analysis; I posted a little seo enquiry on Elance and what those guys proposed scared me away forever! Their ‘techniques’ just adds mountains of ‘fluff’ to the already crowded web.

        Starting up auto blogs pointing towards yours and harvesting links etc…sad. I’ll aim for good content and building relationships…sink or swim, I enjoy it, so I don’t much care which!
        I so like your ‘this just in’ I’m bound to see you around John,
        Stay well and thanks for making the time!
        Ian

  53. Hey John,
    Thanks for the explanation and great theme.
    But now i have what may be a very simple question.
    I have the navigation tabs i need made for my pages, but now the “home” tab has dissappeared.
    Since my home page is my blog, i cant figure a way to put the custom tag on it to make it a tab.

    Any advice?

    • Hey Kyle, your best bet is to just hard code the homepage link in just before the code to pull in the rest of the nav.

  54. Hi John,
    I saw Kyles comment and want to do the same but dont know how to hard code it in, can you help?

    Thanks
    Ed

  55. Hey I love this script and tutorial, very helpful! How do you change the order of the tabs?