How to add a widget after post content - wordpress

Question

Right now in my theme for my home page I have a row of 1 post, a row of 3 posts, 3 posts, and then back to a row of 1 post. After this loop I would like to add a new widget. I want to have a few different widgets like popular videos, popular posts, etc. Does anyone have any idea how I can do this?
Here is an example of what I want it to look like. I want a new widget for every 14 posts.
Here is are some examples of the different widgets I want to add (source - http://www.whowhatwear.com) -
Here is my front-page.php
<?php
/*
* Template Name: learningwordpress
*/
get_header();
get_template_part ('inc/carousel');
$i = 0;
$args = array(
'posts_per_page' => 14,
'paged' => 1
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
if( $i %2 == 1 ) {
$the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php
}
else {
$the_query->the_post(); ?>
<article class="post col-md-12">
<?php the_post_thumbnail('large-thumbnail'); ?>
<h2><?php the_title(); ?></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php
}
?>
<?php
$i++;
}
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();

Answer 1

Add following code in your theme functions.php file to create widget
register_sidebar( array(
'name' => 'After content',
'id' => 'after-content',
'description' => '',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
Add following code where you want to display widget area
if ( is_active_sidebar( 'after-content' ) ) :
dynamic_sidebar( 'after-content' );
endif;