CODEWITHSUNDEEP
wordpress
Yala Yala Herzlin
Yala Yala Herzlin

Reputation: 622

Display Wordpress blog posts in two columns?

Hi I need to modify my WP theme to make it show latest posts titles and featured images in two columns.

I have been hours trying but I cannot make it work, any suggestion??

This is current code of the blog section custom php file, I can do a wipeout and forget this code and start from scratch, i've tried but I cannot make it work... Really appreciate any hint/ suggestion...I'm not a specialist, i'm learning :)

 <div class="main-container">
            <div class="main wrapper clearfix">



<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>


<aside class="left"></aside>
<article>
  <h1><?php the_title(); ?></h1>
<?php endwhile; ?>


<ul class="posts">

<?php 
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
else { $paged = 1; }

query_posts('cat=9&posts_per_page=10&&paged=' . $paged); 
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <li>

      <h2><?php the_title(); ?></h2><span class="tags"><?php
$posttags = get_the_tags();
if ($posttags) {
  foreach($posttags as $tag) {
    echo $tag->name . ' '; 
  }
}
?></span>
  <time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_time('j F Y'); ?></time> 

  <?php global $more;
    $more = 0;
    the_content('Read more'); ?>


  </li>
<?php endwhile; endif; ?>

</ul>

<div class="pagination">
<?php
global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
  'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
  'format' => '?paged=%#%',
  'current' => max( 1, get_query_var('paged') ),
  'total' => $wp_query->max_num_pages
) );
?></div>

</article-blog>

Upvotes: 0

Views: 7429

Answers (3)

Adam Genshaft
Adam Genshaft

Reputation: 824

I was having the same problem and this helped me out - http://wordpress.org/support/topic/how-to-show-front-pagelatest-posts-in-two-columns#post-4500258

@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;
}}

Upvotes: 0

hizbul25
hizbul25

Reputation: 3849

I think it is perfect for you:

Upvotes: 2

wickywills
wickywills

Reputation: 4204

Could you not just do this with CSS? Just set all your LIs to (for example) width:50%;, then just float them all left and they should sit side by side in a two column layout.

li {
    display:block;
    width:50%;
    float:left;
}

Upvotes: 0

Related Questions