Posts in 2 columns on front page

  • Argonath

    (@argonath)


    9 months ago

    Hi,

    I’m not a coder att all, so I try to do some things but I don’t completly understand everything…!

    I would like to display last posts on my front page, in 2 columns. Actually it works, but… the first column displays all last posts, and the second posts older… It’s not exactly what I want to do. I would like the last post on first row first column, and the before last on first row second column.

    Thanks !

    The code is :

    					
<div id="column_01">
		
<?php $posts = get_posts('numberposts=8&offset=1'); foreach($posts as $post) { ?>
    <div class="entry-content clearfix">
     <ul class="wp-block-latest-posts__list is-grid columns-3 has-dates wp-block-latest-posts"><li><div class="wp-block-latest-posts__featured-image"><?php the_post_thumbnail('thumbnail'); ?>
		</div>   
		<li><a class="h3" href="<?php the_permalink()?>"><?php the_title(); ?></a><br><span class="h4"><?php echo get_the_date( ); ?></span></li>
		</ul>
				 
    </div>
<?php } ?>			
						
</div>							
						
<div id="column_02">
		
<?php $posts = get_posts('numberposts=8&offset=7'); foreach($posts as $post) { ?>
    <div class="entry-content clearfix">
     <ul class="wp-block-latest-posts__list is-grid columns-3 has-dates wp-block-latest-posts"><li><div class="wp-block-latest-posts__featured-image"><?php the_post_thumbnail('thumbnail'); ?></div>   
		<li><a class="h3" href="<?php the_permalink()?>"><?php the_title(); ?></a><br><span class="h4"><?php echo get_the_date( ); ?></span>
		</ul>
    </div>
<?php } ?>			
						
</div>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    For ordering posts the way you want, you don’t want columns, you want rows or grid layout. They can be formatted to look like columns, but the actual organization is row or grid. Remove the column related HTML. The resulting HTML should result in a single column. The grid or row layout will be achieved with CSS. You can use either the grid or flexbox CSS models to achieve the desired layout. Or you could simply set each post’s width to 50% or less and float them left.

    Thread Starter Argonath

    (@argonath)

    @bcworkz’s solution is working perfectly. Thanks a lot !

    • This reply was modified 9 months ago by Argonath.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Posts in 2 columns on front page’ is closed to new replies.