Building a Custom Taxonomy Template in WordPress: Grouped Results Display

Table of Contents

If you’re a WordPress developer looking to create a custom taxonomy template to display grouped results, you’re in the right place. In this article, we’ll walk you through a step-by-step guide on how to achieve this using a practical example.

Scenario: Custom Post Type and Taxonomies

Let’s consider a scenario where you have a custom post type named “Results.” This post type has three taxonomies: “Club,” “Week,” and “Years.” Your task is to create a template that displays results from a specific club, grouped by weeks, and filtered by years.

				
					<?php get_header(); ?>

<?php
// Get current club taxonomy term
$club_term = get_queried_object();

// Get all 'years' terms
$years_terms = get_terms('years');
?>

<form method="get" action="">
    <select name="year_filter">
        <?php foreach ($years_terms as $year) : ?>
            <option value="<?php echo $year->slug; ?>" <?php selected($_GET['year_filter'], $year->slug); ?>><?php echo $year->name; ?></option>
        <?php endforeach; ?>
    </select>
    <input type="submit" value="Filter">
</form>

<?php
$year_filter = isset($_GET['year_filter']) ? sanitize_text_field($_GET['year_filter']) : ''; // Sanitize input

$week_terms = get_terms(array(
    'taxonomy' => 'week',
    'orderby' => 'name', 
    'order' => 'DESC'
));

foreach ($week_terms as $week_term) {
    $args = array(
        'post_type' => 'results',
        'posts_per_page' => -1, // Display all posts
        'tax_query' => array(
            'relation' => 'AND',
            array(
                'taxonomy' => 'club',
                'field' => 'slug',
                'terms' => $club_term->slug
            ),
            array(
                'taxonomy' => 'years',
                'field' => 'slug',
                'terms' => $year_filter
            ),
            array(
                'taxonomy' => 'week',
                'field' => 'slug',
                'terms' => $week_term->slug
            )
        )
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<h2>' . $week_term->name . '</h2>'; // Display the week's name
        
        while ($query->have_posts()) : $query->the_post();
            // Display the post's title
            echo '<h3>';
            the_title();
            echo '</h3>';

            // Display the post's featured image
            if (has_post_thumbnail()) {
                the_post_thumbnail();
            }
        endwhile;

        wp_reset_postdata();
    }
}
?>

<?php get_footer(); ?>

				
			

Step 1: Taxonomy Template Creation

Start by creating a taxonomy template to customize the display of the “Club” taxonomy. In your theme directory, create a file named taxonomy-club.php

Step 2: Dropdown Year Filter

Inside the taxonomy-club.php file, create a form that allows users to filter results by years. Retrieve all “Years” taxonomy terms and generate a dropdown using the get_terms() function.

Step 3: Fetch Posts Grouped by Weeks

Fetch the “Results” posts using a custom WP_Query loop. Filter posts based on the selected club, year, and week. Retrieve “Week” taxonomy terms in descending order.

Step 4: Loop Through Weeks

Loop through the fetched “Week” terms. For each week, create a new WP_Query to fetch the posts belonging to the specific club, year, and week. Inside this loop, display the week’s name as a heading.

Step 5: Display Post Title and Featured Image

Within the nested loop for each week, use the_title() function to display the post’s title within an <h3> tag. Additionally, use has_post_thumbnail() to check if a post has a featured image. If it does, display it using the_post_thumbnail().

Step 6: Reset Post Data

After each inner loop, remember to reset the post data using wp_reset_postdata() to avoid conflicts with other queries.

Putting It All Together

By following these steps, you’ve created a dynamic custom taxonomy template that allows users to filter “Results” posts by club, year, and week. The posts are grouped by weeks, and each week’s name is displayed above its corresponding group. The post title and featured image are displayed for each result.

Remember to customize the HTML structure, CSS styles, and any additional features according to your project’s requirements and design.

Picture of Abdus Salam

Abdus Salam

Abdus has over a decade of experience as a UX/UI designer and developer. He creates themes that are beautifully designed and function flawlessly. His work greatly improves the overall user experience.
Picture of Abdus Salam

Abdus Salam

Abdus has over a decade of experience as a UX/UI designer and developer. He creates themes that are beautifully designed and function flawlessly. His work greatly improves the overall user experience.

Table of Contents

Show your love!

Subscribe to our Newsletter

Join 89,000 People. Get our latest news & releases delivered to your inbox.

The Ultimate

WordPress Website You need, Is for free!

Collection of WordPress related products and resources that every professional should have!

Leave a Reply

Your email address will not be published. Required fields are marked *