2

Here is my loop

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

        <?php /* Start the Loop */ ?>

<?php $i = 0; while ( have_posts() ) : the_post();  ?>
    <?php if ($i++ == 0) : ?>

        <div class="entry-content-main">
        <?php get_template_part( 'content', get_post_format() ); ?>
        </div>

    <?php else: ?>

        <div class="entry-content-rest">
        <?php get_template_part( 'content', get_post_format() ); ?>
        </div>

    <?php endif; ?>
<?php endwhile; ?>

and my css

.entry-content-rest {
    width: 48.5%;
    float: left;
    border: 1px solid #ddd;
    border-radius: 7px;
    }

This displays my content as follow

Post1

Post2      Post3

Post4      Post5

My problem is, say post 2 is longer (have more contents) than post 3, then my columns is displayed way wacky like this

Post1

Post2      Post3

open       Post4

Post5      Post6

Any suggestions to fix this

2

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
  • michael, how do i use your code in category.php of twenty twelve child theme. I know i need to put echo '<div>' loop without the php tags echo '</div>', but when i do it, i get the following error: Parse error: parse error, expecting ','' or ';'' in C:\Documents and Settings\Pieter\Desktop\xampplite\htdocs\wordpress\wp-content\themes\pietergoosen\category.php on line 33 May 10 '13 at 10:03
  • this is rather a question of when and how to switch from php tags to html tags; here is the corresponding code section: pastebin.com/ZMyZA0CQ
    – Michael
    May 10 '13 at 10:10
0

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

2
  • Digging deep into archives here :-). Wonder 2 and half years later how many people are still stuck with browsers that does not support CSS3. Strange how many people in SA are still stuck with IE8 (no wonder because Windows 7 was still shipped with IE8 IIRC) which does not support CSS3. I tend to avoid client side solutions (if I'm looking for relibility) as browsers differ and client side can be manipulated like JS. Anyways, thanks for the input Dec 20 '15 at 3:20
  • Great news! EOL for IE < 11 - microsoft.com/en-us/WindowsForBusiness/End-of-IE-support + caniuse.com/#feat=css-sel3 >= IE 9.
    – jgraup
    Jan 15 '16 at 22:50
0

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;

enter image description here 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 enter image description here

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.