How To Create Shortcode To Show Recent Posts In WordPress

How To Create Shortcode To Show Recent Posts In WordPress

Do you find yourself how to create simple shortcode in wordpress ? In this tutorial we’ll create shortcode to show recent posts in wordpress.

Step 1: Copy and paste this code in your theme’s function.php

function recent_post( $atts ) {
    $atts = shortcode_atts( array(
        'number_posts' => 9,
        'post_type' => 'post',
    ), $atts, 'recent_post' );
 
    $recent_post = new WP_Query(array('post_type' => $atts['post_type'], 'posts_per_page' => $atts['number_posts']));
 
    ob_start();
    if ( $recent_post->have_posts() ) {
    $post_in_slide = 0;
    ?>
        <div class="recent-wrap">
            <?php while ( $recent_post->have_posts() ) : $recent_post->the_post(); ?>
                <div class="post-item">
                    <?php 
                        if ( has_post_thumbnail() ) {
                            the_post_thumbnail('recent-size', array('alt' =>get_the_title()));
                         ?>
                        <?php }
                        else{?>
                            <img src="http://placehold.it/150x150">
                        <?php }
                    ?>
                    <div class="post-detail">
                        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                        <p class="info-post"><span style=""><?php the_time('j / M / Y'); ?> -</span> <span class="author" style=""><?php the_author(); ?></span></p>
                        <p class="desc"><?php echo cs_excerpt(30); ?></p>
 
                    </div>
                </div>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    <?php } else { ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php } 
    $output = ob_get_contents();
    ob_end_clean();
 
    return $output;
}
add_shortcode( 'recent_post', 'recent_post' );
function cs_excerpt($limit) {
  $excerpt = explode(' ', get_the_excerpt(), $limit);
  if (count($excerpt)>=$limit) {
    array_pop($excerpt);
    $excerpt = implode(" ",$excerpt).'...';
  } else {
    $excerpt = implode(" ",$excerpt);
  } 
  $excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt) .'<span class="dot-ex">[...]<span>';
  return $excerpt;
}

Step 2: Copy and paste this in your theme’s styles.css

.post-item img{
	float: left;
	margin-right: 20px;
}
.post-detail{
	overflow: hidden;
}
.post-item{
	clear: both;
    padding: 20px 0;
    overflow: hidden;
    border-bottom: 1px solid whiteSmoke;
}
.recent-wrap .post-item h2 {
    font-weight: normal;
    font-size: 20px;
    margin: 0 0 5px 0;
}
.recent-wrap p.info-post{
	margin-bottom: 5px;
}
.tpcrn-read-more {
    background: #06afe4 none repeat scroll 0 0;
    color: white;
    display: inline-block;
    line-height: 1;
    padding: 8px 12px;
}

Result like this:

Capture

I hope this article helped you create shortcode to show recent posts in wordpress.

Comments

comments

Share