How to Use WP_Query to Display Custom Post Type

As a developer new to WordPress, you may be asking yourself “How do I display a list of posts of a custom post type on my website?” Whether you are wanting to just display the post title and a link back to the post or present a wide range of dynamic content such as custom fields, images, etc, the powerful WP_Query class makes fetching and outputting your posts a breeze.

WP_Query is a class that accepts parameters to request and fetch posts you specify. The example below allows for us to set a list of parameters, fetch the posts matching those parameters and displays the title and excerpt of the post for the visitor. Taking a look at the example below, we first set up a variable that contains an array of the parameters we want to pass to WP_Query. We will want to set the ‘post_type’ parameter to the slug of the custom post type we’d like to query.  Setting the ‘post_status’ to published will ensure the requested posts are published and not in a ‘draft’ state. We then want to set the number of posts we’d like to fetch and return. Last for the parameters would be ‘orderby’ and ‘order’, the first ‘orderby’ orders the posts by title, the ‘order’ orders all post ascending by the title or ‘orderby’ parameter.

There are many parameters you can use to customize the requested posts with WP_Query. Take a look at the class reference WordPress Codex here to learn more about the different types of parameters you can use in WP_Query.

After we have completed setting up the parameters we will then pass them into the WP_Query class and set the result to a variable. We will then go into our classic WordPress while loop to cycle through the resulting posts and display the title using the_title();.

WP_Query Custom Post Type Example

The First Example

<?php
/**
* Setup query to show the ‘services’ post type with ‘8’ posts.
* Output is title with excerpt.
*/
   $args = array(  
       'post_type' => 'services',
       'post_status' => 'publish',
       'posts_per_page' => 8,
       ‘orderby’ => ‘title’,
       ‘order’ => ‘ASC’,
   );

   $loop = new WP_Query( $args );
     
   while ( $loop->have_posts() ) : $loop->the_post();
       print the_title();
       the_excerpt();
   endwhile;

   wp_reset_postdata();
?>

The Output

If we were to run this query within our WordPress template the output may look as follows:

This is the title of the article
This is the example excerpt from the article.. Read More

The Second Example:

<?php
/**
 * Setup query to show the ‘services’ post type with all posts filtered by ‘home’ category.
 * Output is linked title with featured image and excerpt.
 */
   
    $args = array(  
        'post_type' => 'services',
        'post_status' => 'publish',
        'posts_per_page' => -1, 
        ‘orderby’ => ‘title’, 
        ‘order’ => ‘ASC’,
        ‘cat’ => ‘home’,
    );

    $loop = new WP_Query( $args ); 
        
    while ( $loop->have_posts() ) : $loop->the_post(); 
        $featured_img = wp_get_attachment_image_src( $post->ID );
        print the_title(); 
        if ( $feature_img ) {
          <img src=”echo $featured_img[‘url’]” width=”echo $featured_img[‘width’]” height=”echo $featured_img[‘height’]” />
        }
        the_excerpt(); 
    endwhile;

    wp_reset_postdata(); 
?>

 

Parameters

There are many different parameters we can pass into our WP_Query to filter our results even further. Some other examples:

  • cat - filters on a specific category
  • tag - filters on a specific tag
  • tax_query - filters on specific taxonomy
  • s - search keyword

Template Tags

Within our custom post type loop, there are many Template Tags you can use inside the loop to output information dynamically. Some examples of other template tags you can use inside your loop:

Now that you understand the basics of WP_Query, requesting and fetching your custom post type. You can use what you’ve learned to develop your own your custom post type templates and display the custom posts easily to visitors.

Is your organization looking for help with a new or existing website? Please fill out the form on https://www.denverdata.com/contact-us so we can help you expand your business!

Let's Talk