Laura Sage
Laura Sage

Reputation: 33

Using ACF to generate taxonomy bootstrap tabs

Something's not quite working right with my double-looped query here, and I'm not sure what it is exactly. Basically, I've used ACF to provide a Repeater Field on my Blog page where I can choose which categories/taxonomies to display in my tabs. So it's doing fine pulling in the names of the tabs, but I can't seem to generate any content there. It was suggested that I needed to add "reset_rows();", which I did, but that seems to be making the page take forever to load, and still isn't creating any actual content.

Here's my loop. Any help that can be afforded will be greatly appreciated.

<!-- Nav Tabs -->
<ul  class="nav nav-pills">
    <?php if (have_rows('home_categories')) {
        $i = 0;
        while (have_rows('home_categories')) {
            the_row();
            $term = get_sub_field('categories'); ?>
    <li class="<?php if ($i == 0) { echo ' active'; }?>"> 
        <a href="#<?php echo $term->name; ?>" data-toggle="tab"><?php echo $term->name; ?></a>
    </li>
        <?php $i++;
        }
    } ?>
</ul>

<!-- Tab Content -->
<div class="tab-content clearfix">
    <?php if (have_rows('home_categories')) {
        $i = 0;
        while (have_rows('home_categories')) {
            the_row();

            $args = array(
                'post_type' => 'post',
                'tax_query' => array(
                    array(
                        'taxonomy' => $term->taxonomy,
                        'terms' => array($term_id)
                    )
                ),
                'posts_per_page' => 5,
                'orderby' => 'date',
                'order' => 'ASC',
            );
            $post = new WP_Query( $args );
            while( $post->have_posts() ) : $post->the_post();

            $term = get_sub_field('categories'); ?>

                <div class="tab-pane fade<?php if ($i == 0) { echo ' in active'; }?>" id="<?php echo $term->name; ?>">
                    <?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive img-thumbnail')); ?>
                    <a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
                    <?php the_excerpt(); ?>
                </div>
            <?php endwhile;
        }
        $i++;
    }
        wp_reset_postdata(); ?>
</div>

Upvotes: 0

Views: 646

Answers (1)

Laura Sage
Laura Sage

Reputation: 33

Well, I kept working at this and asking other programmer friends for help figuring it out. We just rewrote the tab content area with a foreach instead of while, and now it seems to work quite well:

<!-- Nav Tabs -->
<ul  class="nav nav-pills">
    <?php if (have_rows('home_categories')) {
        $i = 0;
        while (have_rows('home_categories')) {
            the_row();
            $term = get_sub_field('categories'); ?>
    <li class="<?php if ($i == 0) { echo ' active'; }?>"> 
        <a href="#tab-pane-<?php echo $i; ?>" data-toggle="tab"><?php echo $term->name; ?></a>
    </li>
        <?php $i++;
        }
    } ?>
</ul>

<!-- Tab Content -->
<div class="tab-content clearfix">
    <?php 

        $home_categories = get_field("home_categories");
    //  print_r($home_categories);

        foreach($home_categories as $key => $home_cat) {


            $term_id = $home_cat['categories']->term_id;
            $term_name = $home_cat['categories']->name;

            ?>
            <div class="tab-pane fade<?php if ($key == 0) { echo ' in active'; }?>" id="tab-pane-<?php echo $key; ?>">
            <?php


            $args = array(
                'post_type' => 'post',
                'tax_query' => array(
                    array(
                        'taxonomy' => $term->taxonomy,
                        'terms' => array($term_id)
                    )
                ),
                'posts_per_page' => 5,
                'orderby' => 'date',
                'order' => 'ASC',
            );
            $query = new WP_Query( $args );

            foreach($query->posts as $post) {

                ?>

                    <a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_post_thumbnail($post->ID, 'thumbnail', array('class' => 'img-responsive img-thumbnail')); ?></a>
                    <a href="<?php echo get_permalink($post->ID); ?>"><h3><?php echo get_the_title($post->ID); ?></h3></a>
                    <?php the_excerpt(); ?>
                <?php


            }

            ?>
            </div>
            <?php   



        }           ?>

</div>

So, in case anyone else is interested, that's how it got accomplished ultimately.

Upvotes: 0

Related Questions