Wordpress the_content() not showing after the portfolio section - php

Question

I created a custom template for the homepage. I want to call the content after the portfolio, but it doesn't work. I can't find where I made a mistake. It works when I call above the portfolio. Anyone know how I could accomplish this?
<section id="portfolio" class="portfolio atop">
<!-- Portfolio Filter -->
<div class="portfolio_filter">
<ul>
<?php $categories = get_categories("taxonomy=categories");
foreach ($categories as $category) : echo '<li><a data-filter=".' . $category->slug . '" href="#">' . $category->name . '</a></li>';
endforeach; ?>
<li><a class="select-cat" data-filter="*" href="#">All Works</a></li>
</ul>
</div>
<div class="container">
<div class="row masonry clearfix">
<!-- a work -->
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => 100,
);
$wp_query = new WP_Query($args);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php $portcolor = get_field('text_color_of_featured_image'); ?>
<?php $taxonomy = 'categories';
$terms = get_the_terms($post->ID, 'categories'); ?>
<?php foreach ($terms as $term) ?>
<a href="<?php echo esc_html(get_permalink()); ?>" class="col-xl-4 col-md-6 grid-item <?php echo esc_html($term->slug); ?> <?php echo esc_attr($portcolor); ?>" data-type="ajax-load">
<figure class="portfolio-item <?php $portfolio_type = get_field('portfolio_type');
echo esc_attr($portfolio_type); ?>">
<div class="image">
<?php $featured_image = get_field('portfolio_featured_image'); ?>
<img src="<?php echo esc_url($featured_image['url']); ?>" alt="<?php echo esc_attr($featured_image['alt']); ?>" />
</div>
<figcaption>
<span><?php echo esc_html($term->name); ?></span>
<h3 class="title"><?php the_title(); ?></h3>
</figcaption>
</figure>
</a>
<?php endwhile; ?>
</div>
</div> <!-- container end -->
</section>
<?php the_content(); ?>

Answer 1

You need to reset the global post after your custom WP_Query with wp_reset_postdata(). See below:
<section id="portfolio" class="portfolio atop">
<!-- Portfolio Filter -->
<div class="portfolio_filter">
<ul>
<?php $categories = get_categories("taxonomy=categories");
foreach ($categories as $category) : echo '<li><a data-filter=".' . $category->slug . '" href="#">' . $category->name . '</a></li>';
endforeach; ?>
<li><a class="select-cat" data-filter="*" href="#">All Works</a></li>
</ul>
</div>
<div class="container">
<div class="row masonry clearfix">
<!-- a work -->
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => 100,
);
$wp_query = new WP_Query($args);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php $portcolor = get_field('text_color_of_featured_image'); ?>
<?php $taxonomy = 'categories';
$terms = get_the_terms($post->ID, 'categories'); ?>
<?php foreach ($terms as $term) ?>
<a href="<?php echo esc_html(get_permalink()); ?>" class="col-xl-4 col-md-6 grid-item <?php echo esc_html($term->slug); ?> <?php echo esc_attr($portcolor); ?>" data-type="ajax-load">
<figure class="portfolio-item <?php $portfolio_type = get_field('portfolio_type');
echo esc_attr($portfolio_type); ?>">
<div class="image">
<?php $featured_image = get_field('portfolio_featured_image'); ?>
<img src="<?php echo esc_url($featured_image['url']); ?>" alt="<?php echo esc_attr($featured_image['alt']); ?>" />
</div>
<figcaption>
<span><?php echo esc_html($term->name); ?></span>
<h3 class="title"><?php the_title(); ?></h3>
</figcaption>
</figure>
</a>
<?php endwhile;
// reset global post data
wp_reset_postdata();?>
</div>
</div> <!-- container end -->
</section>
<?php the_content(); ?>