Display 3 columns to be read alphabetically down e

Question

I bought a wordpress template and try to modify the codes in the brand page to display 3 columns. below is the scenario:

Currently Display:

a | b | c | d
e | f | g | h
i | j | k

I want the display to Becomes

a | d | g 
b | e | h 
c | f | i

The codes below display the current one. Can anyone help me to correct the codes below to display the above scenario.

CODES:

<?php
   $args = array(
    'post_type' => 'partner',
    'posts_per_page' => '-1',        
    'order'          => 'ASC',
    'post__not_in' => array( $post->ID )
   );

  // the query
  $query = new WP_Query( $args );

  // The Loop
     ?>
  <section class="recent-posts clear">
    <?php           
        $lastChar = ''; 
        $count_posts = wp_count_posts('partner')->publish;
        $i = 0;
    ?>
    <?php if ($query->have_posts()) : while($query->have_posts()) : $i++;
   if(($i % 3) == 0) : else : $query->the_post(); ?>
    <?php 
        global  $post;
        $brandname = $post->post_title;
        $char = $brandname[0];
    ?>
    <div style="float:left; width:24%; margin-right:10px;">
        <?php 
                if ($char !== $lastChar) {
                        if ($lastChar !== '')
                            echo '<br>';                        
                            echo "<div style='padding:10px; background:red;
 color:white; font-weight:bold;'>" .strtoupper($char)."</div>"; 
//print A / B / C etc
                            $lastChar = $char;
                }   
                echo $brandname; 
            ?>
        <?php the_content(); ?>
    </div>

    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>


  </section>

Answer 1

Try this code

$args = array(
    'post_type' => 'partner',
    'posts_per_page' => '-1',        
    'order'          => 'ASC',
    'post__not_in' => array( $post->ID )
   );
$list = new WP_Query( $args );
$count_posts = wp_count_posts('partner');   
$lastChar = '';  $inc=1;

if ( $list->have_posts() ) :
echo "<div class='colm'>";
while($list->have_posts()): $list->the_post();
    global  $post;  

    $brandname = $post->post_title;
    $char = $brandname[0];                      


    if ($char !== $lastChar) {
                 //if($inc!=0){echo "</div>";}$inc++;

        if($inc%4==0){echo "</div><div class='colm'>";$inc=1;}
             $inc++;             
                 echo "<div style='padding:10px; background:red;
                        color:white; font-weight:bold;'>".
                     strtoupper($char)."</div>";

            $lastChar = $char;
    }  
    echo '<li><a href="'.$post->link.'" 
                 title="'.$post->post_title.'"
                 target="_BLANK"    >' .
         $brandname.$inc.'</a></li>';                        


    endwhile;
    echo "</div>";
    endif;

    wp_reset_postdata();    

Add this CSS

.colm{
        float:left;
        margin: 10px;
        width: 30%;
    }

Answer 2

Here you go. You just need a little counting and an edit in your loop. See comments in code -

<?php 
$count_partners = wp_count_posts('partner');
$count_posts = $count_partners->publish;
$i = 0;
//get the number of items for each column
$items_per_column = $count_posts/3;
if (($count_posts % 3) == 1) { $first_col = $items_per_column + 1;
                        $second_col = $items_per_column;
                        $third_col = $items_per_column;
} elseif (($i % 3) == 2) { $first_col = $items_per_column + 1;
                        $second_col = $items_per_column  + 1;
                        $third_col = $items_per_column;
} else {
    $first_col = $items_per_column;
    $second_col = $items_per_column;
    $third_col = $items_per_column;

}

if ($query->have_posts()) : while($query->have_posts()){
     $query->the_post(); 

        global  $post;
        $brandname = $post->post_title;
        $char = $brandname[0];
    if ( $i == 1) {//for the first item start a column div
        ?>
        <div style="float:left; width:24%; margin-right:10px;">
        <?php 
    }
                if ($char !== $lastChar) {
                        if ($lastChar !== '')
                            echo '<br>';                        
                            echo "<div style='padding:10px; background:red;
 color:white; font-weight:bold;'>" .strtoupper($char)."</div>"; 
//print A / B / C etc
                            $lastChar = $char;
                }   
                echo $brandname; 
            ?>
        <?php the_content();
        if ( $i == $first_col || $i == $second_col ) {
        //for first and second cols close the div and start the next
            ?>
            </div>
            <div style="float:left; width:24%; margin-right:10px;">

            <?php 
        }

        if ( $i == $third_col ) {
        //for the third col just close it up
            ?>
            </div>

            <?php 
        }

        $i++;
    } else: ?>
    <div>Alternate content</div>

Updated - changed the syntax a bit and moved the counter to the end of the while loop.

Answer 3

In your code try to remove

<div style="float:left; width:24%; margin-right:10px;">

and replace it with

<div style="float:left; width:32%; margin-right:11px;">

Answer 4

Addition to achieve the result in 3 columns in a group vertically is the masonry css technique. Here is my final result:

<div id="masonry-container" class="cols">
<?php      

$args = array(
'post_type' => 'partner',
'posts_per_page' => '-1',   
'orderby'=> 'title',     
'order'          => 'ASC',
'post__not_in' => array( $post->ID ));

$list = new WP_Query( $args );
$count_posts = wp_count_posts('partner');   
$lastChar = ''; 
$inc=1;

if ( $list->have_posts() ) :

    echo "<div style='colm'>";

    while($list->have_posts()): $list->the_post();

    global  $post;  

    $brandname = $post->post_title;
    $char = $brandname[0];                      

if ($char !== $lastChar) {                 

    if($inc%1 == 0) {echo "</div><div class='colm'>";}

        $inc++;            

        echo "<div style='padding:10px; background:red; color:white; font-weight:bold;'>".strtoupper($char)."</div>";
        echo "<br>";
        $lastChar = $char;
}  
    echo '<li><a href="'.$post->link.'" title="'.$post->post_title.'" target="_BLANK">' .$brandname.'</a></li>'; 

    endwhile;
    echo "</div>";
    endif;

wp_reset_postdata();   

?>
</div>

CSS

#masonry-container {
    width: 100%;
    max-width: 1200px;
    margin: 2em auto;
}

.cols {
   -moz-column-count:3;
   -moz-column-gap: 3%;
   -moz-column-width: 30%;
   -webkit-column-count:3;
   -webkit-column-gap: 3%;
   -webkit-column-width: 30%;
   column-count: 3;
   column-gap: 3%;
   column-width: 30%;
}

#contents .colm {
   margin:10px;
}
#contents .colm li{
   list-style: circle;
   margin-left:30px;
   line-height:25px;
}