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

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:

&lt;script type="text/javascript"&gt;
jQuery(function($) {
    $("li.page_item").children("a").attr('href', "javascript:void(0)"); });
&lt;/script&gt;

jQuery(function($) {

$("li.page_item").children("a").attr('href', "javascript:void(0)"); });

</script>

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?

Tony Gray

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/
- David
  
  Very good! Works easy.
- Josh T
  
  Wow Tony.. you my man are a genius. No need for plugins or code or all that crap. The internet makes it so hard yet you made it soooo simple. wow!
- Vinod
  
  WooHoo Tony!
  
  Thanks a lot. Sometimes it’s funny what we don’t see even when it’s right in front of our eyes. Cool workaround.
Pingback: Desorden De Ansiedad Generalizada | Ansiedad Sintomas()
Ryan

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

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!
Pingback: How to remove the link parent pages wp_list_pages in WP # WordPress Tricks & Tips()
Ryan

This is a Nice WordPress trick you have there. Thanks
John Wooten

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.
Peter

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/
- Miriam Schwab
  
  @Peter that’s a great tip! Thanks for sharing.
Elena

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
Peter

@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!
Elena

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
  
  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.
Elena

Thank you Peter.
Namaste
Gustaw

Insert in header.php this script

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

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.
Jenny

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!
Frederik

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
Nomsycool

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.
David

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

Just wanted to say: Thank You!
zachary smith

i would advise to target ‘menu-item-has-children’ that is built into wp menus
Daniel

Why are you using “javascript:void(0)” ?
You can just use .removeAttr(‘href’);

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

Author: Miriam Schwab

Read previous post:

WordPress turns 7. It was great then, it’s awesome now