How to replace the page url for the page slug in a menu link?

Question

I am developing a single page site within WordPress, that contains multiple sections. These sections are pages in WordPress.

In my index.php I loop through all pages within WordPress and add them to the index file - front page with a custom loop.

Loop through all pages

<?php 
    $args = array('post_type' => 'page', 'orderby' => 'menu_order', 'posts_per_page' => -1);
    $loop = new WP_Query($args); 
?>
<?php if ($loop) : while ($loop->have_posts()) : $loop->the_post(); ?>

    <?php $slides = get_field('flexslider'); ?>
    <?php 
        if ($slides) { 
            get_template_part( 'templates/slideshow' );
        } else {
            get_template_part( 'templates/parallax' );
        } 
    ?>

<?php endwhile; ?>
<?php endif; ?>

MENU

Because I developing a single page layout, I should modify the basic WordPress navigation to output the right menu links specific for this type of layout. So the normal output (I removed the id and class attributes to focus on the right thing) should be replaced for a hashtag and the slug of the page.

Basic menu link markup:

<li id="" class=""><a href="http://prachtelectronica.nl/wordpress/?page_id=10" class="menu-link main-menu-link">Lightning</a></li>

Modified menu link (what I wish):

<li id="" class=""><a href="#lightning" class="menu-link main-menu-link">Lightning</a></li>

I use the following WordPress function to build a menu:

<?php wp_nav_menu( array(
       'theme_location' => 'primary-menu',
       'menu' => 'primary-menu',
       'container' => 'nav',
       'container_id' => 'primary-navwrapper',
       'menu_id' => 'listnav',
    ));
?>

I would like that the position of each section (page) will be determine by the menu order that is set in Appearance > Menu, so the customer has only three thing to do when creating a new section (page). (1) Create a page, (2) add the page to the menu (3) and order it inside the menu structure.

I already using the menu_order property inside my page loop (as you can see above) to display the pages inside the index.php file. The order of the menu is used to position the sections (pages) in the right order.

One extra option for the pages is that the user can add a custom template to a page by selecting the template ads inside the WP editor. Pages that make use of this template named, "ads", should be displayed in index.php as a section, but not appears as a menu item in the list of menu item, because these sections are not relevant for the primary content.

I hope there is a solution for my wish. If you have any questions, please let me know it in the comments below. For now, thanks in advance.

Answer 1

To be able to change the Link, you can hook into the nav_menu_link_attributes filter.

if ( ! function_exists( 'wpse_209457_nav_menu_link_attributes' ) ) {
    function wpse_209457_nav_menu_link_attributes( $atts, $item, $args ) {
        if ( 'primary-menu' == $args->theme_location ) {
            // Get the target posts slug
            $object_data = get_post( $item->object_id );
            $atts['href'] = '#'.$object_data->post_name;
            return $atts;
        }
    }
}
 add_filter( 'nav_menu_link_attributes', 'wpse_209457_nav_menu_link_attributes', 10, 3 );

To make specific items not appear in menus depending on the template they use would be better suited in a separate question, but I'm going to post the solution anyway. You need to use another hook here:

if ( ! function_exists( 'wpse_209457_wp_nav_menu_objects' ) ) {
    function wpse_209457_wp_nav_menu_objects( $sorted_menu_items, $args ) {
        foreach ( $sorted_menu_items as $key => $item ) {
            $template = get_post_meta( $item->object_id, '_wp_page_template', true );
            if ( "templates/ads.php" == $template ) {
                unset( $sorted_menu_items[$key] );
            }
        }
        return $sorted_menu_items;
    }
}
add_filter ( 'wp_nav_menu_objects', 'wpse_209457_wp_nav_menu_objects', 10, 2 );

I didn't run this code, I hope it works for you.