65 Responses

  1. kel
    kel Published |

    Good tip – I’ve been using this for quite a while – creating sub navigation on more complex sites – example :category: subnav1, subnav2 etc – There’s a plugin that allows you to choose pages for linking, however this doesnt work in the bookmarks section – only posts and pages.

    Reply
  2. mkjones
    mkjones Published |

    I used a similar system on this site:

    http://www.barnsleyhospital.nhs.uk/a-to-z

    The ‘A to Z’ needed to be separate from the main content structure because certain medical terms such as “Paediatrics” are often overlooked by users simply looking for terms such as “Children” or “Baby”.

    All I had to do was to create a sub-category for each letter of the alphabet and then ask users to cross link their pages. It worked pretty well.

    Reply
  3. Lyndi
    Lyndi Published |

    What a great idea. Allows one to maintain those menus right there in the WP back-end. Thanks for this.

    Reply
  4. Agus MU
    Agus MU Published |

    Justin,

    I found this plugin. Give it a try

    Menu Creator WP Plugin

    Reply
  5. links for 2009-01-07 | Links | WereWP
    links for 2009-01-07 | Links | WereWP at |
  6. Derek Perkins
    Derek Perkins Published |

    This brings up an idea I’ve been contemplating for my new site design. While not utilizing links, I want to create two menus (though in theory, three or more would be just as easy once implemented). I would probably use a filter on the wp_page_menu similar to the solution above based on tags. One menu would load all pages with the “menu1″ tag and the other for all the “menu2″ tags. Would this be the best way to tackle it?

    Reply
  7. kristarella
    kristarella Published |

    Nice. I love when people give tangible code tutorials instead of just wrapping it up in a plugin.

    I’ve had some success working around the highlighting issue with jQuery. Adding classes to the link via jQuery according to what the link contains.

    Reply
  8. Jeromy
    Jeromy Published |

    It’d be great to add a sort here as well, this template tag accomplishes the same thing, but allows for a little more control:

    <?php wp_list_bookmarks('categorize=0&title_li=&category=12&before=&after=&show_images=0&show_description=0&orderby=rating&category_before=&category_after='); ?>

    Great writeup though. I’m interested as well in dynamic menu highlighting – perhaps a start would be to add a counter that would add a ‘link1′ ‘link2′, etc to each link – that would at least get a class in there. Than, you could at least use the:

    to add a body class on that page that than targets the ‘link1′ or ‘link2′ and changes it. Just a thought.

    Reply
  9. Jeromy
    Jeromy Published |

    if ( strpos( $_SERVER[`REQUEST_URI'] , '/page-slug' ) === 0 )

    That was the 2nd example I was trying to show

    Reply
  10. Jeromy
    Jeromy Published |

    kristarella – could you post your jquery idea here (or somewhere?)

    Reply
  11. kristarella
    kristarella Published |

    Justin — I totally agree regarding plugins. I try to keep them to a minimum. They often add extraneous code and I hate being dependent on them if they stop being developed.

    Yeah, jQuery might be a bit much just for the nav, but if it’s already loaded might as well!

    Jeromy — the jQuery code for adding nav classes would be something like the following in the header area.

    <?php wp_enqueue_script('jquery'); ?>
    	<script>
    		$(function(){
    			$("div#page-nav li:contains('About')").addClass("about");
    		});
    	</script>,

    Any list item containing the word “About” would get a class of “about”. Then you would style accordingly. To get highlighting on the about page I would use specific CSS for that page by having page specific body classes. So, my CSS would be

    div#page-nav li.about {background-color: #ffd;} /* usual color */
    body.about div#page-nav li.about (background-color: #ddf;} /*about page color */

    Alternatively you could wrap your script in conditional tags to apply, for example, “current-page” classes to those items.

    Reply
  12. Jeromy
    Jeromy Published |

    great points guys – the one underlying problem is if I’m building sites for clients and they’re adding menu links like this, ad nauseum, I guess that’s where it has to be “really” dynamic. Guess we’ll all have to really think “outside” the box ;) – I normally just use wp_list_pages, but I have a client right now where that frankly just won’t work – so some pages will have an “on” state and others won’t. Don’t know if it’s a big deal to them, but I’d sure love to figure it out!

    Reply
  13. kristarella
    kristarella Published |

    If it was for a client and you wanted to keep things dynamic, I might rip the code out of wp-includes/bookmark-template.php and add classes into the bookmark output.

    Reply
  14. Jeromy
    Jeromy Published |

    wow – impressive man! Let us know if/when you get it finalized – we should contribute this back to the whole community (would probably be better suited in functions.php no?)

    Reply
  15. Jauhari
    Jauhari Published |

    This is the alternate way and look interesting.
    For me it’s too complicated but I like the idea ;)

    Reply
  16. Jeromy
    Jeromy Published |

    Wow, you did it man! Looks great – ran into a weird occurrence though – check out this page:

    http://www.lifewaytempsite.com.php5-4.websitetestlink.com/knowledge-base

    Notice both the Browse and Search links on the left are “on” – even though the url matches only one of the links. Strange?? Also, wasn’t sure from your earlier answer, but where on this line would I add the ‘orderby’ attribute:

    $bookmarks = get_bookmarks(array('category' => $cat_id));

    Reply
  17. Jeromy
    Jeromy Published |

    figured out the sorting, and it would seem that no matter how they’re sorted, the link below the “current” link is always given the “current_page_item” class as well.

    Reply
  18. How to create an image gallery using WordPress bookmarks (links)
  19. kiran
    kiran Published |

    Great tutorial.Thank you.

    Reply
  20. Mik
    Mik Published |

    Here via Lyndi’s Nice2All site, great tip and I’ll give it a try.

    Reply
  21. Mik
    Mik Published |

    Trying on a copy of WordPress on my local machine, using hybrid with leviathan child theme. It is probably obvious, but how do I get the links in an order I like, I currently have the about page listed first then home, how do I get home to always be the first listed?

    Reply
  22. TJ @ Smartblogtips
    TJ @ Smartblogtips Published |

    Great tutorial and innovative idea. I will surely put this to use on some of my client’s websites.

    -
    Thanks
    TJ

    Reply
  23. Eskil
    Eskil Published |

    Is it possible to do this if you are running your blog on wordpress.com or do you need to have to host wordpress yourself?

    Reply
  24. Max
    Max Published |

    Just spotted this post. A couple of weeks ago I released a very simple plugin that allows to manage your navigation in a very easy way without any custom PHP coding. I think it’s very relevant to your post and would be useful for WP newbies as well as savvy users. The plugin also has settings for conditional navigation appearance – it allows custom navigation widgets to appear on specific pages or sections of your WP blog/site.

    Here is a link to the plugin if you would to take a look http://wordpress.org/extend/plugins/simple-sidebar-navigation

    Reply
  25. Max
    Max Published |

    Justin, the only time when you’d need to touch the theme template file is when you need top/horizontal navigation (which is optional and doesn’t even exist in some themes at all). Otherwise, if you have already defined sidebars by your theme – all you need to do is to add navigation widgets to them via Widgets dashboard.

    Reply
  26. Derek Perkins
    Derek Perkins Published |

    What I’m doing is using the wp_list_pages function. It lets you filter pages out by meta data, so I just add a custom field called “navmenu” to each page I want listed, with a value of “topmenu”. Doing it this way, I have my top navigation filled with those pages, plus my footer menu showing all the pages with the “bottommenu” value. It isn’t a plug and play solution for the average user, but if it were embedded in themes, it would make menu creation and maintenance by users incredibly simple.

    Reply
  27. Max
    Max Published |

    I see your point now, Justin. I’ll see if I can implement your suggestion about the wp_page_menu() filtering.

    Reply
  28. johnny_n
    johnny_n Published |

    Fantastic, Justin!

    I’m following up Mik’s last post though — what’s the best way to custom order/filter the nav instead of the default alpha-order?

    Reply
  29. Stefano
    Stefano Published |

    Justin,
    as usual great tutorial and great follow-up and comments!
    Some ideas:
    - why not using the “category_name” instead of “category_id”? cat names are more persistant and doesnìt changes between various installation etc. get_bookmarks() support category_name as well. You could then hardcode the function in your themes and just instruct the user to create the appropriate links category and fill it…
    - For the ordering issue: I normally use the field “notes” filled with numbers: 0, 1, 2, and set get_bookmarks() with ‘order_by’ to ‘notes’

    What do you think about it?

    Stefano

    Reply
  30. johnny_n
    johnny_n Published |

    Thanks for the tip, Stefano — I ended up using modified code from Jeromy’s post above and custom ordering is working great. I had to modify bookmark-template.php in order to stop if from adding additional code which was throwing off my css, but all works great.

    Reply
  31. johnny_n
    johnny_n Published |

    To clarify from the last post– I ended up using wp_list_bookmarks function, which my theme had altered. Hence the modification to a file that doesn’t actually appear here.

    Reply
  32. ekanna
    ekanna Published |

    Hi Justin Tadlock,
    Nice Article. You have demonstrated nicely on how to create a menu bar using the links from a category. But i would like to know how to create menu bar using Link Categories? Do you u have any idea on it?

    Reply
  33. My Today’s Diigo 02/04/2009 « Rif.wp memo
  34. TheFrosty @WPCult
    TheFrosty @WPCult Published |

    That almost give’s me what I need, quite a cool little code. Just really need to have the ability to at a drop down menu, then be able to add jQuery into it.

    Reply
  35. Webstractions
    Webstractions Published |

    Justin – on your original code sample, once one of the if conditionals are met, then $class will always contain the appended current_page_item class for the items following it in the foreach loop. If you reset the $class variable inside the foreach loop, then everything will work out fine.

    Reply
  36. Matteo Stagi
    Matteo Stagi Published |

    Very interesting article. I’ve started from your code to build a customizable menu for Thematic Framework for WordPress. It includes also drop-down subitems, using JS Superfish included with Thematic theme. I’ve added the ability to change item position on menu using the “rating” attribute of the link.

    I’ve adapted your code for Thematic but I guess it can works with any theme just adding superfish js code to it.

    The article is in italian but I tried to write a partial translation in english: http://www.matteostagi.it/a-customizable-menu-for-thematic-for-wordpress/

    Reply
  37. diigo 05/11/2009 (a.m.) | synapsenschnappsen
  38. Wordpress-only 05/12/2009 | synapsenschnappsen
  39. Ryan
    Ryan Published |

    Brilliant solution. I have used bookmarks before as menu items, but was stuck with how to add the “current_page_item” class. This function works great.

    One thing, I was having trouble with $class not clearing each time through the foreach. Moving the $class = 'page_item'; to just inside the foreach sorted that out.

    I also added the orderby=rating attribute when calling the bookmarks so as to give the end user an easy method of ordering their menu items. As main navigation is rarely more than 9 menu items, using the link’s rating (0-9) is an easy way to control what order the links are displayed in. To do so I simply changed:

    $bookmarks = get_bookmarks(array('category' => $cat_id));

    – to –

    $bkmrkqry = 'orderby=rating&category='.$cat_id;
    $bookmarks = get_bookmarks($bkmrkqry);

    And, one last change, as strchr() uses up more memory than strpos(), I changed:

    $page_uri && strchr($bookmark->link_url, $page_uri)

    – to –

    $page_uri && (strpos($bookmark->link_url, $page_uri) > 0)

    Thanks again Justin!

    Reply
  40. clevinson
    clevinson Published |

    Hi. I really appreciate this post. I added the following function to my functions.php file, so that I can use widget logic to display a link_category on any page and all of it’s sub-pages. I thought others might be interested in it too.

    function is_page_or_subpage( $name ) {
    	// a modified version of code from http://www.mattvarone.com/wordpress/is_subpage-function/
    	global $post, $wpdb;
    	$ans = false;			
    
    	if( is_page($name) ) 
    		$ans = true;
    	else if ( is_page() && isset($post->post_parent)  ) 
    	{
    		$itsParentID = $post->post_parent;
    
    		while ( $itsParentID !== '0' ) {
    			$p = $wpdb->get_row( $wpdb->prepare( "SELECT ID, post_name, post_parent FROM $wpdb->posts WHERE ID = %d AND post_type = 'page' LIMIT 1", $itsParentID ) );
    			if ( !$p) break;	// no record found
    			
    			if (isset($p->post_name) && $p->post_name === $name) 
    			{
    				$ans = true; 
    				break;
    			}
    			if ( isset($p->post_parent) ) $itsParentID = $p->post_parent;
    		} // while
    	}
    	return $ans;
    }

    Here is an example of how to call it. Just place is_page_or_subpage('technical-help') in your widget-logic box.

    Reply
  41. Eddie
    Eddie Published |

    I’d rather use the method above, but since I need drop down menus, I ended up using a neat little plugin to help accomplish essentially the same
    http://txfx.net/code/wordpress/page-links-to/

    Reply
  42. clevinson
    clevinson Published |

    @Eddie
    Thanks for the tip on the “page-links-to” plugin. That is going to be really useful.

    Reply
  43. Eddie
    Eddie Published |

    indeed, it is pretty flexible. the only menu call I need is wp_list_pages() and I can insert links to categories, external sites, or anything else as pages. one of the best aspects is the ease you now have to mix all those items while keeping full control over the order they are displayed. the only thing you cant do, but I would like to figure out a mod that allows it, is link to javascript or to # (click goes nowhere)

    Reply
  44. Dave
    Dave Published |

    There still seems to be a problem with current_page_item classes in Hybrid. Adding Justin’s code gives me this:

    Suggestions?

    Reply
  45. Dave
    Dave Published |

    Try that again with the code:

    Reply
  46. Dave
    Dave Published |

    How the hell do I add code into a comment?

    Reply
  47. kristarella
    kristarella Published |

    Dave, you need to escape any HTML.

    Reply
  48. Dave
    Dave Published |

    Thanks Kristarella, and sorry for spamming the comments Justin. OK, here’s my code (hopefully):

    <ul class="bookmarks xoxo">
        <li class="page_item current_page_item"><a href="#" title="" rel="">Link</a></li>
        <li class="page_item current_page_item current_page_item"><a href="#" title="" rel="">Link</a></li>
        <li class="page_item current_page_item current_page_item current_page_item"><a href="#" title="" rel="">Link</a></li>
        <li class="page_item current_page_item current_page_item current_page_item current_page_item"><a href="#" title="" rel="">Link</a></li>
        <li class="page_item current_page_item current_page_item current_page_item current_page_item current_page_item"><a href="#" title="" rel="">Link</a></li>
    </ul>
    Reply
  49. Removing Pages From Navigation in WordPress | Es Developed - Fresh Website and Graphic Design
  50. Chris
    Chris Published |

    For anyone having trouble, make sure to make the changes recommended by Ryan in his comment from June 17 (http://justintadlock.com/archives/2009/01/06/easy-navigation-menus-in-wordpress#comment-133507)

    Justin, it would be great if you would update the original posting with those changes.

    I didn’t want to use the ratings to arrange sort my links, so I used the notes field instead, changing Ryan’s line

    ‘$bkmrkqry = ‘orderby=rating&category=’.$cat_id;’

    with

    $bkmrkqry = ‘orderby=notes&category=’.$cat_id;

    Add a 0 in the Notes field of the link you want first, a 20 in the Notes for the link you want last, and some other number for each link in-between. Even though I only have ~9 links, I find it faster to re-arrange them this way, as you don’t have to shuffle them around.

    Reply
  51. Phil
    Phil Published |

    Hi Justin,

    Great info! Is there a way to add this to the existing page menu, so that the bookmarked links will be added to navigation, yet IN ADDITION to existing items? Right now, my existing pages are taken off the menu…

    Thanks!

    Reply
  52. links for 2009-10-01 | Digitalistic - Mashup or die trying
  53. evden eve nakliyat ve depolama
    evden eve nakliyat ve depolama Published |

    indeed, it is pretty flexible. the only menu call I need is wp_list_pages() and I can insert links to categories, external sites,

    Reply
  54. josephine
    josephine Published |

    thank you for this tutorial and it is really useful to us in wordpress community.

    Reply
  55. Hayes Carter
    Hayes Carter Published |

    thanks alot for this amazing tutorial, just what I was looking for :)

    Reply
  56. zsiswick
    zsiswick Published |

    Regarding the current_page_item class issue not working for some people, I came up with a fairly rough way of handling it in jQuery:

    function getHost() {    var url = window.location.href;    var nohttp = url.split('//')[1];    var hostPort = nohttp.split('/')[0];    return url;}jQuery(document).ready(function() {	var theURL = getHost();	jQuery("div#page-nav li.page_item a").each(function(){		if ( jQuery(this).attr("href") === theURL ){			jQuery(this).parent().addClass("current_page_item");				}	});});

    Essentially what this is doing is getting the current URL and comparing the string to an unordered list of links, if the href matches it assigns the current_page_item to the parent

    Obviously the script could be enhanced to handle slight differences in the URL, but it does work if they match exactly.

    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php