wp_list_pages(); Change output of hyperlink

Question

I am creating a menu for a documentation site very much like this: http://getbootstrap.com/components/

I am using a hierarchical custom post type (manual). I am currently using wp_list_pages() to output the list. This gives me the nested structure that I am looking for:

<ul>
  <li>Parent Post</li>
    <ul>
      <li>Child Post</li>
      <li>Child Post</li>
    </ul>
  <li>Parent Post</li>
    <ul>
      <li>Child Post</li>
      <li>Child Post</li>
    </ul>
</ul>
<!-- and so on -->

Unfortunately, wp_list_pages() outputs the permalink to the post like this:

<li class="page_item page-item-332"><a href="http://myurl.com/manual/introduction-to-the-manual/organization/">1.1 &#8211; Manual Organization</a></li>

and I need it to output the post_id like this:

<li class="page_item page-item-332"><a href="#332">1.1 &#8211; Manual Organization</a></li>

Also, here is my wp_list_pages code:

 <ul id="markdown-toc">
   <li><h3><a href="#contents">Contents</a></h3></li>
   <ul id="my_cutom_type-list">
     <?php wp_list_pages( 'post_type=manual&title_li=' ); ?>
   </ul>
 </ul>

Answer 1

You could add a filter on post_type_link, which allows modification of custom post type permalinks before they are output.

The filter passes the custom post object as the 2nd argument, so we can use that to get the ID and form the new permalink:

function wpd_list_pages_permalink_filter( $permalink, $page ){
    return '#' . $page->ID;
}

Then you can add and remove the filter when using wp_list_pages:

add_filter( 'post_type_link', 'wpd_list_pages_permalink_filter', 10, 2 );

wp_list_pages();

remove_filter( 'post_type_link', 'wpd_list_pages_permalink_filter', 10, 2 );

If your menu contained the built in page post type, you would use the page_link filter. Note in that case the 2nd argument is only the page's ID, not the full page object like in the post_type_link filter.

Answer 2

You can done this by creating you custom Walker class and pass it's instance as argument while calling wp_list_pages() function.

The purpose of Walker class is

It simply traces each branch of your tree: it has to be extended by other classes which tell it what to do for each element it comes across.

Put this class inside your functions.php file or plugins file.

class linkModifyWalker extends Walker_Page {


function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class='dropdown-menu children'>\n";
}


function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
    if ( $depth )
        $indent = str_repeat("\t", $depth);
    else
        $indent = '';

    extract($args, EXTR_SKIP);
    $css_class = array('page_item', 'page-item-'.$page->ID);

    if( isset( $args['pages_with_children'][ $page->ID ] ) )
        $css_class[] = 'page_item_has_children dropdown';

    if ( !empty($current_page) ) {
        $_current_page = get_post( $current_page );
        if ( in_array( $page->ID, $_current_page->ancestors ) )
            $css_class[] = 'current_page_ancestor';
        if ( $page->ID == $current_page )
            $css_class[] = 'current_page_item';
        elseif ( $_current_page && $page->ID == $_current_page->post_parent )
            $css_class[] = 'current_page_parent';
    } elseif ( $page->ID == get_option('page_for_posts') ) {
        $css_class[] = 'current_page_parent';
    }


    $css_class = implode( ' ', apply_filters( 'page_css_class', $css_class, $page, $depth, $args, $current_page ) );
    $output .= $indent . '<li class="' . $css_class . '"><a href="#' .$page->ID . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';


    }
}

We have just created linkModifyWalker class now,We need to pass it's object to the wp_list_pages() as a argument. 'walker' => new linkModifyWalker()

<ul id="markdown-toc">
   <li><h3><a href="#contents">Contents</a></h3></li>
   <ul id="my_cutom_type-list">
     <?php 
     wp_list_pages( array(
         'post_type'=> 'manual',
         'walker' => new linkModifyWalker()
     ) ); 
     ?>
   </ul>
 </ul>

To know more about what is Walker Class. I recommend you to visit below link.

Understanding the Walker Class