How do I add an onclick event to the WordPress wp_list_pages function?

3 Views

My goal is to have the page scroll to the right or left when you click on a page link so the content smoothly slides onto the screen.

Here’s what the html would look like to make this work:

Read More
<li><a href="#" onclick="selectPage(1); return false;" class="page-item c"><span class="current-page page-hover">Home</span></a></li>
<li><a href="#" onclick="selectPage(2); return false;" class="page-item"><span>About</span></a></li>
<li><a href="#" onclick="selectPage(3); return false;" class="page-item"><span>Porfolio</span></a></li>
<li><a href="#" onclick="selectPage(4); return false;" class="page-item"><span>Contact</span></a></li>

But I want the navigation menu to be dynamic. So I use this instead: 

<?php wp_list_pages( array( 
'title_li' => '', 
'depth' => 1,
'link_before' => '<span>',
'link_after' => '</span>'
)); ?>

How do I add the onclick function into the anchor tags though? I’m new to php and need help figuring out how to do this. Thanks, I really appreciate your time.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You can use a Custom Walker to add attributes to the menu items.

    Basically, you add a parameter ‘walker’ to the wp_nav_menu() options and call an instance of an enhanced class:

    wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'depth'           => 1,
        'walker'          => new Description_Walker
    )
);

    The class Description_Walker extends Walker_Nav_Menu and changes the function start_el( &$output, $item, $depth, $args ).

    orignaly taken from here

    reference

    http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function

    http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

    or one more another way is

    https://wordpress.stackexchange.com/questions/100726/add-custom-attributes-to-menu-items-without-plugin