<div class="related-post"> <div class="container"> <h2 id="recent">Related Articles</h2> <div class="row"> <?php $current_post_type = get_post_type($post); // The query arguments $args = array( 'posts_per_page' => 3, 'order' => 'rand', 'orderby' => 'ID', 'post_type' => 'post', 'post_status' => 'publish', 'numberposts' => -1, 'post__not_in' => array($post->ID) ); // Create the related query $rel_query = new WP_Query($args); // Check if there is any related posts if ($rel_query->have_posts()): ?> <?php // The Loop while ($rel_query->have_posts()): $rel_query->the_post(); $post_tags = get_the_tags(); ?> <div class="col-md-4 col-sm-6 col-12 related-col"> <?php the_post_thumbnail(); ?> <div class="taxonomy-post_tag wp-block-post-terms"> <?php if ($post_tags) { if (count($post_tags) > 0) { foreach ($post_tags as $key => $val) { ?> <a href="<?php echo get_permalink(); ?>"> <?php echo $val->name; ?> </a> <?php } } } ?> </div> <div class="wp-block-post-date"> <time> <?php echo get_the_date() ?> </time></div> <a href="<?php the_permalink() ?>"> <h3 class="entry-title"> <?php the_title() ?> </h3> </a> </div> <?php endwhile; ?> <?php endif; // Reset the query wp_reset_query(); ?> </div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter