4.5 159

Recent Post WordPress without Plugin

Posted by zerochan on October 31, 2018

Loading the translation ...

After I shared the tutorial widget recent post for blogger this time I will share a widget recent post for wordpress without plugins using the wordpress wp_query code.

A Recent Post without a plugin for WordPress is a widget that is useful for display the latest articles from a blog or the latest articles based on specific labels, categories or taxomy.

Making Recent posts wordpress without plugins is very easy unlike a recent post blogger who has to use javascript to retrieve blog feeds. and also recent post wordpress has complete features and is easy to modify. starting from arranging orderby, specific label, category, taxonomy and custom post type. get a recent post wordpress.

How to Display Recent Post WordPress Without Plugin in WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Select index.php (if you want display recent post for wordpress in homepage only) and Select single.php (if you want display recent post for wordpress in post only).
4. Put the code below in the place you want.

<div class="recent-widget">
<div class="recent-wrap">
<?php
$recent = new WP_Query(
array(
/* Type Post (default is 'post') */
'post_type' => 'post',
/* The number of posts that will appear. */
'posts_per_page' => '4',
/* Enter the name of the category you want. (Optional) (e.g 'haikyuu') */
'category_name' => '',
/* Order post */
'orderby' => 'date',
)
);
if($recent->have_posts()) :
while ($recent->have_posts()):$recent->the_post();
/* You Can Default Post Content, or you can change. */
/* get_template_part('content'); */
?>
<article id="post-<?php the_ID(); ?>" class="recent-post">
<div class="recent-inner">
<div class="recent-thumb">
<a class="thumb-link" href="<?php the_permalink(); ?>">
<?php
/* Default Thumbnail without No-img */
if (has_post_thumbnail()){
/* https://bit.ly/2CLBb5V */
$imgdata = wp_get_attachment_image_src( get_post_thumbnail_id(), array(9999, 9999)); /* Width x Height */
$imgurl = $imgdata[0];
$imgwidth = $imgdata[1];
$imgheight = $imgdata[2];

echo '<img src='.$imgurl.' width="'.$imgwidth.'" height="'.$imgheight.'" alt="'.get_the_title().'" title="'.get_the_title().'"/>';
}
?>
</a>
</div>
<div class="recent-content">
<h2 class="recent-title" itemprop="headline">
<?php the_title( sprintf( '<a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a>' ); ?>
</h2>
<div class="recent-date"><?php the_time('d M, Y'); ?></div>
</div>
<div class='clear'></div>
</div>
</article>
<?php
endwhile;
else :
/* This Condition When Blog not Have Post / Query Error. */
echo "<div class='content-error'><p>No posts available</p></div>";
endif;
/* Reset Query Post */
wp_reset_query();
?>
</div>
</div>

5. Click Update File

And now your recent posts wordpress will display at the place you want. but this is still the initial stage. You need to make style for recent posts again. follow the steps below to style the recent posts.

Function Parameter Recent Post WordPress

Parameter Explanation
'post_type' Specify the post type that will appear in the recent post. default is a ‘post’, you can replace ‘post’ with your custom post type, if you want multiple / more than one post type, replace ‘post’ with this array( 'post', 'anime' ) (‘anime’ is example custom post type)
'category_name' Enter the slug name of the category that you want to appear.
'posts_per_page' Determine the number of posts that will appear in the recent post.
'orderby'
  • rand if you want display post by random
  • title if you want display post by title
  • date if you want display post by date
  • modified if you want display post by modified

Style / Design Recent Post WordPress

Select one of the styles below. then paste it into style.css on your wordpress theme.
1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Add the css below right in the last line(style.css)

See Also Free Themes Worpdress Responsive
FaizMagz WordPress Themes and MegumiNovel WordPress Themes

Recent Post WordPress List Simple

recent post wordpress without plugin

Resize Thumbnail Find, and Replace array(9999, 9999) with this array(75, 75)

/* Recent Post List Simple */
.recent-widget{margin:10px 0;font-family:'Roboto','Open Sans','Segoe UI', sans-serif;}
.recent-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.recent-post{width:50%;padding:0 5px 15px;float:left}
.recent-thumb{float:left;margin-right:15px;width:75px;height:75px;overflow:hidden}
.recent-title{margin:10px 0 6px;font-size:15px;line-height:1.4}
.recent-title a{color:#373D3F}
.recent-title:hover a{color:#1395BA}
.recent-date{font-size:13px;color:#A7B0B2;}

Recent Post WordPress Grid Title Out Thumbnail

recent post wordpress without plugin

/* Recent Post Grid Out Thumbnail */
.recent-widget{margin:10px 0;font-family:'Roboto','Open Sans','Segoe UI', sans-serif}
.recent-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.recent-post{width:25%;padding:0 5px;float:left}
.recent-post:hover img{transform:scale(1.05);opacity:.9}
.recent-post:hover a{color:#1395BA}
.recent-thumb{position:relative;overflow:hidden}
.recent-thumb img{max-width:100%;object-fit:cover;transition:all .3s linear}
.recent-title{margin:10px 0 6px;font-size:16px;line-height:1.4}
.recent-title a{color:#373D3F}
.recent-date{font-size:13px;color:#A7B0B2}

Recent Post WordPress Grid Title In Thumbnail

recent post wordpress without plugin

/* Recent Post Grid In Thumbnail */
.recent-widget{margin:10px 0;font-family:'Roboto','Open Sans','Segoe UI', sans-serif}
.recent-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.recent-post{width:25%;padding:0 5px;float:left}
.recent-post:hover img{transform:scale(1.05);opacity:.9}
.recent-post:hover a{opacity:.8}
.recent-inner{position:relative;height:100%;}
.recent-inner:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:55px;background:rgb(0,0,0);background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 51%,rgba(0,0,0,0.65) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 51%,rgba(0,0,0,0.65) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 51%,rgba(0,0,0,0.9) 100%)}
.recent-thumb{position:relative;overflow:hidden}
.recent-thumb img{max-width:100%;object-fit:cover;transition:all .3s linear;height:100%;}
.recent-content{position:absolute;bottom:0;width:100%;padding:15px;z-index:5}
.recent-title{margin:0;font-size:14px;line-height:1.4;text-shadow:0 0 5px rgba(0, 0, 0, .8);letter-spacing:.1px}
.recent-title a{color:#FFF}
.recent-date{font-size:13px;color:#EEE;display:none;}

Related Post

Comments

Waiting Load Disqus Comments ...