Adding CSS to First Post in Relationship Query

• deanokeeno

• November 10, 2018 at 3:57 am

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?

• deanokeeno

• November 12, 2018 at 6:04 pm

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; ?>