– Update: 03/07/2021
There are many different ways to display articles on the homepage. The most common types are lists (Lists) or grids (Grid). And another form I want to mention is the column form (Column). It will separate posts into left and right columns by adding a bit of WordPress and CSS code.
However this way will not use Bootstrap. Bootstrap when dividing columns will use col-sm-6 and the article will loop from left to right. But the way below will loop from top to bottom. If you are curious, see how to do it below.
First you will write HTML and PHP code
<?php $query_args = array(
"posts_per_page' => 8,
'post_type' => 'post',
'meta_key' => 'nb_type',
'meta_value' => '1'
);
$query = new WP_Query( $query_args ); ?>
<div class="left-item">
<?php
$row_start = 1;
while ( $query->have_posts() ) : $query->the_post();
if( $row_start % 2 != 0) ?>
<div class="box">
<?php get_template_part( 'tpl/job','item' ); ?>
</div>
<?php
++$row_start;
endwhile;
?>
</div>
<div class="right-item">
<?php
$query_args = array(
'posts_per_page' => 8,
'post_type' => 'job',
'meta_key' => 'nb_type',
'meta_value' => '1',
'offset' => 4,
);
$query = new WP_Query( $query_args );
$row_start = 1;
while ( $query->have_posts() ) : $query->the_post();
if( $row_start % 2 != 0) ?>
<div class="box">
<?php get_template_part( 'tpl/job','item' ); ?>
</div>
<?php
++$row_start;
endwhile;
?>
</div>
Next I will write CSS code to decorate
.box:nth-child(odd)
background: #f5f5f5;
.box:nth-child(event)
background: #fff;
.left-item
width: 49%;
float: left;
border: 1px solid #c2c2c2;
.right-item
width: 49%;
float: right;
border: 1px solid #c2c2c2;
The result after the implementation is also eye-catching!
