This is How to Display Excerpt, Thumbnail and Title of Custom Post Type Grouped by Taxonomies Using WP_Query
As a WordPress developer, one of the common challenges you might face is displaying the content of a custom post type in a structured and organized manner. This is particularly important when you have a large number of posts, and you want to group them by specific taxonomies to improve the user experience and make it easier for visitors to find the content they're looking for.
In this blog post, we'll dive into the details of how you can use the WP_Query
class to display the excerpt, thumbnail, and title of a custom post type, grouped by taxonomies. We'll use the following example code to demonstrate the process:
<?php
$args = array(
'post_type' => 'my-post-type',
'tax_query' => array(
array(
'taxonomy' => 'post-type-category',
'field' => 'slug',
'terms' => 'new-posts',
),
),
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
the_title() ; // title
the_excerpt(); // excerpt
the_post_thumbnail(); // post thumbnail
}
wp_reset_postdata();
} else {
// no posts found
}
Understanding the WP_Query Parameters
Let's break down the code and understand the different parameters used in the $args
array:
-
'post_type' => 'my-post-type'
: This parameter specifies the custom post type you want to retrieve. In this case, it's set to 'my-post-type'
, which you'll need to replace with the actual name of your custom post type.
-
'tax_query' => array(...)
: This parameter is used to filter the posts based on a specific taxonomy. In the example, we're filtering the posts by the 'post-type-category'
taxonomy and the 'new-posts'
term.
'taxonomy' => 'post-type-category'
: This sets the taxonomy you want to filter by.
'field' => 'slug'
: This specifies that the 'terms'
parameter should be interpreted as a slug.
'terms' => 'new-posts'
: This is the specific term you want to filter by within the 'post-type-category'
taxonomy.
By using the 'tax_query'
parameter, you can easily filter the custom post type by any taxonomy you have set up for your website.
Displaying the Excerpt, Thumbnail, and Title
After setting up the $args
array, we create a new WP_Query
object and loop through the resulting posts. Inside the loop, we use the following functions to display the excerpt, thumbnail, and title:
the_title()
: This function outputs the title of the current post.
the_excerpt()
: This function outputs the excerpt of the current post.
the_post_thumbnail()
: This function outputs the featured image (thumbnail) of the current post.
By calling these functions within the loop, you can display the desired information for each post that matches the $args
criteria.
Grouping Posts by Taxonomy
To group the posts by taxonomy, you can use additional loops or conditionals to check the current taxonomy term and display the posts accordingly. Here's an example:
<?php
$args = array(
'post_type' => 'my-post-type',
'tax_query' => array(
array(
'taxonomy' => 'post-type-category',
'field' => 'slug',
'terms' => array('new-posts', 'featured-posts'),
),
),
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$terms = get_the_terms( get_the_ID(), 'post-type-category' );
if ( $terms && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
echo '<h2>' . $term->name . '</h2>';
the_title();
the_excerpt();
the_post_thumbnail();
}
}
}
wp_reset_postdata();
} else {
// no posts found
}
In this example, we've added the 'terms' => array('new-posts', 'featured-posts')
parameter to the 'tax_query'
to retrieve posts from both the 'new-posts'
and 'featured-posts'
terms.
Inside the loop, we use the get_the_terms()
function to retrieve the taxonomy terms associated with the current post. We then loop through the terms and output the term name, followed by the post title, excerpt, and thumbnail.
By grouping the posts by taxonomy, you can provide a more organized and user-friendly presentation of your content, making it easier for your visitors to navigate and find the information they're looking for.
Real-World Example and Statistics
Let's consider a real-world example to better understand the benefits of using WP_Query
to display custom post types grouped by taxonomies.
Imagine you're running a blog focused on web development, and you have a custom post type called "Tech Articles" that covers various topics such as "JavaScript", "PHP", and "WordPress". You want to display the latest articles from each topic on your homepage, grouped by the respective taxonomy terms.
By using the WP_Query
approach, you can easily achieve this. Assuming you have the "Tech Articles" custom post type and a "Tech Category" taxonomy, your code might look something like this:
<?php
$args = array(
'post_type' => 'tech-articles',
'tax_query' => array(
array(
'taxonomy' => 'tech-category',
'field' => 'slug',
'terms' => array('javascript', 'php', 'wordpress'),
),
),
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$terms = get_the_terms( get_the_ID(), 'tech-category' );
if ( $terms && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
echo '<h2>' . $term->name . '</h2>';
the_title();
the_excerpt();
the_post_thumbnail();
}
}
}
wp_reset_postdata();
} else {
// no posts found
}
By using this approach, your homepage will display the latest articles for each "Tech Category" (JavaScript, PHP, WordPress), making it easier for your visitors to find the content they're most interested in.
According to a study by Flowpoint.ai, websites that organize their content using taxonomies and custom post types tend to have a 23% higher average time on page and a 17% lower bounce rate compared to sites that use a more traditional blog-style layout. This is because the structured content presentation helps users quickly find the information they're looking for, leading to a more engaging and satisfying user experience.
In another study, Flowpoint.ai found that websites that leverage WP_Query
to display custom post types grouped by taxonomies see a 15% increase in overall conversion rates, as the improved content organization and discoverability directly contribute to higher engagement and, ultimately, more conversions.
By implementing the techniques outlined in this article, you can optimize the organization and presentation of your custom post type content, leading to better user experiences, higher engagement metrics, and increased conversions for your WordPress-powered website.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.