templates - Alternative layout the loop

i'm trying to make an alternative loop as found here on stackexchange, it has been a great help to what i've achieved so far, but i'm stuck now.

The goal is to make the newspage look like this

The dev-website you can find on this address: /

Big block, three small blocks and then a big block again. However, when i have less then 5 messages on a page the whole layout gets messed up (see page 2 on link above) and i'm a bit stuck on this, so i'm hoping to find some help here :)

I think i could alter the output to col-md-6 or col-md-12 when not enough posts, by working with an if( $wp_query-current_post ... ) but i need to figure out the best way to handle this so that i don't mess up the first page.

Anyway, the code of the index.php

<?php get_header(); ?>
<section>
<div class="container">
    <div class="row">
        <div class="col-md-8" id="fh5co-content">
             <?php 

            if( have_posts() ) {

                while( have_posts() ) {
                    the_post();

                    get_template_part( 'content', 'nieuws' );

                }

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>
        </div>
        <div class="col-md-3  col-md-offset-1" id="fh5co-sidebar">

            <div class="fh5co-side-section fh5co-nav-links">
                <h2 class="fh5co-uppercase-heading-sm">Side Links</h2>
                <ul>
                    <li class="active"><a href="#">Design is the Creation</a></li>
                    <li><a href="#">Construction of an Objecton</a></li>
                    <li><a href="#">Architectural Blueprints</a></li>
                    <li><a href="#">Circuit Diagrams</a></li>
                </ul>
            </div>
            <div class="fh5co-spacer fh5co-spacer-sm"></div>
            <div class="fh5co-side-section">
                <h2 class="fh5co-uppercase-heading-sm">Sweet Little &lt;p&gt;</h2>
                <p>Magnam consectetur quia illo rerum aliquam doloremque omnis assumenda quasi enim ex totam provident dignissimos numquam laudantium</p>
                <p><a href="#">Go! click me</a></p>
            </div>
            <div class="fh5co-spacer fh5co-spacer-sm"></div>
            <div class="fh5co-side-section">
                <h2 class="fh5co-uppercase-heading-sm">Image Magnific Popup</h2>


                <div class="fh5co-spacer fh5co-spacer-xxs"></div>
                <div class="row">
                    <div class="col-md-12">
                    <p><a href="images/project_5.jpg" class="image-popup"><img src="images/project_5.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>

                    <div class="col-md-6">
                        <p><a href="images/project_6.jpg" class="image-popup"><img src="images/project_6.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>
                    <div class="col-md-6">
                        <a href="images/project_7.jpg" class="image-popup"><img src="images/project_7.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="fh5co-spacer fh5co-spacer-md"></div>
    <?php 
                if (function_exists("wp_bs_pagination"))
                    {
                         //wp_bs_pagination($the_query->max_num_pages);
                         wp_bs_pagination();
                }
            ?> 
</div>  
</section>
<?php get_footer(); ?>

The code of my news template content-nieuws.php

<?php
//echo $wp_query->found_posts;
//var_dump($wp_query);die();
    >if( $wp_query-current_post == 0 ) : ?>
<h2><?php the_title(); ?></h2>
<div class="row">
    <div class="col-md-6">
        <p><?php the_excerpt(); ?></p>
    </div>
    <div class="col-md-6">
        <p><?php the_excerpt(); ?></p>
    </div>
    <div class="col-md-12">
    <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
    <?php if($wp_query->current_post == 1) : ?>
        <div class="row">
    <?php endif; ?>
        <?php if($wp_query->current_post == 4) : ?>
            <h2><?php the_title(); ?></h2>
                <div class="row">
                    <div class="col-md-6">
                        <p><?php the_excerpt(); ?></p>
                    </div>
                    <div class="col-md-6">
                        <p><?php the_excerpt(); ?></p>
                    </div>
                    <div class="col-md-12">
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
                </div>
        <?php else : ?>
        <div class="col-md-4 col-sm-6">
            <div class="fh5co-spacer-xs"></div>
            <h3><?php the_title(); ?></h3>
            <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
        </div>
        <?php endif; ?>
    <?php if($wp_query->current_post == 3) : ?>
        </div>
    <?php endif; ?>
<?php endif; ?>

Really hope someone can help me out with this!

i'm trying to make an alternative loop as found here on stackexchange, it has been a great help to what i've achieved so far, but i'm stuck now.

The goal is to make the newspage look like this

The dev-website you can find on this address: http://puurluc.xact.be/nieuws/

Big block, three small blocks and then a big block again. However, when i have less then 5 messages on a page the whole layout gets messed up (see page 2 on link above) and i'm a bit stuck on this, so i'm hoping to find some help here :)

