title: Wordpress convert php and html template to shortcode
body: <p>I want to make a shortcode out of this php code that displays recent blog posts with css grid. I'm displaying the image and other meta-data about each blog.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;?php $q = new WP_Query( 'posts_per_page=3' ); ?&gt;
  
      &lt;div class="recent-blogs"&gt;
        &lt;?php while ( $q-&gt;have_posts() ) : $q-&gt;the_post(); ?&gt;
  
          &lt;div class="blog-item"&gt;
            &lt;h3 class="title"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
  
            &lt;?php $url = wp_get_attachment_url( get_post_thumbnail_id($post-&gt;ID), 'thumbnail' ); ?&gt;    
            &lt;img class="image" src="&lt;?php echo $url ?&gt;" /&gt;
  
            &lt;div class="avatar"&gt;&lt;?php echo get_avatar( get_the_author_meta('ID'), 40); ?&gt;&lt;/div&gt;
            &lt;div class="author"&gt;&lt;?php the_author_posts_link(); ?&gt;&lt;/div&gt;
            &lt;div class="time"&gt;&lt;?php the_time('m.d.y'); ?&gt;&lt;/div&gt;
            &lt;div class="category"&gt;&lt;?php the_category(); ?&gt;&lt;/div&gt;
            &lt;div class="comments"&gt;&lt;?php comments_number(); ?&gt;&lt;/div&gt;
            &lt;?php the_excerpt(); ?&gt;
          &lt;/div&gt;
  
        &lt;?php endwhile; ?&gt;
        &lt;?php wp_reset_postdata(); ?&gt;
  
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically the template is now being displayed in page.php after all the content and i want to have more control with my page builder so i can place it where i want.
  My php skills are bad and i tried concatenating the html into a single string but i always screw up because of the loop and all these php variables. Also tried using ob_start(), ob_get_clean() and ob_get_contents() but for some reason i end up with an infinite loop.</p>
  
  <pre><code>function recent_blogs_grid() {}
  add_shortcode('recent_blogs_grid', 'recent_blogs_grid');
  </code></pre>