$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>templates - Alternative layout the loop|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>templates - Alternative layout the loop

    templates - Alternative layout the loop

    matteradmin9PV0评论

    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 6113 gold badges10 silver badges18 bronze badges asked Feb 7, 2016 at 22:54 Yoeri RousseauxYoeri Rousseaux 133 bronze badges
    Add a comment  | 

    1 Answer 1

    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; ?>
    continue to browse articles about articles of

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far