I am trying to add multiple shortcode generate blog post loops to one page
Problem: when i add two shortcodes including blog post loop to one page, the shortcode plants itself inside the first shortcodes outer div, this happens to some of my php code as well, perhaps you can save the day, by spotting the error?
Here you will see, that the second row (this is where the second loop from shortcode starts, the row is wider, which essentially is the problem):
If I were to add another loop with same build of shortcode, it would be wider than the second and so on..
The html output, here you can see that the second loops has implanted itself into first loops "row". https://ibb.co/h7pOpb
My shortcode.php:
<?php
$city = the_terms( $post->ID , "'.$city.'");
/*** HOME ***/
function blog_loop_mtl( $atts ) {
extract( shortcode_atts( array(
'type' => 'post',
'perpage' => 20,
'city' => 'Montreal'
), $atts ) );
echo '<div class="clear"></div>';// Outter Container open
$args = array(
'post_type' => $type,
'posts_per_page' => $perpage,
'city' => $city
);
$splendid_query = new WP_Query( $args );
echo '<div class="row">';// Row Open
while ( $splendid_query->have_posts() ) : $splendid_query->the_post();
$category = get_the_category();
echo '<div class="col-xs-6 col-sm-4 grid-entry-wrapper"> <!-- grid-entry-wrapper open -->
<div class="post_grid_entry">
<div id="grid_entry_meta">
<div class="boujee">
<a href="' . get_category_link($cats[0]->cat_ID) . '" style="color: white">' . $category[0]->cat_name . '</a>
</div>
<div>
' . $city . ' <i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
</div>
<a href="' . get_permalink() . '">
<div class="grid_thumbnail" >
<div class="grid_thumbnail" style="background-image: url('.get_the_post_thumbnail_url().')" alt="">
</div>
</a>
<a href="'.get_author_posts_url( get_current_user_id()). '">'. get_avatar(get_the_author_meta( 'id' )) . '</a>
</div>
<div>
<a href="' . get_permalink() . '"></a>
<h3 class="post_grid_title">
<a href="' . get_permalink() . '">'. get_the_title(). '</a>
</h3>
</div>
<div id="grid_entry_meta_publ">
<div>
Published ' . time_elapsed_string(get_the_date()). '
</div>
<div>
by <a href="'.get_author_posts_url(get_the_author_meta( 'id' )). '">'. get_the_author_meta( 'display_name' ) . '</a>
</div>
</div>
</div><!-- grid-entry-wrapper close -->
</div>'; // Row Close
endwhile;
wp_reset_query();
}
add_shortcode('blog_loop_mtl', 'blog_loop_mtl');
Shortcode only works when you return the output.
<?php
$city = the_terms( $post->ID , "'.$city.'");
/*** HOME ***/
function blog_loop_mtl( $atts ) {
extract( shortcode_atts( array(
'type' => 'post',
'perpage' => 20,
'city' => 'Montreal'
), $atts ) );
echo '<div class="clear"></div>';// Outter Container open
$args = array(
'post_type' => $type,
'posts_per_page' => $perpage,
'city' => $city
);
$splendid_query = new WP_Query( $args );
$output = '<div class="row">';// Row Open
while ( $splendid_query->have_posts() ) : $splendid_query->the_post();
$category = get_the_category();
$output .= '<div class="col-xs-6 col-sm-4 grid-entry-wrapper"> <!-- grid-entry-wrapper open -->
<div class="post_grid_entry">
<div id="grid_entry_meta">
<div class="boujee">
<a href="' . get_category_link($cats[0]->cat_ID) . '" style="color: white">' . $category[0]->cat_name . '</a>
</div>
<div>
' . $city . ' <i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
</div>
<a href="' . get_permalink() . '">
<div class="grid_thumbnail" >
<div class="grid_thumbnail" style="background-image: url('.get_the_post_thumbnail_url().')" alt=""></div>
</div>
</a>
<a href="'.get_author_posts_url( get_current_user_id()). '">'. get_avatar(get_the_author_meta( 'id' )) . '</a>
</div>
<div>
<a href="' . get_permalink() . '"></a>
<h3 class="post_grid_title">
<a href="' . get_permalink() . '">'. get_the_title(). '</a>
</h3>
</div>
<div id="grid_entry_meta_publ">
<div>
Published ' . time_elapsed_string(get_the_date()). '
</div>
<div>
by <a href="'.get_author_posts_url(get_the_author_meta( 'id' )). '">'. get_the_author_meta( 'display_name' ) . '</a>
</div>
</div>
</div><!-- grid-entry-wrapper close -->';
endwhile;
wp_reset_query();
$output .= '</div>'; // Row Close
return $output;
}
add_shortcode('blog_loop_mtl', 'blog_loop_mtl');
The second wrong thing in the code you were doing is "Row div close" within while loop while you started row div outside while loop.