php - wordpress: show posts in two columns -
i have theme shows latest 4 posts in 1 column. want convert 2 posts in 2 columns.
i made 2 divs next each other , put first in descending order , other in ascending order. set show 2 posts.
but shows 2 posts in left div , 4 posts in right div:
i don't understand why doing this. here 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> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> <!-- .entry-meta --> </header> <div itemprop="description" class="entry-content entry-summary"> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="read-more"><?php printf( esc_html__( 'bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?></a> </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> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> <!-- .entry-meta --> </header> <div itemprop="description" class="entry-content entry-summary"> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="read-more"><?php printf( esc_html__( 'bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text"> '.get_the_title().'</span>' ); ?></a> </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>
if understood correctly want achieve - divide several posts 2 columns, can not understand how want achieve code. if rely on condition $the_query->current_post % 2 == 1 filter posts, in code filter printing of li element, cycle continues , show post itself, ie achieve code place 2 posts (div.timeline-box-wrap) elements in 1 li.if want use method of separation, should change code little (i simplify it, main is, must stop current loop if condition pass).
- you don't need query db 2 times same query - performance issue, can use same result , loop on 2 times.
- you can use
$the_query->current_postcurrent post , 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. can simplify more, if set 2 variables: $left , $right , use 1 loop set 1 or other html, , print values.
Comments
Post a Comment