How to build Custom Post Nav Menu inside of the Loop

Please try the following code. I haven’t tested it but it should work. We could use two different loop, one for content and another for navigation insert the navigation later with JS or another way. But in this case, one loop is enough and of course better than two loop. You’ve to add the active class based on user selection using JS.

<?php
$divePostString = '';
$divePostNavString = '';
while( $divePosts->have_posts() ) : $divePosts->the_post();

    ob_start();
    ?>

    <!-- Post -->
    <div class="col-sm-3">
        <a href="#<?php the_ID(); ?>" class="dive-site-map hover-scale">
            <img src="<?php echo get_stylesheet_directory_uri() . '/img/dive_sites/dauin_coastline.jpg'?>" class="dive-site-map__img" alt="">
            <h3 class="dive-site-map__title"><?php the_title(); ?></h3>
        </a>
    </div>

    <!-- Popup -->
    <div class="dive-site-popup mfp-hide" id="<?php the_ID(); ?>">
        <div class="container">
            <h1 class="dive-site-popup__title"><?php the_title(); ?></h1>    
            <div class="row mt-60">
                <aside class="col-md-3">
                    <h5 class="widget-title">All sites</h5>
                    <ul class="sidebar-links">
                        {{SIDEBAR_LINKS}}
                    </ul>
                </aside>
                <div class="col-md-9">
                    <?php the_content(); ?>
                </div>
            </div>
        </div>
    </div>

    <?php
    $divePostString .= ob_get_clean();
    $divePostNavString .= '<li><a href="#' . get_the_ID() . '" class="dive-site-popup__url">' . get_the_title() . '</a></li>';
    ?>

<?php
endwhile;

echo str_replace( '{{SIDEBAR_LINKS}}', $divePostNavString, $divePostString );
wp_reset_postdata();
?>

Related Posts: