First article : single column; Other articles : 2 columns

Question

I'm building a website (with Wordpress 3.6) and would like to put the news/articles arranged as follows:

• The first article was with the maximum size (one column);

• The following articles were arranged in two columns.

Appears only 5 or 7 articles per page. How to do this?

Answer 1

Test and let me know:

Put the following code into your index.php (or front-page.php):

<?php if( have_posts() ) : ?>

        <div class="col-full">
            <?php for( $news = 0; $news < 1; $news++ ) { ?>
                <?php the_post(); ?>
                <h3 class="news-title"><?php the_title(); ?></h3>
                <div class="news-excerpt"><?php the_excerpt(); ?></div>
            <?php } ?>
        </div>
        <div class="place-for-ad"></div>

        <?php // Start Two Column Support ?> 
        <?php $col_counter = 1; ?>

        <?php // Controll the loop's max number (4 here) to echo the max number of news with 2 column ?>
        <?php for( $news = 0; $news < 4; $news++ ) { ?>

            <?php /* Two Column Support get class */ ?> 
            <?php $class = ( $counter % 2  ? ' one' : '' ) ?> 
            <?php $first = ( $counter < 3  ? ' first' : '' ) ?>

            <?php /* Two Column output open the div class */ ?> 
            <div class="col-2<?php echo $class; echo $first; ?>">
                <?php the_post(); ?>
                <h3 class="news-title"><?php the_title(); ?></h3>
                <div class="news-excerpt"><?php the_excerpt(); ?></div>
            </div> <!-- End Two Column Support close div class -->

        <?php $col_counter++; //Update Counter ?>

        <?php } ?>

<?php endif; ?>

And put the following to your Stylesheet (style.css):

.col-full{
    width: 100%;
    float: left;
    position: relative;
    }

.clear{
    clear: both;
    }

/* Common for all the column */
.col-2{
    float: left;
    position: relative; 
    width: 47%; 
    border-top: dashed 1px #ccc; 
    }

/* Loads only on first columns */
.one { 
   clear: both; 
   margin-right: 2%; 
    } 

/* Loads on only the first 3 columns to make the top border into none */
.first {
    border-top: none;
    }