How to Display Thumbnails in a List from a Specific Category in WordPress

Home » Snippets » How to Display Thumbnails in a List from a Specific Category in WordPress

Created with:



Creator: WPTurbo Team

Customize with WPTurbo AI

Add Snippet To Project

New Project
Add To Existing Project

Are you looking for a way to display thumbnails in a list from a specific category on your WordPress site? With the right techniques, you can easily achieve this. In this article, we will guide you through the process of displaying thumbnails in a list format from a specific category using WordPress. Whether you’re a beginner or an experienced user, this article will provide you with the necessary steps to accomplish this task. So let’s dive in and learn how to showcase your category-specific thumbnails in a neat and organized list.

					function wpturbo_display_category_thumbnails() {
   $category_id = 1; // Replace 1 with the ID of the specific category
   $args = array(
      'post_type' => 'post',
      'posts_per_page' => 10,
      'category__in' => $category_id,
      'meta_key' => '_thumbnail_id'
   $query = new WP_Query( $args );
   if ( $query->have_posts() ) {
      echo '<ul>';
      while ( $query->have_posts() ) {
         echo '<li>';
         if ( has_post_thumbnail() ) {
            echo '<a href="' . get_permalink() . '">';
            the_post_thumbnail( 'thumbnail' );
            echo '</a>';
         echo '</li>';
      echo '</ul>';
add_shortcode( 'wpturbo_category_thumbnails', 'wpturbo_display_category_thumbnails' );

The code snippet provided allows you to display thumbnails from a specific category in a list format. Let’s break down the code to understand how it works.

First, we define a new function called wpturbo_display_category_thumbnails(). This function will handle retrieving and displaying the thumbnails.

Inside the function, we set the $category_id variable to the ID of the specific category we want to display thumbnails from. You’ll need to replace 1 with the actual ID of the category you want to use.

Next, we define the $args array which includes various parameters for the WP_Query object.

  • post_type is set to 'post', indicating that we want to query for posts.
  • posts_per_page is set to 10, which limits the number of posts we want to display.
  • category__in is set to $category_id, which filters the posts based on the specific category ID.
  • meta_key is set to '_thumbnail_id', which ensures that only posts with a featured image (thumbnail) are included in the query.

After setting up the query, we create a new instance of the WP_Query class by passing in the $args array.

Next, we check if there are any posts returned by the query using the have_posts() method of the WP_Query object. If there are, we start generating the HTML markup for the list of thumbnails.

We begin by echoing an opening <ul> tag to indicate the start of an unordered list.

Inside the while loop, we call the the_post() method to set up the current post and move the pointer forward. Then, we echo a <li> tag to mark the start of a list item.

Within the list item, we use the has_post_thumbnail() function to check if the current post has a featured image. If it does, we echo an opening <a> tag and set the href attribute to the permalink of the post using the get_permalink() function.

Inside the <a> tag, we call the the_post_thumbnail() function and pass in 'thumbnail' as the size parameter. This will output the featured image with a thumbnail size. You can replace 'thumbnail' with other available image sizes based on your theme.

Finally, we close the <a> tag and the <li> tag.

After the while loop ends, we echo a closing </ul> tag to mark the end of the list.

Lastly, we call wp_reset_postdata() to reset the post data after the custom query.

To make this functionality easily usable in your WordPress site, we register a shortcode by adding the add_shortcode() function. We set the shortcode name to 'wpturbo_category_thumbnails' and assign it to the wpturbo_display_category_thumbnails() function we defined earlier.

Now, you can use the [wpturbo_category_thumbnails] shortcode anywhere in your WordPress site to display the list of thumbnails from the specified category.

Register an account to save your snippets or go Pro to get more features.