0

I'm trying to add the css class .is-active to my vertical tab links inside my loop.

By default, the page loads the most recent post first. How can I make most recent tab/post active with .is-active?

<?php
    $races_2016='0';
    $args = array(
    'post_type' => 'races',
    'order'     => 'DESC',
    'parent'    => '$races_2016',
    'orderby'   => 'date',

);

$the_query = new WP_Query( $args ); ?>

<!-- Tab Buttons -->
    <div class="vertical-tabs">
    <p><?php echo date('Y'); ?> Race Results</p>
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts()) : $the_query->the_post(); ?>

        <a href="javascript:void(0)" class="js-vertical-tab vertical-tab page-item" rel="<?php the_ID();?>">
        <?php the_title(); ?>
        </a>

        <?php endwhile; else: ?>    
        <?php endif; ?>
        <?php  wp_reset_postdata(); ?>

    </div>
    <!-- Tab Buttons -->
  • 1
    What defines if a post gets the is-active class? You just want it on your first post? – Howdy_McGee Mar 25 '16 at 19:48
  • Would like the most recent post in the tab to apply the class ".is-active" I'm using "orderby => date and tabs rel="the_ID();" – dimerbox Apr 8 '16 at 19:46
  • The current answer is correct. You would use $the_quer->current_post like so: class="<?php echo ( 0 == $the_query->current_post ) ? 'active ' : ''; ?>js-vertical-tab vertical-tab page-item" – Howdy_McGee Apr 8 '16 at 19:49
  • This works! ty all – dimerbox Apr 11 '16 at 15:23
  • please click the checkmark on the answer so future readers know that this solved your issue! Glad it helped. – Howdy_McGee Apr 11 '16 at 15:24
0

WP_Query provides current_post property inside the loop which starts from 0. So if you want to target first post in the loop you should just check if $the_query->current_post equals 0:

if ( $the_query->current_post == 0 ) {
 echo 'is_active';
}
  • Like mentioned above this works perfect! thank you! please check as "answered" – dimerbox Apr 11 '16 at 15:23

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.