Shortcode is displaying the content on top of the page

My custom made shortcode is displaying the content on the most top of the page, even tho I include the shortcode after the header. Why is this happening? Weirdly enough, the content that is inside the $out variable is being displayed normally under the header, but all the other content is on top of the page or hiding under the header.

// Shortcode for Use Cases caption

add_shortcode(‘Use_Case’, ‘use_case_shortcode_query’);
function use_case_shortcode_query($atts, $content){
global $use_case_categories;
extract(shortcode_atts(array( // a few default values
‘posts_per_page’ => ’11’,
‘post_type’ => ‘use_cases’,
)
, $atts));

global $post;

$posts = new WP_Query(array( // a few default values
‘posts_per_page’ => ’11’,
‘post_type’ => ‘use_cases’
));
$output = ”;
$out = ”; ?>

<div class=”tab-pane active” id=”all”>
<?php
$args = array(
‘post_type’ => ‘use_cases’,
‘posts_per_page’ -1,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’
);
$all_films = new WP_Query( $args );
?>

<?php if ( $all_films->have_posts() ) : // make sure we have films to show before doing anything?>
<div class=”table-responsive”>
<table class=”table”>
<?php while ( $all_films->have_posts() ) : $all_films->the_post(); ?>
<tr>
<td><?php the_post_thumbnail() ?></td>
<td><h3><?php the_title() ?></h3</td>
<td>
<p class=”lead”><?php the_excerpt() ?></p>
<a href=”<?php the_permalink() ?>” class=”btn btn-primary”>Read more</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
</div>
<?php endif; ?>

</div><!– all films tab pane –>

<?php foreach($use_case_categories as $use_case_category) { ?>
<div class=”tab-pane” id=”<?php echo $use_case_category->slug ?>”>
<?php
$args = array(
‘post_type’ => ‘use_cases’,
‘posts_per_page’ -1,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘use_cases’,
‘field’ => ‘slug’,
‘terms’ => $use_case_category->slug
)
)
);
$films = new WP_Query( $args );
?>

<?php if ( $films->have_posts() ) : // make sure we have films to show before doing anything?>
<table class=”table”>
<?php while ( $films->have_posts() ) : $films->the_post(); ?>
<tr>

<td><h3><?php the_title() ?></h3</td>
<td>
<p class=”lead”><?php the_excerpt() ?></p>
<a href=”<?php the_permalink() ?>” class=”btn btn-primary”>Read more</a>
</td>
</tr>
<?php endwhile; ?>
<?php wp_reset_query() ?>
</table>
<?php endif; ?>

</div>
<?php } ?>

<?php
if ($posts->have_posts()):
?>
<!– BS tabs –>

<ul class=”nav nav-tabs nav-justified”>
<li class=”active”>
<a data-toggle=”tab” href=”#all”>All</a>
</li>
<?php foreach($use_case_categories as $use_case_category) { ?>
<li>
<a href=”#<?php return $use_case_category->slug ?>” data-toggle=”tab”><?php return $use_case_category->name ?></a>
</li>
<?php } ?>
</ul>
<?php
while ($posts->have_posts()):
//echo var_dump($posts->the_post());
$posts->the_post();
/*$out .= ‘<div class=”use_case_boxes”>
<h4>Name: <a href=”‘.get_permalink().'” title=”‘ . get_the_title() . ‘”>’.get_the_title() .'</a></h4>
<p class=”Film_desc”>’.get_the_content().'</p>’;
// add here more…*/

$out .= ‘<a href=’.get_post_meta($post->ID, “location”, true).’><div class=”vce-row vce-element–has-background vce-row–col-gap-30 use_case_finance vce-row-equal-height vce-row-columns–top vce-row-content–top” id=”el-6cc8dbe6″ data-vce-do-apply=”all el-6cc8dbe6″><div class=”vce-content-background-container”></div><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-f4a5f49c” data-vce-do-apply=”background el-f4a5f49c”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-f4a5f49c”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-356c02e5″ data-vce-do-apply=”all el-356c02e5″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-4c08b71e” data-vce-do-apply=”background el-4c08b71e”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-4c08b71e”><div class=”vce-row-container”><div class=”vce-row vce-row–col-gap-30 vce-row-columns–top vce-row-content–top” id=”el-86253324″ data-vce-do-apply=”all el-86253324″><div class=”vce-row-content” data-vce-element-content=”true”><div class=”vce-col vce-col–md-100p vce-col–xs-1 vce-col–xs-last vce-col–xs-first vce-col–sm-last vce-col–sm-first vce-col–md-last vce-col–lg-last vce-col–xl-last vce-col–md-first vce-col–lg-first vce-col–xl-first” id=”el-a1c3851f” data-vce-do-apply=”background el-a1c3851f”><div class=”vce-col-inner” data-vce-element-content=”true” data-vce-do-apply=”padding margin border el-a1c3851f”><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-b-72-72-72–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-5c7b806f” data-vce-do-apply=”border background padding margin el-5c7b806f”><h2 class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 400;”=””>’.get_the_title().'</h2></div></div></div><div class=”vce-single-image-container vce-single-image–align-center”><div class=”vce vce-single-image-wrapper” id=”el-9632dafd” data-vce-do-apply=”all el-9632dafd”><figure><div class=”vce-single-image-inner”><img class=”vce-single-image” src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” data-img-src=”http://ai.crafts-world.com/wp-content/uploads/2018/02/Second-home-page-design-Recovered_03.png” alt=”” title=”Second-home-page-design-Recovered_03″></div></figure></div></div><div class=”vce-google-fonts-heading vce-google-fonts-heading–align-center vce-google-fonts-heading–color-empty–45–5C00FF–FF7200″><div class=”vce-google-fonts-heading-wrapper”><div class=”vce-google-fonts-heading–background vce” id=”el-8f301bd3″ data-vce-do-apply=”border background padding margin el-8f301bd3″><div class=”vce-google-fonts-heading-inner” style=”font-family: ” open=”” sans”;=”” font-weight:=”” 300;”=””>’.get_the_content().'</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></a></a>’;

$out .='</div>’;
endwhile;
else:
return; // no posts found
endif;
wp_reset_query();
return html_entity_decode($out);
}

Read more here:: Shortcode is displaying the content on top of the page

Leave a Reply

Your email address will not be published. Required fields are marked *