0

I have a custom loop that gets all the Custom Posts and inside this loop I have a hidden popup with a data for each post. Once you click on a post item it opens a popup with it's data. Each popup has a sidebar with a links to all other posts, and currently opened post link should be highlighted as active. What's important each link in sidebar should have this format in href: #$post-id so it can open other popup once it's clicked. As you can see the sidebar links are currently hard-coded, but I want to make them dynamic.

Here is the demo link for a HTML version, to demonstrate how it works - http://deothemes.com/sites/puravida/diving.html If you scroll down to Dive Sites you'll see 4 posts. Try to click them.

<?php $divePosts = new WP_Query(array(
  'post_type' => 'dive-site',
  'posts_per_page' => -1,
)); ?>

<?php while($divePosts->have_posts()) : $divePosts->the_post(); ?>

  <!-- Post -->
  <div class="col-sm-3">
    <a href="<?php echo '#' . get_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">
            <li><a href="#194" class="dive-site-popup__url <?php if(get_the_ID() == 194 ) { echo 'active'; } ?>">Apo Island</a></li>
            <li><a href="#169" class="dive-site-popup__url <?php if(get_the_ID() == 169 ) { echo 'active'; } ?>">Dauin Costline</a></li>
            <li><a href="#203" class="dive-site-popup__url <?php if(get_the_ID() == 203 ) { echo 'active'; } ?>">Sumilon and Oslob</a></li>
            <li><a href="#207" class="dive-site-popup__url <?php if(get_the_ID() == 207 ) { echo 'active'; } ?>">Siquijor</a></li>
          </ul>
        </aside>
        <div class="col-md-9">
          <?php the_content(); ?>
        </div>
      </div>

    </div>
  </div>


<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
0

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();
?>
  • That's great :) – obiPlabon Feb 10 '18 at 11:04
  • Cant get the active link working. How to identify it with JS? I can get the ID of the link that I clicked. But how to compare it with links in sidebar? – Alexander Feb 10 '18 at 11:47
  • If your ID doesn't contain the hash then store the ID in ID variable and use the following code. Make sure to add the following code inside your click handler $( '.sidebar-links' ).find( 'a[href="#' + ID +'"]' ).addClass('active').siblings().removeClass('active'); – obiPlabon Feb 10 '18 at 12:02
  • It works on a first post click, but when popup is open there is completely new sidebar created and it doesn't work when you click links inside >_<. Anyway thanks for the help, will try to find a solution. – Alexander Feb 10 '18 at 13:43
  • I found solution about active link :) It's a nested loop. First looping through all popups and collect their ID's. Within this loop, loop again through all sidebar links and compare if href of link is matching ID of popup. $.each( $('.dive-site-popup'), function() { var popupID = '#' + $(this).attr('id'); $.each( $(popupID + ' .dive-site-popup__url'), function() { var linkID = $(this).attr('href'); if(linkID == popupID) { $(this).addClass('active'); } }); }); – Alexander Feb 10 '18 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.