wordpress: show posts in two columns - php

Question

I have a theme that shows the latest four posts in one column. I want to convert this to two posts in two columns.
I made two divs next to each other and put the first in descending order and the other in ascending order. Then I set it to show only 2 posts.
But now it shows 2 posts in the left div and all four posts in the right div:
I don't understand why it is doing this. Here is the code:
<section class="container">
<div class="left-half">
<article>
<!-- =========================
SECTION: LATEST NEWS
============================== -->
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<div class="section-overlay-layer">
<div align="center" class="container">
<div class="row">
<!-- TIMELINE HEADING / TEXT -->
<?php
if(!empty($parallax_one_latest_news_title)){
echo '<div class="col-md-12 timeline-text text-left"><h2 class="text-left dark-text">'.esc_attr($parallax_one_latest_news_title).'</h2><div class="colored-line-left"></div></div>';
} elseif ( isset( $wp_customize ) ) {
echo '<div class="col-md-12 timeline-text text-left paralax_one_only_customizer"><h2 class="text-left dark-text "></h2><div class="colored-line-left "></div></div>';
}
?>
<div class="parallax-slider-whole-wrap">
<!--<div class="controls-wrap">
<button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
<button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
</div>-->
<!-- TIMLEINE SCROLLER -->
<div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
<ul class="vertical-timeline" id="timeline-scroll">
<?php
$i_latest_posts= 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i_latest_posts++;
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 1){
echo '<li>';
}
} else {
echo '<li>';
}
?>
<div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">
<div itemscope itemprop="image" class="icon-container white-text">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
else: ?>
<img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
<?php
endif;
?>
</a>
</div>
<div class="info">
<header class="entry-header">
<h1 itemprop="headline" class="entry-title"><br><br><br>
<?php the_title(); ?>
</h1>
<!-- .entry-meta -->
</header>
<div itemprop="description" class="entry-content entry-summary">
<?php the_excerpt(); ?>
<?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?>
</div>
</div>
</div>
<?php
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 0){
echo '</li>';
}
} else {
echo '</li>';
}
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div><!-- .parallax-slider-whole-wrap -->
</div>
</div>
</div>
</section>
<?php
}
} ?>
</article>
</div>
<!--rechts-->
<div class="right-half">
<article>
<!-- =========================
SECTION: LATEST NEWS
============================== -->
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'DESC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<div class="section-overlay-layer">
<div align="center" class="container">
<div class="row">
<!-- TIMELINE HEADING / TEXT -->
<br>
<br>
<br>
<div class="parallax-slider-whole-wrap">
<div class="controls-wrap">
<button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
<button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
</div>
<!-- TIMLEINE SCROLLER -->
<div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
<ul class="vertical-timeline" id="timeline-scroll">
<?php
$i_latest_posts= 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i_latest_posts++;
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 1){
echo '<li>';
}
} else {
echo '<li>';
}
?>
<div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">
<div itemscope itemprop="image" class="icon-container white-text">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
else: ?>
<img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
<?php
endif;
?>
</a>
</div>
<div class="info">
<header class="entry-header">
<h1 itemprop="headline" class="entry-title"><br><br><br>
<?php the_title(); ?>
</h1>
<!-- .entry-meta -->
</header>
<div itemprop="description" class="entry-content entry-summary">
<?php the_excerpt(); ?>
<?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?>
</div>
</div>
</div>
<?php
if ( !wp_is_mobile() ){
if($i_latest_posts % 2 == 0){
echo '</li>';
}
} else {
echo '</li>';
}
endwhile;
wp_reset_postdata();
?>
</ul>
</div>
</div><!-- .parallax-slider-whole-wrap -->
</div>
</div>
</div>
</section>
<?php
}
} ?>
</article>
</div>
</section>

Answer 1

If I understood correctly what you want to achieve - to divide several posts into two columns, I can not understand exactly how you want to achieve this into code. If you rely on this condition $the_query->current_post % 2 == 1 to filter the posts, then in your code it only filter printing of the li element, but then the cycle continues and show the post itself, ie what you achieve with this code is to place two posts (div.timeline-box-wrap) elements in one li.If you want to use this method of separation, you should change the code a little (I will simplify it, but the main is, that you must stop current loop if your condition pass).
You don't need to query DB two times with the same query - this is performance issue, so you can use the same result and loop over two times.
You can use $the_query->current_post to get current post and filter.
<section class="container">
<div class="left-half">
<article>
<?php
$parallax_number_of_posts = get_option('posts_per_page');
$args = array( 'post_type' => 'product', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<ul class="vertical-timeline" id="timeline-scroll">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
if($the_query->current_post % 2 == 1)
continue; ?>
<li><?php the_title() ?></li>
<?php endwhile; ?>
</ul>
</section>
<?php
}
} ?>
</article>
</div>
<div class="right-half">
<article>
<?php
$the_query->rewind_posts();
if ( $the_query->have_posts() ) {
if($parallax_number_of_posts > 0) {
?>
<section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
<ul class="vertical-timeline" id="timeline-scroll">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
if($the_query->current_post % 2 == 0)
continue; ?>
<li><?php the_title() ?></li>
<?php endwhile; ?>
</ul>
</section>
<?php
}
} ?>
</article>
</div>
</section>
P.S. You can simplify more, if you set 2 variables: $left and $right and use only one loop to set one or other with html, and then print their values.