First post full width, rest in two columns

3 comments

1. you could rewrite the full code and use the build-in loop counter $wp_query->current_post to fix the css classses and add a class for the first post per row to clear the float to prevent the ‘wacky sticking’;

   example:

   <?php if ( have_posts() ) : ?>
   
   <?php while ( have_posts() ) : the_post();  ?>
           <?php /* Start the Loop */ ?>
   
           <div class="entry-content-<?php echo (( $wp_query->current_post == 0 ) ? 'main' : 'rest' ); if( $wp_query->current_post%2 == 1 ) echo ' left-post'; ?>">
           <?php get_template_part( 'content', get_post_format() ); ?>
           </div>
   
   <?php endwhile; ?>
   

   additional css:

   .left-post { clear: left; }
   

2. You actually don’t need to do all that work on the PHP side as CSS can handle this using nth selectors. Also, because all these children are prefixed you might as well use attribute selectors.

   WORKING DEMO – JSFIDDLE

   CSS

   body {
       font-family: Arial, Helvetica, sans-serif;
       background: snow;
       color: dimgrey;
   }
   
   .items {
       position: relative;
       display: block;
       clear: both;
       width: 100%;
   }
   
   .items [class^="entry-content-"] .copy {
       padding: 15px;
   }
   
   .items [class^="entry-content-"] {
       background: gainsboro;
       position: relative;
       min-height: 50px;
       word-wrap: break-word;
       display: inline-block;
       overflow: hidden;
       margin-bottom: 5px;
   
       width: 48.5%;
       float: left;
   }
   
   .items [class^="entry-content-"]:first-of-type {
       background: skyblue;
       color: snow;
   
       width: 100%;
       clear: both;
   }
   
   .items [class^="entry-content-"]:nth-child(even) {
       clear: both;
   }
   
   .items [class^="entry-content-"]:nth-child(odd) {
       float: right;
       clear: right;
   }
   

   ---

   DEMO CONTENT

   Using jQuery we can produce random content to check various sizes and how they affect the layout. In these cases; first item is full width, left items float left, right items float right and the next row follows the largest item. See it in action here.

   HTML

   <div class="items">
       <div class="entry-content-main">Main</div>
       <div class="entry-content-rest">Post 1</div>
       <div class="entry-content-rest">Post 2</div>
       <div class="entry-content-rest">Post 3</div>
       <div class="entry-content-rest">Post 4</div>
       <div class="entry-content-rest">Post 5</div>
       <div class="entry-content-rest">Post 6</div>
   </div>
   <br/>
   <br/>
   <div class="items">
       <div class="entry-content-main">Main</div>
       <div class="entry-content-rest">Post 1</div>
       <div class="entry-content-rest">Post 2</div>
       <div class="entry-content-rest">Post 3</div>
       <div class="entry-content-rest">Post 4</div>
       <div class="entry-content-rest">Post 5</div>
       <div class="entry-content-rest">Post 6</div>
       <div class="entry-content-rest">Post 7</div>
   </div> 
   

   JS

   function range(min, max){
       var range = max-min;
       return Math.floor( Math.random()*range ) + min;
   }
   
   // words to use
   var things = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat.").split(' ');
   
   // random word factory
   function getWords(count){ 
     var stuff = [];
       while(count && count>0){
        var thing = things[Math.floor(Math.random()*things.length)];  
        stuff.push(thing);
        count--;
     }
     return stuff.join(' ');
   }
   
   var $ = $ || jQuery;
   $(document).ready(function() {
   
      // add random content to all entries
      $('.items [class^="entry-content-"]').each(function(inx, item){
           var $item = $(item),
           words = getWords ( range ( 5, 200) );
           $item.html ( '<div class="copy">POST ' + inx + " - " + words + '</div>' );
      });
   
      // add random header content
      $('.items [class^="entry-content-"]:first-of-type').each(function(inx, item){
           var $item = $(item),
           words = getWords ( range ( 5, 20) );
           $item.html ( '<h1 class="copy">MAIN ' + inx + " - " + words + '</h1>');
      });
   });
   

   Colors via neilorangepeel

3. ok here is what I have figured out.

   For displaying First post with full width and rest in two columns.

   <?php $i=0; $j=0;?>
   <?php if ( have_posts() ) : ?>
   <?php while ( have_posts() ) : the_post(); 
   if ($i==0){ 
         echo '<div class="col-sm-12 col-md-12 col-lg-12">'; //<-- bootstrap
   
         //you can also call get_the_title and the_content function if you are
         //doing theme customization instead of using get_template_part
   
   
         get_template_part( 'template-parts/content', get_post_format() );
         echo '</div>';
            }
   if($j<=1){
         echo '<div class="col-sm-12 col-md-4 col-lg-4">';
         get_template_part( 'template-parts/content', get_post_format() );
         echo '</div>';
           }
           $i ++;
           $j ++;
   
           // End the loop.
           endwhile;
   

   
   If you want to display First post with full width and rest in three columns you
   can simply do this just by

    <?php $i=0; ?>
    <?php if ( have_posts() ) : ?>
    <?php
           // Start the loop.
     while ( have_posts() ) : the_post();
   
     if ($i==0){   
        echo '<div class="col-sm-12 col-md-12 col-lg-12">';
        get_template_part( 'template-parts/content', get_post_format() );
        echo '</div>';
        }
           else{
         echo '<div class="col-sm-12 col-md-4 col-lg-4">';
         get_template_part( 'template-parts/content', get_post_format() );
         echo '</div>';
           }
           $i ++;
   
           // End the loop.
           endwhile;
   

   The result will be
   

Comments are closed.