Wordpress convert php and html template to shortcode - php

Question

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.
<div class="wrapper">
<?php $q = new WP_Query( 'posts_per_page=3' ); ?>
<div class="recent-blogs">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class="blog-item">
<h3 class="title"><?php the_title(); ?></h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<img class="image" src="<?php echo $url ?>" />
<div class="avatar"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
<div class="author"><?php the_author_posts_link(); ?></div>
<div class="time"><?php the_time('m.d.y'); ?></div>
<div class="category"><?php the_category(); ?></div>
<div class="comments"><?php comments_number(); ?></div>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
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.
function recent_blogs_grid() {}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');

Answer 1

I solved it in the end and i didn't have to do this the hard and stupid way like its done with the first code here bellow.
function recent_blogs_grid() {
$q = new WP_Query( 'posts_per_page=3' );
echo '<div class="recent-blogs-wrapper">';
echo '<div class="recent-blogs-gallery">';
while ( $q->have_posts() ) : $q->the_post();
echo '<div class="recent-blogs-item">';
echo '<h3 class="blog-title-meta"><a href="';
echo the_permalink();
echo '">';
echo the_title();
echo '</a></h3>';
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
echo '<a href="';
echo the_permalink();
echo '"><img class="blog-image-meta" src="';
echo $url;
echo '" /></a>';
echo '<div class="blog-metadata-wrapper">';
echo '<div class="blog-avatar-meta">';
echo get_avatar( get_the_author_meta('ID'), 40);
echo '</div>';
echo '<span class="blog-author-meta">';
echo the_author_posts_link();
echo '</span>';
echo '<span class="blog-datetime-meta"><i class="fa fa-clock-o"></i>';
echo the_time('m.d.y');
echo '</span>';
echo '<span class="blog-category-meta"><i class="fa fa-tags"></i>';
echo the_category();
echo '</span>';
echo '<span class="blog-comments-meta"><i class="fa fa-commenting"></i>';
echo comments_number();
echo '</span>';
echo '</div>';
echo the_excerpt();
echo '<a class="blog-read-more" href="';
echo the_permalink();
echo '">Read More</a>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
wp_reset_query();
}
I just pasted the original code in another file and imported it inside my function where i am creating the shortcode. Since i can't edit the original question i asked, this is the original html stuff in its own file "recent-blogs-grid-shortcode.php".
<div class="recent-blogs-wrapper">
<?php $q = new WP_Query( 'posts_per_page=3' ); ?>
<div class="recent-blogs-gallery">
<?php while ( $q->have_posts() ) : $q->the_post(); ?>
<div class="recent-blogs-item">
<h3 class="blog-title-meta">
<?php the_title(); ?>
</h3>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<a href="<?php the_permalink(); ?>">
<img class="blog-image-meta" src="<?php echo $url ?>" />
</a>
<div class="blog-metadata-wrapper">
<div class="blog-avatar-meta"><?php echo get_avatar( get_the_author_meta('ID'), 40); ?></div>
<span class="blog-author-meta"><?php the_author_posts_link(); ?></span>
<span class="blog-datetime-meta"><i class="fa fa-clock-o"></i><?php the_time('m.d.y'); ?></span>
<span class="blog-category-meta"><i class="fa fa-tags"></i><?php the_category(); ?></span>
<span class="blog-comments-meta"><i class="fa fa-commenting"></i><?php comments_number(); ?></span>
</div>
<?php the_excerpt(); ?>
<a class="blog-read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
And i just used require pretty much to import it inside my function
function recent_blogs_grid() {
require_once('recent-blogs-grid-shortcode.php');
}
add_shortcode('recent_blogs_grid', 'recent_blogs_grid');