How to use Two Loops to Output Your First Blog Post Differently

WordPress loop being able to edit the WordPress Loop gives you lots of control over the design and content of your WordPress site are different layout.

First blog post layout full-width image and content and second right sidebar four blog post column four layout in offset using in WordPress.

add_shortcode( 'blog_post_first', 'rmcc_post_listing_shortcode5' );
function rmcc_post_listing_shortcode5( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 1,
'order' => 'DESC',
) );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="col-sm-12 left_larg_box left_larg_blog">
<div class="small-12 medium-4 large-4 columns">
<div class="blog-img">
<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) : ?></a>
<a href="<?php the_permalink(); ?>" alt="">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</div>
<div class="author_date_box">
<h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<p><span class="date_blog"><?php the_date();?></span></p>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}
add_shortcode( 'blog_post_second', 'rmcc_post_listing_shortcode6' );
function rmcc_post_listing_shortcode6( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 4,
'order' => 'DESC',
'offset' => 1,
) ); ?>
<div class="col-sm-12">
<div class="thim-course-grid custom_row_grid">
<?php
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="lpr_course grid_b course-grid-6"><a href="<?php the_permalink(); ?>">
<div class="thumbpost-text">
<h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<div class="blog-img">
<a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail()) : ?></a>
<a href="<?php the_permalink(); ?>" alt="">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</div>
</div>
</a>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}