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>

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?

Tags: coding, Design, digitalpoint, Navigation bar, wordpress

Category: Code Snippets