0

The code below wants to show a list of articles in two collumns.

    <?php
    $i = 0;
    $the_query = new WP_Query( 'showposts=35&offset=0' );
    while ($the_query -> have_posts()) : $the_query -> the_post();
    $i++;
    ?>

    <?php if ($i == "1") { ?>
    <div style="padding-top: 10px; float: left; width: 50%;">
        <?php the_title(); ?>
    <?php } ?>


    <?php if (in_array($i, array(3,4,5,6,7,8,9,10))) { ?>
        <?php the_title(); ?>
    <?php } ?>

   <?php if ($i == 10) { ?>
            </div>
   <?php } ?>

    <?php if ($i == "2") { ?>
        <div style="padding-top: 10px; float: right; width: 50%;">
        <?php the_title(); ?>
        </div>          
    <?php } ?>

    <?php endwhile;?>

The problem is: the article with $i = 2 appears below article with $i = 1. It is not the order that I used in code above.

How can I arrange articles in this order?

PS: my articles with $i=2 appears in first collumn (aligned left) too, because of </div> after article with $i=10.

If you have some questions, or if you don't understand, I'm here.

EDIT:

My code:

<?php
$the_query = new WP_Query( 'showposts=35&offset=0' );
while ($the_query -> have_posts()) : $the_query -> the_post();
$titles[] = get_the_title();               
$excerpts[] = get_the_excerpt(); 
endwhile;
?>

To display first article:

<?php
echo $titles[0];
echo "<br/>";
echo $excerpts[0];
?>

Is code above ok for server speed?

0

2 Answers 2

1

Separate the posts in two different arrays, then loop over both separately:

$columns      = array ( 'first' => array (), 'second' => array () );
$first_column = array( 1, 3, 4, 5, 6, 7 );

// separation
foreach ( $the_query->posts as $index => $post )
{
    if ( in_array( $index + 1, $first_column ) )
        $columns[ 'first' ][] = $post;
    else
        $columns[ 'second' ][] = $post;
}

unset ( $post );

// render one column
echo 'First column<br>';
foreach ( $columns[ 'first' ] as $p )
{
    print $p->ID
        . get_the_title( $p ) . '<br>'
        . get_the_post_thumbnail( $p->ID ) . '<br>';
}

// render the next column
echo 'Second column<br>';
foreach ( $columns[ 'second' ] as $p )
{
    print $p->ID
        . get_the_title( $p ) . '<br>'
        . get_the_post_thumbnail( $p->ID ) . '<br>';
}
4
  • can you help me please? I'm trying to shot post id, featured image etc, but it doesn;t show anything Jul 9, 2013 at 9:52
  • 1
    @ITChristian I made an update to my answer to show how to get the thumbnail.
    – fuxia
    Jul 9, 2013 at 9:56
  • Thanks @toscho ! I will publish my own code, to tell me if is ok if i will use it Jul 9, 2013 at 10:11
  • I've edited my question @toscho Jul 9, 2013 at 10:18
0

You can also try a much simpler way here:

@media screen and (min-width : 640px){

.home ul.index > li{

    display:inline-block;
    clear:none;
}

.home .index > li:nth-child(odd){

    width:50%;
    float:left;
    border:1px solid #fff;
    clear:both;
}
.home .index > li:nth-child(even){

    width:46%;
    float:right;
    border:1px solid #fff;
}}
1
  • 1
    Don't just dump code and links as answers, please give a small explanation to why this code will work Apr 30, 2014 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.