elegant themes

How to remove the link to parent pages when using wp_list_pages in WordPress navigation

| July 8, 2010 | 23 Comments

Recently I was working on a client’s WordPress website and he made an interesting request, that I am actually surprised we don’t see more often. He wanted the top links on his navigation bar to not be live links, and only the sub-pages should actually link to pages on his site.

In this case the top page on the navigation bar was called Galleries, which is the parent page for sub-pages with galleries for wedding photos, wedding videos etc. He didn’t want a main galleries page, but instead he wanted it to be a kind of folder for categorizing the various galleries he was going to have on other pages in his site.

Since we are using wp_list_pages, we can’t unlink each page on an individual basis since the navigation bar is dynamically formed. So I needed some way to keep using wp_list_pages so that the client can control the navigation bar, but unlink the top Galleries page.

I found the answer on what I think is one of the best forums around of internet and computer experts and people who are eager to help one another: Digital Point.

After a few suggestions from people on the forums, I finally got an answer from the awesome bvraghav.

In the header.php section of the file I embeded a javascript code that looked like this:

<script type="text/javascript">
jQuery(function($) {
$("li.page-item-283").children("a").attr('href', "javascript:void(0)");
});
</script>
<script type="text/javascript">jQuery(function($) {    $("li.page-item-283").children("a").attr('href', "javascript:void(0)");});</script>

This is how it works:

  • The  jquery (a javascript framework) is used to replace the value of href property in the required html node ( <a href=”your-galleries-link”>…. </a> in this case) with “javascript:void(0)”.  Looks like this:  jQuery(function($) {
  • The following code selects the li element with: $(“li.page-item-283″). In this case 283 the page number that we want to void the link for (in our case the top Galleries page).
  • The next part is the  children function which selects all immediate children with tag a: children(“a”) . This relates the child pages to the gallery pages and keeps their links.
  • After this I had to change the attribute href to “javascript:void(0)”, which looks like this:  .attr(‘href’, “javascript:void(0)”); This turns the gallery link into void so it won’t direct anywhere.

All this comes together to look like the code above.

If you want to make all top level links unlinked, use the following code:

What I’m wondering is if the new WordPress navigation system allows users to include items in navigation bars that don’t actually lead anywhere. Anyone know?

Tags: , , , ,

Category: Code Snippets

About Miriam Schwab: Miriam is the friendly CEO of illuminea, a WordPress design and development agency. Miriam is a huge fan of WordPress and has been using it for over five years now. In addition, Miriam and her team have been organizing the local Israeli WordCamp conferences for the past few years. View author profile.


Comments (23)

Trackback URL | Comments RSS Feed

  1. Tony Gray says:

    In WordPress 3.0 using the new menu tool you can create a “custom” top level link with a URL and then edit the link and remove the URL. This gives the same result as your article describes. See an example on a site I’m currently developing at http://oaklandbaptist.tgrayimages.com/

  2. […] How to remove the link to parent pages when using wp_list_pages in WordPress navigation : WP Garage […]

  3. Ryan says:

    JS is a hideous way to do this. Better to strip them out with PHP IMO.
     

  4. I’m also surprised that more people don’t want the navigation bar to be live links.  Oftentimes these pages are just duplicate information – links of what can be found in the sub-pages, thereby eliminating the whole point of having a menu in the first place!

  5. […] is today tips that we want to share. This code original by Digital Forum user and shared by WP Garage. This tricks using pure jQuery, how to run jQuery without conflict you can revert to my Fix jQuery […]

  6. Ryan says:

    This is a Nice WordPress trick you have there. Thanks

  7. John Wooten says:

    Interesting…I’ll have to try this out.  Usually clients want the parent link to be a duplicate of one of the child pages.  I usually use a redirect plugin to redirect the user to the child page.  But this makes sense too.  When I hand-code dropdowns, I usually do not have the parent link go anywhere…it just triggers the dropdown.

  8. Peter says:

    If you want parent menu items unlinked you can do this on a per page basis using the solution at:
    http://wordpresstips.info/parent-menu-item-as-a-label-only/

  9. Elena says:

    Hi, please can somebody tell me if Mouse will change over the link. I mean the hand symbol, I would like to unlink parent menue and I would like that the mouse didn’t change and people think that there is a link. Thank you very much for a respond. Please help me this issue makes me crazy. Lovely Elena

  10. Peter says:

    @Elena,
     
    this would involve a css change, and would vary depending on your theme, but using firebug addon for firefox you can hover over the parent menu item to find that part of the css that says:
    cursor: pointer;
    which needs to become
    cursor: auto;
    I was able to do so without affecting other menu items that did not have children but without knowing any more about your theme I cannot say. Good luck!
     
     

  11. Elena says:

    Thank you Peter for your respond, your solution works, but what I have to do if I would like deactivate a specific menu?
    Elena

    • Peter says:

      Again without knowing your theme I will take a long shot here, but you could copy and paste the entire css rule so it appears twice, one with cursor: pointer; and the other with cursor: auto; and perhaps precede the second copied rule with .cursorauto like this:
       
      .yourexistingmenu {
      cursor: pointer;
      blah: blah;
      }
      /*above menu copied below*/
      .cursorauto .yourexistingmenu {
      cursor: auto;
      blah: blah;
      }
       
      and then in the php file where the menu (that you want to modify) exists in the php code, wrap that code in divs, like this:
      <div class=”cursorauto”>
      (code the creates the menu you want to modify)
      </div>
      this is the general “gist” but without knowing your theme in detail I cant account for any “ifs” or “buts” in how your theme is coded.
       

  12. Elena says:

    Thank you Peter.
    Namaste

  13. Gustaw says:

    Insert in header.php this script
     
    <script type=”text/javascript”>
    jQuery(function($) {
    $(‘ul.children’).parent().find(‘a:first’).removeAttr(‘href’);
    });
    </script>

  14. Stephen says:

    The new WordPress has a function called “show as seperator in menu” on the page menu options. Cool function and does the job of un-linkg parent pages.

  15. Jenny says:

    After many hours of searching, I found an easy solution in wordpress support :
    http://en.support.wordpress.com/menus/

    Scroll down to the “Adding Static Top-Level Tabs” heading for a complete description. 

    Go to your Menus page (Appearance > Menus)
    Add a Custom Link and set the URL as #. Using # will prevent the page from refreshing when you select the tab.
    Label your link and hit the “Add to Menu” button.
    Organize your menu items like you would normally do, hit the “Save Menu” button, and you’re done!

  16. Frederik says:

    Hi everyone, great & useful subject!

    Does anyone know how to solve the following problem:

    I’m using a navigation menu on a WordPress website. It’s working perfectly, even on an iphone and ipad.

    However, on an android phone it’s not working fine. If I tap the parent menu item, I want the submenu items to show. But on an android phone it opens the page which belongs to the parent menu item directly (and you see the submenu items shortly).

    So you can’t click the submenu items. Because after tapping the parent menu item it starts loading that page directly.

    I do need that link behind the parent menu item. So removing that page is not a useful solution for me.

    The website I’m talking about is: http://www.pimpyourcareer.nu/wordpress (it’s a concept version).

    Thanks a lot.

    Kind regards, Frederik

  17. Nomsycool says:

    Please how do I locate the header.php file for individual pages? The site I’m working with is http://www.chinoms.com. The page I’m making a parent page is the Services Page.

  18. David says:

    This worked perfectly, just had to change the item being referenced to my own and voila! Thanks so much!

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

More in Code Snippets (11 of 35 articles)