Insert hash into url to turn it into an anchor

Question

I'm using Wordpress, and trying to figure out how to hack the links within the sub-menus.

I've set up a demo here: http://brandsite.simpletruth.io/logo/

Specifically, I want to add a hash in front of second-level menu links so that they become same-page anchors instead of going to a separate page.

For instance:

http://brandsite.simpletruth.io/logo/logo-spacing/

Becomes:

http://brandsite.simpletruth.io/logo#logo-spacing

Ideally this happens within Wordpress, but I think doing it with javascript would be an okay solution too.

Thanks!

Answer 1

you have to use a custom walker function

in your instance:

in your functions

class custom_names extends Walker_Nav_Menu
    {

        /* Start of the <ul>
         *
         * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
         *                 So basically add one to what you'd expect it to be
         */
        function start_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"children\">\n";
        }

        /* End of the <ul>
         *
         * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
         *                 So basically add one to what you'd expect it to be
         */
        function end_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = str_repeat("\t", $depth);
            $output .= "$indent</ul>\n";
        }

        /* Output the <li> and the containing <a>
         * Note: $depth is "correct" at this level
         */
        function start_el( &$output, $item, $depth = 0, $args = array(),  $current_object_id = 0 )
        {
            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = 'menu-item-' . $item->ID;

            $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';


            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';


            $output .= $indent . '<li' . $id . $class_names .'>';


            $atts = array();
            $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
            $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
            $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
            $atts['href']   = ! empty( $item->url )        ? $item->url        : '';


            $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

            $attributes = '';
            foreach ( $atts as $attr => $value ) {
                if ( ! empty( $value ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                    $attributes .= ' ' . $attr . '="' . $value . '"';
                }
                if ($depth == 1) {
                $attributes = ' ' . $attr . '="'.str_replace(basename ($item->url), '#'.str_replace(' ', '-', strtolower ($item->title)), $value).'"';
            }
            }


            $title = apply_filters( 'the_title', $item->title, $item->ID );

            $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . $title . $args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;


        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

        /* Close the <li>
         * Note: the <a> is already closed
         * Note 2: $depth is "correct" at this level
         */
        function end_el ( &$output, $item, $depth = 0, $args = array())
        {
            $output .= '</li>';
            return;
        }

        /* Add a 'hasChildren' property to the item
         * Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
         */
        function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
        {
            // check whether this item has children, and set $item->hasChildren accordingly
            $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);

            // continue with normal behavior
            return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
        }
    }

in your header.php (or wherever your menu is)

<?php wp_nav_menu( array('walker' => new custom_names())); ?>