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 -->
7
  • 1
    What defines if a post gets the is-active class? You just want it on your first post?
    – Howdy_McGee
    Mar 25, 2016 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, 2016 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, 2016 at 19:49
  • This works! ty all
    – dimerbox
    Apr 11, 2016 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, 2016 at 15:24

1 Answer 1

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';
}
1
  • Like mentioned above this works perfect! thank you! please check as "answered"
    – dimerbox
    Apr 11, 2016 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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