WP_Query how to display posts from a specific Category
I received a question about how to display posts from a specific category. You may want to do this in a newspaper style layout or just to show a featured category on your homepage. You need to use WP_Query
There are 2 numbers in the line of code highlighted below which are the arguments we pass to WP_Query. The first is the category ID and the second is the number of posts to show. Change them to the values you want. You can find the ID for your category by opening it for editing in the WordPress backend and looking in the uRL bar in your browser.
<?php $catquery = new WP_Query( 'cat=3&posts_per_page=10' ); while($catquery->have_posts()) : $catquery->the_post(); ?> <ul> <li><h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3> <ul><li><?php the_content(); ?></li> </ul> </li> </ul> <?php endwhile; ?>
Below is some slightly different code which I used to just display one post in a div on my home page. I used a 2 column layout and displayed the page content on the left and 1 post from a category named ‘featured’ in a column on the right. This was used in a child theme for popular free responsive theme Yoko. You can download it in the WordPress theme repository. This is the complete page code.
Note that I have used the category name to fetch the id. This way I can re-use this code as long as I make the category name ‘featured’ I do not need to worry about what the ID is on a new site. see the highlighted lines below.
<?php
/**
* Template Name: Home-page
* Description: For homepage with column for specified blog post
*
* @package WordPress
* @subpackage Yoko
*/
get_header(); ?>
<div id="wrap">
<div id="home-page-content" class="half-width half-left">
<?php the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
</div><!-- end home-page-content -->
<div id="home-post-content" class="half-width half-right">
<?php
$category_id = get_cat_ID('featured');
$catquery = new WP_Query( 'cat=' .$category_id. '&posts_per_page=1' );
while($catquery->have_posts()) : $catquery->the_post();
?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php comments_template( '', true ); ?>
</div><!-- end home-post-content -->
<?php get_footer(); ?>
Make it all fit with CSS
Now you just need a little CSS to make the columns fit. This works fro Yoko, you would need to have some more CSS in the media queries to account for smaller screens and to control text sizes. This is only a guide as the real purpose of this post is explaining how to get post from 1 category.
.half-width {
width:48%;
padding: 0 0 20px 0;
border-bottom: none;
float:left;
}
.half-left {
margin: 0 2% 0 0;
}
.half-right {
margin: 0 0 0 2%;
}
#home-page-content, #home-post-content {
font-size: .95em;
line-height: 1.6;
}
#home-page-content .page p, #home-post-content p {
padding: 0 0 20px 0;
}
Tools:
You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
Custom CSS:
This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.
3 Comments
Shondra
March 20, 2015This is great! I’m going to try and see if it works.
bengras
July 5, 2014Thanks, Im trying to create slider based on category.
hankmaudi
July 28, 2013Thank you very much .. it helpp me alot 🙂