CODEWITHSUNDEEP
phpwordpressshortcodemarkupgenesis
Scott Agirs
Scott Agirs

Reputation: 679

Second shortcode generated div inside the first shortcode div

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):

https://ibb.co/jB352w

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');

Upvotes: 1

Views: 223

Answers (1)

Shahbaz Ahmed
Shahbaz Ahmed

Reputation: 350

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.

Upvotes: 0

Related Questions