I think i could alter the output to col-md-6 or col-md-12 when not enough posts, by working with an if( $wp_query-current_post ... ) but i need to figure out the best way to handle this so that i don't mess up the first page.

Anyway, the code of the index.php

<?php get_header(); ?>
<section>
<div class="container">
    <div class="row">
        <div class="col-md-8" id="fh5co-content">
             <?php 

            if( have_posts() ) {

                while( have_posts() ) {
                    the_post();

                    get_template_part( 'content', 'nieuws' );

                }

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>
        </div>
        <div class="col-md-3  col-md-offset-1" id="fh5co-sidebar">

            <div class="fh5co-side-section fh5co-nav-links">
                <h2 class="fh5co-uppercase-heading-sm">Side Links</h2>
                <ul>
                    <li class="active"><a href="#">Design is the Creation</a></li>
                    <li><a href="#">Construction of an Objecton</a></li>
                    <li><a href="#">Architectural Blueprints</a></li>
                    <li><a href="#">Circuit Diagrams</a></li>
                </ul>
            </div>
            <div class="fh5co-spacer fh5co-spacer-sm"></div>
            <div class="fh5co-side-section">
                <h2 class="fh5co-uppercase-heading-sm">Sweet Little &lt;p&gt;</h2>
                <p>Magnam consectetur quia illo rerum aliquam doloremque omnis assumenda quasi enim ex totam provident dignissimos numquam laudantium</p>
                <p><a href="#">Go! click me</a></p>
            </div>
            <div class="fh5co-spacer fh5co-spacer-sm"></div>
            <div class="fh5co-side-section">
                <h2 class="fh5co-uppercase-heading-sm">Image Magnific Popup</h2>


                <div class="fh5co-spacer fh5co-spacer-xxs"></div>
                <div class="row">
                    <div class="col-md-12">
                    <p><a href="images/project_5.jpg" class="image-popup"><img src="images/project_5.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>

                    <div class="col-md-6">
                        <p><a href="images/project_6.jpg" class="image-popup"><img src="images/project_6.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>
                    <div class="col-md-6">
                        <a href="images/project_7.jpg" class="image-popup"><img src="images/project_7.jpg" alt="Image" class="img-responsive"></a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="fh5co-spacer fh5co-spacer-md"></div>
    <?php 
                if (function_exists("wp_bs_pagination"))
                    {
                         //wp_bs_pagination($the_query->max_num_pages);
                         wp_bs_pagination();
                }
            ?> 
</div>  
</section>
<?php get_footer(); ?>

The code of my news template content-nieuws.php

<?php
//echo $wp_query->found_posts;
//var_dump($wp_query);die();
    >if( $wp_query-current_post == 0 ) : ?>
<h2><?php the_title(); ?></h2>
<div class="row">
    <div class="col-md-6">
        <p><?php the_excerpt(); ?></p>
    </div>
    <div class="col-md-6">
        <p><?php the_excerpt(); ?></p>
    </div>
    <div class="col-md-12">
    <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
    <?php if($wp_query->current_post == 1) : ?>
        <div class="row">
    <?php endif; ?>
        <?php if($wp_query->current_post == 4) : ?>
            <h2><?php the_title(); ?></h2>
                <div class="row">
                    <div class="col-md-6">
                        <p><?php the_excerpt(); ?></p>
                    </div>
                    <div class="col-md-6">
                        <p><?php the_excerpt(); ?></p>
                    </div>
                    <div class="col-md-12">
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
                </div>
        <?php else : ?>
        <div class="col-md-4 col-sm-6">
            <div class="fh5co-spacer-xs"></div>
            <h3><?php the_title(); ?></h3>
            <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
        </div>
        <?php endif; ?>
    <?php if($wp_query->current_post == 3) : ?>
        </div>
    <?php endif; ?>
<?php endif; ?>

Really hope someone can help me out with this!

• loop
• templates
• pagination
• query
• screen-layout

Share Improve this question edited Jan 29, 2019 at 18:46 Glorfindel 61133 gold badges1010 silver badges1818 bronze badges asked Feb 7, 2016 at 22:54 Yoeri RousseauxYoeri Rousseaux 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

For those interested, i've solved my problem using sizeof($wp-query->posts)

The end-result is this content-news.php template

<?php
//echo sizeof($wp_query->posts);
//var_dump($wp_query);die();

if(sizeof($wp_query->posts) == 4) : ?>
    <?php if( $wp_query->current_post == 0 ) : ?>
        <h3><?php the_title(); ?></h3>
        <div class="row">
            <div class="col-md-12">
                <p><?php the_excerpt(); ?></p>
                <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php else : ?>
        <?php if($wp_query->current_post == 1) : ?>
            <div class="row row-eq-height">
        <?php endif; ?>
                <div class="col-md-4 col-sm-6">
                    <h3><?php the_title(); ?></h3>
                    <p><?php the_excerpt(); ?></p>
                    <div class="fh5co-spacer-xs"></div>
                    <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
                </div>
        <?php if($wp_query->current_post == 3) : ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php elseif(sizeof($wp_query->posts) == 3) : ?>
    <?php if( $wp_query->current_post == 0 ) : ?>
        <h3><?php the_title(); ?></h3>
        <div class="row">
            <div class="col-md-12">
                <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>

            </div>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php else : ?>
        <?php if($wp_query->current_post == 1) : ?>
            <div class="row row-eq-height">
        <?php endif; ?>
            <div class="col-md-6 col-sm-6">
                <h3><?php the_title(); ?></h3>
                <p><?php the_excerpt(); ?></p>
                <div class="fh5co-spacer-xs"></div>
                <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
            </div>
        <?php if($wp_query->current_post == 2) : ?>
            </div>
        <?php endif; ?>
    <?php endif; ?>
<?php elseif(sizeof($wp_query->posts) == 1 || sizeof($wp_query->posts) == 2) : ?>
<h3><?php the_title(); ?></h3>
<div class="row">
    <div class="col-md-12">
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
<?php if( $wp_query->current_post == 0 ) : ?>
<h3><?php the_title(); ?></h3>
<div class="row">
    <div class="col-md-12">
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
    </div>
</div>
<div class="fh5co-spacer fh5co-spacer-sm"></div>
<?php else : ?>
    <?php if($wp_query->current_post == 1) : ?>
        <div class="row row-eq-height">
    <?php endif; ?>
        <?php if($wp_query->current_post == 4) : ?>
            <h3><?php the_title(); ?></h3>
                <div class="row">
                    <div class="col-md-12">
                        <p><?php the_excerpt(); ?></p>
                        <p><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
                    </div>
                </div>
        <?php else : ?>
        <div class="col-md-4 col-sm-6">
            <h3><?php the_title(); ?></h3>
            <p><?php the_excerpt(); ?></p>
            <div class="fh5co-spacer-xs"></div>
            <p class="bottom-align-text"><a href="<?php the_permalink(); ?>" class="btn btn-primary btn-sm">Lees Meer</a></p>
        </div>
        <?php endif; ?>
    <?php if($wp_query->current_post == 3) : ?>
        </div>
        <div class="fh5co-spacer fh5co-spacer-sm"></div>
    <?php endif; ?>
<?php endif; ?>
<?php endif; ?>