Display wordpress posts in bootstrap grid with different classes

Question

I am using a script I obtained from a Blog that displays 3 wordpress posts on a non-wordpress page as follows:

<div class="wrapper row">
    <?php
    define('WP_USE_THEMES', false);
    require('news/wp-load.php');
    query_posts('showposts=3');
    ?>

    <?php while (have_posts()): the_post(); ?>
        <div class="col-sm-4">
            <h2><?php the_title(); ?></h2>
            <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
            <div class="image"><?php
                if ( has_post_thumbnail() )
                    the_post_thumbnail( 'thumbnail' );
                else
                    echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
                ?></div>
            <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
        </div><!-- /.col-sm-4 -->
    <?php endwhile; ?>
</div>

I have currently got the loop ( 3 posts ) in a bootstrap grid repeating the 'col-sm-4' div across the 12 column grid.

What I would liked to do is have the first post in a 'col-sm-6' div and the other two in a 'col-sm-3' div.

Is there a way I can adapt this code to do this?

Thanks in advance!

Answer 1

You can have a simple $first = true flag which can then be used to output col-sm-6. Before the first run is finished you set the flag to false.

Here is your code rewritten with this in mind:

<div class="wrapper row">
<?php
define('WP_USE_THEMES', false);
require('news/wp-load.php');
query_posts('showposts=3');
?>

<?php $first = true; while (have_posts()): the_post(); ?>
<div class="<?php if ($first) { echo 'col-sm-6'; } else { echo 'col-sm-3'; } ?>">
<h2><?php the_title(); ?></h2>
<p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
<div class="image"><?php
if ( has_post_thumbnail() )
    the_post_thumbnail( 'thumbnail' );
else
     echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg"   alt="Example Image" title="Example" width="100px"/>';
?></div>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
</div><!-- /.col-sm-4 -->
<?php $first = false; endwhile; ?>
</div>

Answer 2

For this you have to simply check if loop is running for first time i.e is it showing first post.

By simply initializing variable and make it increase by 1 every time while completes its loop.

I have made dummy code for it to make you understand clearly.

<?php 
$sn = 1; //initializing variable assigning 1 to it
while (have_posts()): the_post(); // your while loop
if($sn == 1){ // here we will check if $sn = 1 which means we are have first post if not then it might be 2nd or third
?>
    <div class="col-sm-6">
<?php } else { ?>
    <div class="col-sm-4">    
<?php } ?>        
        <h2><?php the_title(); ?></h2>
        <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
        <div class="image">
            <?php
            if ( has_post_thumbnail() )
                the_post_thumbnail( 'thumbnail' );
            else
                echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
            ?>
        </div>
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
    </div><!-- /.col-sm-4 -->
<?php 
$sn++;  // very important to increment variable by 1  so that we can check how many time loop has run
endwhile; ?>

I hope it will help you.

Answer 3

<div class="wrapper row">
    <?php
    define('WP_USE_THEMES', false);
    require('news/wp-load.php');
    query_posts('showposts=3');

    $isFirst = true;
    while (have_posts()): the_post();
    if($isFirst == true) {
        echo '<div class="col-sm-6">';
        $isFirst = false;
    } else {
        echo '<div class="col-sm-4">';
    }
    ?><h2><?php the_title(); ?></h2>
    <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
    <div class="image"><?php
        if ( has_post_thumbnail() )
            the_post_thumbnail( 'thumbnail' );
        else
            echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
        ?></div>
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
    </div><!-- /.col-sm-4 -->
<?php endwhile; ?>
</div>

Try this code