Display Recent Posts From A Specific Category

This post is for advance users who want to display recent posts from a specific category. We have this article specially for you. Devtoolsplus users will most likely not use this. This tutorial is mostly used in creating magazine style themes. Please see the blow demo project image before applying into your theme.

How to Display Recent Posts From A Specific Category In WordPress

Here I have created a four column widgets of specific category. Please follow the below steps to display recent posts from a specific category in WordPress.

Recent posts from a specific category snippets:

Add the below WordPress snippets where you want to display this specific category post.

<div id="four-coloumn">
<section class="small-image">
<div class="coloumn1">
<h4><a href="<?php echo get_category_link(6); ?>"><?php echo get_cat_name(6);?></a></h4>
<ul>
<?php query_posts('cat=6&showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>
<a href="<?php the_permalink();?>"><?php echo substr(strip_tags(get_the_title()),0,90); ?></a> </li>
<?php endwhile;?>
</ul>
</div>
</section>
</div>

Here
<?php echo get_cat_name(6);?> is category title
<?php echo get_category_link(6); ?> is category link
cat=6 is category ID
showposts=5 Post number
At the top where it says showposts=5 change the number to how many posts you want to display, and cat=6 is the id of the category, so change the ID of the category to pick which category will you be displaying. Don’t forget to change get_cat_name(6) to get_cat_name(your cat ID).

Recent posts from a specific category CSS:

Add the below css into your style.css file to designe specific category post.

h4 {
background: url("images/background.jpg") repeat scroll 0 0 #f8f8f8;
border-bottom: 3px solid #F42A41;
color: #006A4E;
font-size: 16px;
padding: 10px 10px;
margin-bottom: 15px;
}
#four-coloumn .coloumn1, #four-coloumn .coloumn2, #four-coloumn .coloumn3, #four-coloumn .coloumn4 {
width: 250px;
float: left;
margin-right: 10px;
}
#four-coloumn .coloumn1 {
}
#four-coloumn .coloumn2 {
}
#four-coloumn .coloumn3 {
}
#four-coloumn .coloumn4 {
margin-right: 0px !important;
}
section.small-image {
}
section.small-image ul {
}
section.small-image li {
display: table;
margin-bottom: 8px;
}
section.small-image img {
float: left;
margin-right: 8px;
}
section.small-image a {
color: #3a5c69;
}

If you complete the above steps you will able to create a one column specific category widget. At below I have added full code snippets to display recent posts from a specific category in WordPress like Demo image

<div id="four-coloumn">

<section class="small-image">

<div class="coloumn1">

<h4><a href="<?php echo get_category_link(6); ?>"><?php echo get_cat_name(6);?></a></h4>

<ul>

<?php query_posts('cat=6&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>

<li>

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>

<a href="<?php the_permalink();?>"><?php echo substr(strip_tags(get_the_title()),0,90); ?></a> </li>

<?php endwhile;?>

</ul>

</div>

<div class="coloumn2">

<h4><a href="<?php echo get_category_link(13); ?>"><?php echo get_cat_name(13);?></a></h4>

<ul>

<?php query_posts('cat=13&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>

<li>

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>

<a href="<?php the_permalink();?>"><?php echo substr(strip_tags(get_the_title()),0,90); ?></a> </li>

<?php endwhile;?>

</ul>

</div>

<div class="coloumn3">

<h4><a href="<?php echo get_category_link(20); ?>"><?php echo get_cat_name(20);?></a></h4>

<ul>

<?php query_posts('cat=20&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>

<li>

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>

<a href="<?php the_permalink();?>"><?php echo substr(strip_tags(get_the_title()),0,90); ?></a> </li>

<?php endwhile;?>

</ul>

</div>

<div class="coloumn4">

<h4><a href="<?php echo get_category_link(15); ?>"><?php echo get_cat_name(15);?></a></h4>

<ul>

<?php query_posts('cat=15&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>

<li>

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?>

<a href="<?php the_permalink();?>"><?php echo substr(strip_tags(get_the_title()),0,90); ?></a> </li>

<?php endwhile;?>

</ul>

</div>

<br class="clear" />

</section>
</div>

Download source

If any proble Don’t forget to ask over comment section.

Tags:  posts from a specific category, display posts from a specific category, specific category (WordPress), latest posts from a specific category, Run Loop on Posts of Specific Category, latest posts from a certain category in WordPress,posts from a specific category, display posts from a specific category, specific category (WordPress), latest posts from a specific category, Run Loop on Posts of Specific Category, latest posts from a certain category in WordPress, How to display posts from specific category

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>