0

I am trying to make my own version of this I've implemented bootstrap grid in my attempt. I'm very close, but the <div class="row"> being looped is causing problems.

I want to just be able to build my html structure with bootstrap and not rely soley on the if statements that control how many archives are spit out.

Is there a way to add as many <?php the_post_thumbnail('category-thumbnail'); ?> (for example) as I want so it sequentially spits out the blogs in order?

<?php
$count = 0;
while ( have_posts() ) : the_post();

if ( $count < 1 ) { ?>
<div class="row" style="margin-bottom:0px;">
    <div class="col-md-12">
        <a class="thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
        <div class="blog-details-wrapper clear">
            <h2 class="title">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h2>
            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
            <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
            <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
        </div>
    </div>
</div>

<?php } elseif ( $count <= 2 ) { ?>
  <div class="row" style="margin-bottom:0px;">
    <div class="col-md-6">
        <a class="thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
        <div class="blog-details-wrapper clear">
            <h2 class="title">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h2>
            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
            <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
            <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
        </div>
    </div>
    <div class="col-md-6">
        <a class="thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
        <div class="blog-details-wrapper clear">
            <h2 class="title">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h2>
            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
            <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
            <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
        </div>
    </div>
</div>


<?php } $count++;
endwhile;

?>

So in the above code: I would be able to call a blog/blogs in each row, but it would the next blog in sequential order. So in this case: one that spans the whole browser and then 2 50% width ones right next to eachother, then repeat structure for more blogs.

Is this possible? Is there a way to make a variable or something that allows you to a call archives repeatedly while sequentially spitting out the archives and not repeating the same ones?

thanks in advance.

1
<?php
$counter = 1; 

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
if($counter == 1) :
?>
            <div class="row clear" style="margin-bottom:0px;">
                <div class="col-md-12 border-12">
                    <a class="thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    <div class="blog-details-wrapper clear">
                    <h2 class="title">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                    </h2>
                        <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                        <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
                        <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
                    </div>
                </div>
            </div>

<?php

elseif($counter == 2) :
?>

            <div class="row">
                <div class="col-md-6 border">
                    <a class="thumb-6" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    <div class="blog-details-wrapper clear">
                    <h2 class="">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                    </h2>
                        <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                        <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
                        <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
                    </div>
                </div>

<?php
elseif($counter >= 2) : ?>

                <div class="col-md-6 border">
                    <a class="thumb-6" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    <div class="blog-details-wrapper clear">
                    <h2 class="">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                    </h2>
                        <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                        <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
                        <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
                    </div>
                </div>
            </div>  

<?php 
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
endif;
?>
0

The common loop implementation loops for every post. It is so pervasive that it's not obvious it being entirely optional.

The "every" part comes from while ( have_posts() ), the advancing from the_post(). The former is completely technically optional.

You can advance by one post simply calling the_post() and surrounding it by any other logic you deem necessary. Of course if your requirements are more complex then it would also take more complex logic than simple while().

I had blogged about this before Asymmetrical WordPress loops.

  • I think that this is the longest way to say "yes, everything is possible" I saw so far :) – Mark Kaplun Sep 17 '15 at 17:23
  • That would be a succinct, but very very downvoted answer. :) – Rarst Sep 17 '15 at 17:38
  • @Rarst I appreciate the effort, but strongly agree with the two other comments. I actually read your Asymmetrical Loop article and I'm still a little lost, because it's not obvious to me how to use normal PHP and put the results in a variable to use at my discretion. It all makes sense but it's a little vague. A more applicable to my question explanation would be greatly appreciated! Thanks. – RLM Sep 17 '15 at 19:38
  • The issue is this technique is well into "normal PHP" territory. This is precisely the point when just moving WP stuff around ends and you need to be able to plan and write actual PHP code. :) It's middle of the night here, will see if I can get to it tomorrow. – Rarst Sep 17 '15 at 22:30
  • @Rarst I am fully aware this requires "normal PHP". When you get a chance, go back and read my question and you can see that I am already using it :) I figured it out. I'll answer my own question. However, feel free to post your solution, I would be interested to see it. – RLM Sep 17 '15 at 22:54

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.