Support

Account

Home Forums General Issues Adding CSS to First Post in Relationship Query

Helping

Adding CSS to First Post in Relationship Query

  • Hello, this is my first forum post, so please excuse me if I break any rules.

    I am trying to add set up some simple tabs to display the results of a Relationship field loop. I need to add “active” CSS class to the to the first nav tab result in a Relationship field query.

    I have got it to work OK for the first time I do it on the template – the nav tabs, but it refuses to work if I try the same technique for the tab panes. (I also need to add the “active” CSS to the first tab pane as well.

    Here is my code (simplified)

    
    <ul class="nav nav-tabs">
    <?php 
                               $featured_posts = get_field('related_controllers');
                               if ($featured_posts) {
                               global $post;
                               $count == 0;
                               foreach ($featured_posts as $post) {
                               
                               ?>
                               
                            <li class="<?php 
                               if ($count == 0) {
                                 echo 'active';
                               } else {
                                 echo '';
                               }
                               ?>">
                               <?php 
                                  setup_postdata($post);
                                  // Rest of loop goes below
                                  ?>
                               <a href="#<?php the_ID(); ?>" data-toggle="tab"><?php the_title(); ?></a>
                            </li>
                            
                            <?php 
                               $count++;
                               
                               } // end foeeach featured post
                               
                               
                               wp_reset_postdata($post);
                               
                               } // end if posts
                               ?>
                               
                         </ul>
    
    <!-- Tab panes -->
                         <div class="tab-content">
    
                            <?php 
                               $featured_posts = get_field('related_controllers');
                               if ($featured_posts) {
                               global $post;
                               $count == 0;
                               foreach ($featured_posts as $post) {
                               
                               ?>
                           <!-- Tab Pane Start -->
                           <div class="tab-pane <?php 
                               if ($count == 0) {
                                 echo 'active';
                               } else {
                                 echo '';
                               }
                               ?> product_tab" id="<?php the_ID(); ?>">
                               <?php 
                                  setup_postdata($post);
                                  // Rest of loop goes below
                                  ?>
                                  <h3><?php the_title(); ?></h3>
                                  <?php the_content(); ?>
                            </div>
                            <!-- Tabe Pane End -->
                               
                            
                            <?php 
                               $count++;
                               } // end foeeach featured post
                               wp_reset_postdata();
                               
                               } // end if posts
                               ?>
                                                    
                         </div>
                         <!-- End Tab panes -->
    
    

    I assume it’s because the first query is not being reset but I can’t figure out why.

    Can anyone help?

  • I Figured it out 🙂

    <?php 
                               $posts = get_field('related_controllers');
                               if( $posts ): ?>
                            <?php 
                               $count = 0;
                               foreach( $posts as $p ): // variable must NOT be called $post (IMPORTANT) ?>
                            <li <?php 
                               if ($count == 0) {
                                 echo 'class="active"';
                               }
                                ?>>
                               <a href="#<?php echo $p->ID; ?>" data-toggle="tab"><?php echo get_the_title( $p->ID ); ?></a>
                            </li>
                            <?php 
                               $count++;
                               endforeach; ?>
                            <?php endif; ?>
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.