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:
<script type="text/javascript">
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?
Category: Code Snippets
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/
Very good! Works easy.
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!
[...] How to remove the link to parent pages when using wp_list_pages in WordPress navigation : WP Garage [...]
JS is a hideous way to do this. Better to strip them out with PHP IMO.
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!
[...] 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 [...]
This is a Nice WordPress trick you have there. Thanks
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.
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/
@Peter that’s a great tip! Thanks for sharing.
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
@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!
Thank you Peter for your respond, your solution works, but what I have to do if I would like deactivate a specific menu?
Elena
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.
Thank you Peter.
Namaste
Insert in header.php this script
<script type=”text/javascript”>
jQuery(function($) {
$(‘ul.children’).parent().find(‘a:first’).removeAttr(‘href’);
});
</script>
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.
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!