Creating if statements to filter posts by category from cpt in wordpress

Question

I am trying to put posts from a cpt into different bootstrap tabs.

So far I am getting all the posts titles on the first tab. I then get one post title on the second tab and that same title on the following two tabs. The categories are not custom taxonomies but the default wordpress categories, associated with the custom post type. The custom post type is called 'journal' and the code is inside archive-journal.php

PHP

<!-- Tab panes -->
<div class="tab-content">

    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?> 

            <!-- cambridge winter college -->
            <div role="tabpanel" class="tab-pane active" id="tab1">
                <!-- accordian -->
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <?php if (in_category('cambridge-winter-college')) ?>
                            <?php the_title(); ?>
                    </div>
                <!-- / accordian -->
                <div class="terminator"></div>
            </div>
            <!-- / cambridge winter college  -->

            <!-- oxford summer 1 -->
            <div role="tabpanel" class="tab-pane" id="tab2">
                <!-- oxford summer college 1 -->
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <?php if (in_category('oxford_summer_college_1')) ?>
                        <?php the_title(); ?>
                </div>
            </div>
            <!-- / oxford summer 1 -->


            <!-- oxford summer college 2 -->
            <div role="tabpanel" class="tab-pane" id="tab3">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <?php if (in_category('oxford_summer_college_2')) ?>
                        <?php the_title(); ?>
                </div> 
            </div>
            <!-- / oxford summer college 2 -->

            <!-- cambridge summer college  -->
            <div role="tabpanel" class="tab-pane" id="tab4">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <?php if (in_category('cambridge_summer_college')) ?>
                        <?php the_title(); ?>
                </div>
            </div>
            <!-- /cambridge summer college -->

        <?php endwhile; ?>
    <?php endif; ?> 

</div>
<!-- / tab content -->

Any ideas on how to achieve this?

Thanks

Answer 1

You'll have to re-organize your code's structure. The issue here is that you're displaying all tabs for each post because the tabs are inside the loop.

Try to do the following:

<div class="tab-content">
    <?php if ( have_posts() ) : ?>

        <!-- cambridge winter college -->
        <div role="tabpanel" class="tab-pane active" id="tab1">
            <!-- accordian -->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                 <?php while ( have_posts() ) : the_post(); ?>
                     <?php if (in_category('cambridge-winter-college')) : ?>
                         <?php the_title(); ?>
                     <?php endif; ?>
                 <?php endwhile; ?>
            </div>
            <!-- / accordian -->
            <div class="terminator"></div>
        </div>
        <!-- / cambridge winter college  -->

        <?php rewind_posts(); ?>

        <!-- REPEAT THE CODE ABOVE FOR OTHER TABS -->

    <?php endif; ?>
</div>
<!-- / tab content -->

This way you'll loop through the posts inside the tab.

Let me know if that works.

UPDATE

Calling rewind_posts() between each loop.

Answer 2

After a lot of struggling and thinking I found the answer. I had my max posts set to 10 in wordpress reading settings!! Doh! So a really simple fix by changing that setting or better still this, which I found on css tricks. It calls all posts for the CPT with the -1 setting. Change journal to your cpt name.

PHP

  // CPT all posts in Archive layout
function set_posts_per_page_for_journal_cpt( $query ) {
  if ( !is_admin() && $query->is_main_query() && is_post_type_archive( 'journal' ) ) {
    $query->set( 'posts_per_page', '-1' );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_for_journal_cpt' );

?>