How to Display Recent Posts From A Specific Category

Add Tool

Display Recent Posts From A Specific Category In WordPress


This post is for advance users who want to display recent posts from a specific category. We have this article specially for you. 1stwebsuite 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.

Display Recent Posts From A Specific Category

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>

If any problem Don't forget to ask over comment section.


Tags: Tutorial, WordPress Tutorial, wp snippets
Payza

About Masum Billah

Display Recent Posts From A Specific Category In WordPress 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How to Display Recent Posts From A Specific Category


adf.ly