1

I am running a dwfocus news website, I would like to split my li loop catagory in two section, can some let me know how can i proceed forward, thanks.

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
        <ul>
        <?php  
            $i = 0;
            while ( $r->have_posts() ) {
                $r->the_post();
        ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
        <?php } ?>     
        </ul>
    </div>
  • 1
    can you please elaborate what do you mean by split a loop. are you trying to have a 2 columns layout ? – Junaid Jun 17 '15 at 7:06
  • Yes , Exactly i want to split my li loop section in two column layout Please check this screenshot : awesomescreenshot.com/image/332044/… – deve cot Jun 17 '15 at 7:13
2

You will need to create css classes for a left and right column (you can use bootstrap if you like) after creating the classes try this

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
    <ul>
    <?php  
        $i = 0;
        while ( $r->have_posts() ) {
            $r->the_post();
        if($i % 2 == 0){ //even line
    ?>
        <li class="left-col"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
    <?php } else { ?>
        <li class="right-col"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
    <?php };
      $i++; }
    ?>
    </ul>
</div>
| improve this answer | |
  • Yep thanks, Tried but cause an php error, site is loaded with white screen, Let me track the error and let you know once if i got the issue fixed. – deve cot Jun 17 '15 at 7:38
  • i forgot a } of while loop. fixed – Junaid Jun 17 '15 at 7:47
  • yep fixed , Sorry for this I think i not added a clear requirement on this, Actually i would like to show 20 post, First 10 post in left side and next 10 post to right side, Is this possible to show ? – deve cot Jun 17 '15 at 7:58
  • 2
    You dont need to do that. You can use CSS nth item pseudo classes to target even and odd items and I think its better to do that way. – Robert hue Jun 17 '15 at 8:46
0

Here is the code which you can get it show first 10 on left and after that show right side

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
<ul class="headline_left">
<?php  
   $i = 1;
    while ( $r->have_posts() ) {
       $r->the_post(); ?>
        <li>
            <?php the_title( '<a href="' . get_permalink() . '">', '</a>' ); ?>
            <span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span>
        </li>
        <?php 
        if($i == 10){ 
            echo "</ul><ul class='headline_right'>";
        } 
        $i++; 
    }
?>
</ul>  
</div>  

CSS code:

.headline_left{
    float:left;
    width:42%;
    padding-right:6%;
   /*   margin:1px;*/
    min-height:40px;
   /*padding-left: 1px;*/
}
.headline_right{
    float:left;
    width:42%;
    padding-right:6%;
    margin:0;
    min-height:40px;
}
| improve this answer | |

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.