Create WP Custom Recent Post With Image Zoom + Shortcode

Here’s how to create WordPress your own Recent Posts with image zoom plus the shortcode so you can place it anywhere you want.

The idea is to make it simple by only add the posts title and the feature image. But beautify the look with some animation and zoomed feature image.

For the demo, you can see it on Digimanx sidebar. If you like it then this is how to create your own recent posts widget without plugins.

Creating the shortcode for custom recent post

First, you need to create the shortcode for the custom recent posts. By putting this PHP code to your theme function.php in WP Theme Editor.

//* My Recent Posts
function recent_posts_shortcode($atts){
 $q = new WP_Query(
   array( 'orderby' => 'date', 'posts_per_page' => '4' )
 );

$list = '<div id="my-rec-posts">';

while($q->have_posts()) : $q->the_post();

 $list .= '<a href="' . get_permalink() . '">' . '<li class="my-rec-posts">' .  genesis_get_image() . '<span class="my-card"><h4>' . get_the_title() . '</h4></a>' . '<br />' . '</span></li>';

endwhile;

wp_reset_query();

return $list . '</div>';

}

add_shortcode('my-rec-posts', 'recent_posts_shortcode');

Click the Update File button to make a change. By adding this, now you have a new shortcode that you can place it anywhere with the Text widget.

The new shortcode is this: [my-rec-posts]

But it will look not good because it just pulled the content from the latest blog by date just the way it is.

So the trick is in the CSS.

Beautify the look of the Recent Post with CSS

This is where the magic happened by using CSS to make the feature image zoomed on hover. And animate the post title in the recent posts.

Copy and paste the CSS code below to WP built-in-CSS Editor.

/* My Recent Posts----------------------------------------------*/

.my-rec-posts  {
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 30px 0 0 0;
  float: left;
  height: 100px;
  width: 100%;
  border: 1px solid #eee;
;
}

.my-rec-posts img {
  width: 40%;
;
  -moz-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
  top: 0;
  height: 100px;
  overflow: hidden;
}

.my-rec-posts img:hover  {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -moz-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

.my-card H4 {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 6px 2px 0 8px;
  text-align: left;
  color: #333;
  display: block;
  background: #fff;
  position: relative;
  bottom: 110px;
  height: 140px;
  width: 60%;
  left: 40%;
  -webkit-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

.my-card H4:hover {
  bottom: 112px;
  color: #232323;
  background: #f4f4f4;
  -webkit-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

 

Now your custom WordPress recent post looks pretty good. But not in the mobile device.

So you will also need to add this CSS to fix the viewport issue on the smaller screen.

@media only screen and (max-width: 768px) {
.my-rec-posts,
.my-rec-posts img {
  height: 160px;
}
.my-card H4 {
  height: 380px;
  bottom: 170px;
  font-size: 1.8rem;
}
.my-card H4:hover {
  bottom: 172px;	
}
}

@media only screen and (max-width: 414px) {
.my-rec-posts,
.my-rec-posts img {
  height: 80px;
}
.my-card H4 {
  height: 100px;
  bottom: 90px;
  font-size: 1.4rem;
}
.my-card H4:hover {
  bottom: 92px;	
  }
}

 

And done!

Congratulation! You just made your own recent posts widget without using any plugins.

If you feel this post useful please share the love by share this post with the other blogger who also using WordPress.

Thanks 🙂