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"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></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');