Link ID in wordpress url

Currently I am working on a wordpress website, but I stumbled upon a little problem.

I am using wp_page_menu to make a navbar to get to my other pages. Now it directs me to www.mysite.com/sport, but I need it to direct me to www.mysite.com/sport#header or www.mysite.com/sport/#header.

Read More

Does anyone know how I can do this?

I tried using different plugins, or changing the slug or permalink, but this didn’t give me the result I wanted.

Thanks for helping guys!

Related posts

Leave a Reply

2 comments

  1. Ok. Here is your code. I just override default walker of wordpress. Please focus on text #header in this code.

    If you worry about this code. So you can go to file: …wp-includes/post-template.php at line 1238. It same code but I have add #header after get_permalink().

    Hope that help.

     class WPSE_HasHeader_Custom_Walker extends Walker_Page {
    
    
            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';
    
                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 ) );
    
                if ( '' === $page->post_title )
                    $page->post_title = sprintf( __( '#%d (no title)' ), $page->ID );
    
                /** CHANGE LINK HERE **/
                $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '#header">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';
    
                if ( !empty($show_date) ) {
                    if ( 'modified' == $show_date )
                        $time = $page->post_modified;
                    else
                        $time = $page->post_date;
    
                    $output .= " " . mysql2date($date_format, $time);
                }
            }
        }
    
        wp_list_pages(array(
            'sort_column' => 'menu_order',
            'title_li'    => '',
            'echo'        => 1,
            'walker' => new WPSE_HasHeader_Custom_Walker()
        ));
    

    Updated:

    The second way:
    Thanks Mere Development. I thinks this is same idea with him but it much more simple in your case. Like this:

    $link = wp_list_pages(array(
                            'sort_column' => 'menu_order',
                            'title_li'    => '',
                            'echo'        => 0,
                        ));
    echo preg_replace('/<a(.*)href="([^"]*)"(.*)>/', '<a$1href="$2#header"$3>', $link);
    
  2. Christian’s answer is great, and it got me thinking about alternative ways to do this, especially ones that allow you to use your wp_page_menu() function as originally requested. So here’s another approach using a filter.

    Add this function before your wp_page_menu() call, or in functions.php

    function wp_list_pages_addhash($output) {
        $dom = new DOMDocument;
        $dom->loadHTML($output);
        $links = $dom->getElementsByTagName('a');
        foreach ($links as $link) {
          $link->setAttribute('href', $link->getAttribute('href') . '#header');
        }
        $output = $dom->saveHTML();
        return $output;
    }
    add_filter('wp_list_pages', 'wp_list_pages_addhash');
    

    Then use your wp_page_menu call as you were originally in your theme:

    wp_page_menu();
    

    Explanation: It finds every href attribute of every link in the output of wp_list_pages and adds ‘#header’ to the end. wp_page_menu in turn uses wp_list_pages to create output.