Wordpress Loop with Bootstrap grid. How to optimize this code? - php

Question

In first img code is working with posts == 5
In second image code getting broken if posts == 3
.row doenst close
How to use wordpress Lopp with Bootstrap grid I wanna to know the best way to optimize my code. This code work correctly but I wanna just to optimize this code I think this isn't the best solution. Please show me how I can optimize this code. Thank you.
<div class="container">
<?php
$args = [
'post_status' => 'publish',
'posts_per_page' => 6,
'no_found_rows' => true,
];
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
if ( $query->current_post === 0 )
{
echo '<div class="row">';
echo '<div class="col-12 col-lg-6">'; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 1' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
echo '</div>';
}
if ( $query->current_post === 1 )
{
echo '<div class="col-12 col-lg-6">'; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 2' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
}
if ( $query->current_post === 2 )
{ ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 3' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
}
if ( $query->current_post === 3 )
{ ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post 4' ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
<figure>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php
echo '</div>';
echo '</div>';
}
endwhile; wp_reset_postdata(); ?>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<img src="" alt="">
<h1>TITLE</h1>
<div class="exerpt">
exerpt
</div>
</div>
<div class="col-6">
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
<article class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
title
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-6">
post-4
</div>
<div class="col-6">
post-5
</div>
</div>

Answer 1

You don't need to write the same part of code each time you check a condition.
<div class="container">
<?php
$args = [
'post_status' => 'publish',
'posts_per_page' => 6,
'no_found_rows' => true,
];
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
$post_num = strval($query->current_post + 1);
$post_count = wp_count_posts()->publish;
if ( $query->current_post === 0 || $query->current_post === 4 ) : ?>
<div class="row">;
<?php ;endif; ?>
<?php if ( $query->current_post === 0 || $query->current_post === 1 || $query->current_post === 4 || $query->current_post === 5 ) : ?>
<div class="col-lg-6">'
<?php ;endif; ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $post_num ); ?>>
<figure>
<?php the_post_thumbnail('full', array('class' => 'img-fluid') ); ?>
</figure>
<?php if ( $query->current_post === 0) : ?>
<div class="post_excerpt">
<?php the_excerpt(); ?>
</div>
<?php ;endif; ?>
<div class="entry">
<div class="entry-title">
<?php the_title(); ?>
</div>
</div>
</article>
<?php if ( $query->current_post === 0 || $query->current_post === 3 || $query->current_post === 4 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>
</div>
<?php ;endif; ?>
<?php if ( $query->current_post === 3 || $query->current_post === 5 || $query->current_post === $post_count-1 ) : ?>
</div>
<?php ;endif; ?>
<?php endwhile; wp_reset_postdata(); ?>
</div>