asked on

WordPress Custom Nav Links

Hello Experts,

In WordPress I have a basic menu that has my pages, but how can I changes so that instead of permalinks it use custom such as javascript:changepage(pageID);

Do I need to do a custom Function to override wp_nav_menu?

Swatantra Bhargava

Please see below links

[Blind Links Deleted]

Leonidas Dosas

If you are referring to this http://www.southerntime.ca/ then in the ul>li elements you can do something like this:
HTML (portion of code):

 <ul id="menu-main-nav-menu" class="main-menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-10 current_page_item menu-item-20"><a href="#">Home</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">About</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#">Music &#038; Videos</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="#">News</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="#">Blog</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">Contact &#038; T&#8217;s</a></li>
                </ul>

Open in new window

JQuery:

$('#menu-item-20').on('click',function(){
             window.location.href='https://www.experts-exchange.com/';
         });
//And so on for each list element:

Open in new window

APD Toronto

ASKER

Leonidas, yes I am referring to southerntime, but I am also referring to how can I set the href property, this being a WordPress site?

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

APD Toronto

ASKER

Hi Chris,

First, all pages on the nav will be internal (created within WP)

Secondly, I would like to get the page ID, while disabling the href, so that it does not go anywhere and take over with jQuery.

How can I do this?

SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

APD Toronto

ASKER

Thank you to both I am getting somewhere...

The following is my selector

jQuery('#menu-main-nav-menu li').on('click', function(){

Open in new window

I am using jQuery because $is ambigious in WprdPress.

Anyways my question now is how can I use "this" to access the cliked li's property?

Chris Stanyon

$(this) will be the element that was clicked. Take a look at my previous post:

$('li a', '#menu-main-nav-menu').click(function(e) {
	e.preventDefault();

	var url = $(this).attr('href');
	// now do something with url        
});

Open in new window

You'll see we're binding the click event to the A elements in the main menu, so therefore $(this) represents the A tag that was clicked, and you can grab properties about it within the click handler.

Obviously, if you want to bind to the LI instead of the A, then just change the code accordingly:

$('li', '#menu-main-nav-menu').click(function(e) {
	e.preventDefault();

        // $(this) now refers to the LI that was clicked so do something with it
});

Open in new window

APD Toronto

ASKER

Thank you