This is my first custom theme so I'm still getting my head around the loop, but I've somehow got each successive post to appear around the previous one. I'm using bootstrap cards so the border for each new card goes around the previous, creating a nesting effect.

How do I stop this, and have each CPT output as a new card?

<?php
get_header();

if (have_posts()) :
   while (have_posts()) :
    ?>
    <div class="card container">
        <a href="<?php

        // this conditional outputs a different link url for CPT 'resources'

            if (is_post_type_archive( $resources )) {
                echo 'https://' .  get_field('website');
            } else {
                echo the_permalink();
            }
        ?>">
        <div class="card-body row"><?php      
        the_post();

            ?>
            <div class="col-sm img-fluid"><?php 
                the_post_thumbnail('medium');
            ?></div>
            <div class="col-sm p-2 m-0"> 
            <h2 class="card-title text-center"><?php the_title(); ?></h2>
            </a>
            <?php


// This section is supposed to get all custom fields and display them if they exist

    $fields = get_fields();
            if( $fields ): ?>
                <ul>
                    <?php foreach( $fields as $name => $value ): ?>
                    <li><?php
                    echo $value;
                    ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php 
            endif;          
            ?><p class="card-text"><?php the_excerpt(); ?></p>
            </div><?php

    endwhile;
endif;

?>
        </div> <!-- card body -->
    </div><!-- card -->
<?php

get_footer();

?>

Thanks!

This is my first custom theme so I'm still getting my head around the loop, but I've somehow got each successive post to appear around the previous one. I'm using bootstrap cards so the border for each new card goes around the previous, creating a nesting effect.

How do I stop this, and have each CPT output as a new card?

<?php
get_header();

if (have_posts()) :
   while (have_posts()) :
    ?>
    <div class="card container">
        <a href="<?php

        // this conditional outputs a different link url for CPT 'resources'

            if (is_post_type_archive( $resources )) {
                echo 'https://' .  get_field('website');
            } else {
                echo the_permalink();
            }
        ?>">
        <div class="card-body row"><?php      
        the_post();

            ?>
            <div class="col-sm img-fluid"><?php 
                the_post_thumbnail('medium');
            ?></div>
            <div class="col-sm p-2 m-0"> 
            <h2 class="card-title text-center"><?php the_title(); ?></h2>
            </a>
            <?php


// This section is supposed to get all custom fields and display them if they exist

    $fields = get_fields();
            if( $fields ): ?>
                <ul>
                    <?php foreach( $fields as $name => $value ): ?>
                    <li><?php
                    echo $value;
                    ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php 
            endif;          
            ?><p class="card-text"><?php the_excerpt(); ?></p>
            </div><?php

    endwhile;
endif;

?>
        </div> <!-- card body -->
    </div><!-- card -->
<?php

get_footer();

?>

Thanks!

• loop

Share Improve this question asked Apr 8, 2019 at 17:56 JakePowellJakePowell 4311 silver badge1010 bronze badges 2

• 1 You need to move one (or possibly 2) closing div tags inside of the while loop – mrben522 Commented Apr 8, 2019 at 18:10
• That did it! Thanks, I moved both the closing div tags up into the loop. So simple. – JakePowell Commented Apr 8, 2019 at 18:12

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your closing tags for the card and card body divs are outside of the loop. try this:

<?php
get_header();

if (have_posts()) :
   while (have_posts()) :
    ?>
    <div class="card container">
        <a href="<?php

        // this conditional outputs a different link url for CPT 'resources'

            if (is_post_type_archive( $resources )) {
                echo 'https://' .  get_field('website');
            } else {
                echo get_the_permalink();
            }
        ?>">
        <div class="card-body row"><?php      
        the_post();

            ?>
            <div class="col-sm img-fluid"><?php 
                the_post_thumbnail('medium');
            ?></div>
            <div class="col-sm p-2 m-0"> 
            <h2 class="card-title text-center"><?php the_title(); ?></h2>
            </a>
            <?php


// This section is supposed to get all custom fields and display them if they exist

    $fields = get_fields();
            if( $fields ): ?>
                <ul>
                    <?php foreach( $fields as $name => $value ): ?>
                    <li><?php
                    echo $value;
                    ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php 
            endif;          
            ?><p class="card-text"><?php the_excerpt(); ?></p>
            </div>
        </div> <!-- card body -->
    </div><!-- card -->
    <?php
    endwhile;
endif;

?>

<?php

get_footer();

?>