• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Digimanx

Blog for learning by doing

  • Resources
    • Start A Blog
    • DIY PC Build
    • Hackintosh
    • Make money online
  • Computers
    • Mac OS
    • Windows
    • Software
    • Internet stuff
  • Hobies
    • Guitar
    • Home Recording
  • Blog & Lifestyle
    • WordPress
    • Genesis Themes
    • Affiliate Marketing
    • Monetize your blog
    • Best blogging tips!
  • About

Hermansyah Filani / April 17, 2019

Create WP Custom Recent Post With Image Zoom + Shortcode

Recent Post 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 🙂

RELATED CONTENT

Filed Under: Blogging, WordPress Tagged With: code, Coding, CSS Code, Wordpress

Hermansyah Filani

Twitter | Instagram
An independent blogger who love drawings and paintings. Writing blog for sharing and learning. Learn more

From Amazon Associates

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Stay Connect

Recent posts

  • fix no display - Hackintosh

    Fix no display after Install NVIDIA Driver on Hackintosh


  • Ventura

    Read this before upgrading your Hackintosh to macOS Ventura


  • usb wifi adapter

    Easy Solution for Wifi not working on macOS


  • Monterey USB Installer

    How to Make macOS Monterey USB Installer on Windows PC Easily!


  • UEFI BIOS

    Setting UEFI BIOS on “old” Motherboard for Hackintosh


  • I need to:

    • Start a blog
    • Build a PC
    • Make a Hackintosh
    • Learn Home Recording
    • Learn basic web coding

    Subscribe

    Newsletter

    Get Newsletters via Email for free.

    Get new posts by email:
    Powered by follow.it

    Footer

    Pages

    • Blog
    • About
    • Contact
    • Guest Blogging
    • Affiliate Disclaimer

    Affiliates Disclosure

    ‘Some of posts on this site is contain affiliate links. Which mean, if you purchase products or services that we recommended, we will receive affiliate commission. It will not charge you for any additional fees. Learn more

    Follow us:

    © Copyright 2020 Digimanx.com. All Rights Reserved.

    Disclaimer . Privacy policy . Term and conditions . Sitemap

     

    Loading Comments...
     

      pixel