1

I'm trying to style a single loop to look like so

---------------------------------------------
||            |             ||              ||
||            |             ||--------------||
||            |             ||              ||
||            |             ||--------------||
||            |             ||              ||
||            |             ||--------------|| 
||            |             ||              ||
----------------------------------------------

So what I'm trying to achieve here is 5 posts being pulled from the loop. The first two are positioned on the left and are larger. The next 3 are on the right and are much smaller.

I'm attempting to use two get_template_part in order to achieve this using Twitter Bootstrap.

This is what I've attempted so far

<div class="col-lg-12">
    <div class="row">
        <div class="col-lg-7">
            <div class="row">
            <?php if ( have_posts() ) : ?>
            <?php if ( in_category( 'Featured' ) ) : ?>
                <?php /* Start the Featured Loop */ ?>
                <?php $count=0; ?>
                <?php while ( have_posts() ) : the_post(); ?>

                    <?php $count++; ?>

                    <?php if($count <= 1):?>
                    <?php get_template_part( 'content', 'featured' ); ?>

            </div>      
        </div>
        <div class="col-lg-5">
            <div class="row">
                <?php else: ?>

                <?php if($count >= 3)?>
                        <?php get_template_part( 'content', 'featuredside' ); ?>
                        <?php endif; ?>
                <?php endwhile; ?>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

And this works when I set the line <?php if($count <= 1):?> to 1 but when I change it to two to try and create the layout I'm after, the second post jumps over to the <div class="col-lg-5"> and messes up the entire layout.

Can anyone seew hat I'm doing wrong?

1

instead of a counter variable, you can use the build-in loop counter;

as I don't know how you need to wrap the posts into the individual divs, here just an example structure (only to be used with 5 posts per page):

<div class="col-lg-12">
    <div class="row">

            <?php if ( have_posts() ) : ?>
            <?php if ( in_category( 'Featured' ) ) : /* Start the Featured Loop */ ?>

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

                <?php if( $wp_query->current_post == 0 ) { 
                //open wide column wrapper div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post <= 1 ) { 
                get_template_part( 'content', 'featured' );
                //insert large post// ?>
                <?php } ?>

                <?php if( $wp_query->current_post == 1 || $wp_query->current_post <= 1 && $wp_query->current_post == $wp_query->post_count-1 ) { 
                //close wide column div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post == 2 || $wp_query->current_post <= 1 && $wp_query->current_post == $wp_query->post_count-1 ) { 
                //open narrow column wrapper div// ?>
                <?php } ?>

                <?php if( $wp_query->current_post >= 2 ) { 
                get_template_part( 'content', 'featuredside' );
                //insert small post//?>
                <?php } ?>

                <?php if( $wp_query->current_post == 4 || $wp_query->current_post == $wp_query->post_count-1 ) { 
                //close narrow column div// ?>
                <?php } ?>

                <?php endwhile; ?>

                    <?php endif; ?>

                <?php endif; ?>

    </div> <!--/.row-->
</div> <!--/.col-lg-12-->

this takes care of closing the divs even if ther are less than five posts on the page, and also creates an empty second column if ther are only two or less posts.

caveat: using in_category() at that location might give you unexpected results; try to use a different way of making the loop specific to 'featured' posts.

what template file are you working on?

  • Ah! This is much better, I'll just need to format the divs correctly. Thanks for the answer, I've learned a lot from it actually and I'll look for a better way than in_category too. This is part of my index file. I'm using _underscores starter theme to learn WordPress development. I've taken a copy of their content.php and modified it into a a featured post template that is included in this loop. – Michael N Aug 25 '14 at 23:36
0

What I would do is use multiple loops while tracking the ID of the post recorded in the previous post and skipping over it in the next loop so it is not repeated. I'll show you what I mean. I'm also making use of the WP_Query class.

<div class="container">

        <div class="row">

            <?php

                $args = array(
                    'posts_per_page' => 1
                    );

                $query = new WP_Query($args);

                if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

                        <?php $do_not_duplicate = $post->ID; ?>

                        <div class="col-md-4">

                            <?php the_title(); ?>
                            <?php the_excerpt(); ?>


                        </div><!--col-md-4-->

                    <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

                <?php wp_reset_postdata();

                $args = array(
                    'posts_per_page' => '1'
                    );

                $query = new WP_Query($args);

                ?>

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

                      //storing the post ID in a new variable
                       <?php $do_not_duplicate_again = $post->ID; ?>

                        //This is where we check if the post from the first loop is being repeated and skip an iteration of the loop if it is.
                        if ( $post->ID == $do_not_duplicate ) continue; 


                    <div class="col-md-4">

                        <?php the_title(); ?>
                        <?php the_excerpt(); ?>

                    </div><!--col-md-4--> 

                <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

    <?php wp_reset_postdata();

                $args = array(
                    'posts_per_page' => '3'
                    );

                $query = new WP_Query($args);

                ?>

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



                        if ( $post->ID == $do_not_duplicate_again ) continue; 


                    <div class="col-md-4">

                        <?php the_title(); ?>
                        <?php the_excerpt(); ?>

                    </div><!--col-md-4--> 

                <?php endwhile;

                else :

                    echo '<p>No posts found</p>';

                endif; ?>

        </div><!--row-->

</div><!--container-->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.