rewrite tag – How to build a achieve page for a custom CPT with multiple taxonomy button filter

This is an extended question from
Permalink for CPT with taxonomy


I am building a website that has a custom CPT and a few custom taxonomies.
The goal is to setup the archive page to have a front-end filter with buttons.

I have struggling with a few different questions…hoping someone can help.

Here is a screenshot of the HTML mark for the achieve page:

filter html markup screenshot

Here’s the current setup:

Custom Post Type:
English Speaking, with slug name “english-speakings”

Custom Taxonomies:
(1) Question Tasks (“english_speaking_tasks”), and its terms: “task1”, “task2”, “task3”

(2) Difficulties (“english_speaking_difficulties”) and its terms: “easy”, “advanced”, “pro”

(3) Course (“english_speaking_courses”) and its terms: “course-a”, “course-b”, “course-c”

Custom CPT: English-Speakings

register_post_type( 'english-speakings', array(
    'label' => 'English Speaking',
    'public' => true,
    'rewrite' => array(
        'slug' => 'english/speaking/%speaking_task%/%course%/',
    ),
    // Other args here.
) );

Taxonomy

// Task
register_taxonomy( 'speaking-task', array( 'english-speaking' ), array(
    'label' => 'Speaking Tasks',
    'public' => true,
    'rewrite' => array(
        'slug' => 'english/speakings',
    ),
    // Other args here.
) );


// Difficulties 
register_taxonomy( 'english_speaking_difficulties', array( 'english-speaking' ), array(
    'label' => 'Speaking Tasks',
    'public' => true,
    'rewrite' => array(
        'slug' => 'english/speaking/difficulties',
    ),
    // Other args here.
) );



// Course
register_taxonomy( 'english_speaking_courses', array( 'english-speaking' ), array(
    'label' => 'Speaking Tasks',
    'public' => true,
    'rewrite' => array(
        'slug' => 'english/speaking/courses',
    ),
    // Other args here.
) );

'slug' => 'english/speaking/%speaking_task%/???????/',

**Question: For the URL format, I need some guidance or suggestion here… **

For SEO purpose, I like to setup a Clean URL, but I do not need all the taxonomy names to show up there, and I might have more taxonomies created in the future…

Instead of https://example.com/{cpt-slug}/{task-slug}/{course-slug}/{difficulty-slug}
( https://example.com/english/task1/course-a/pro )

The ideal format is:

Example: https://example.com/english/task1/2035 or 20-35 or 20/35
( where 20 and 35 are the term id: course-a(“20”), pro(“35”))


Register the custom var with WP.

I have three taxonomy that need to be functional as filters, so I am going to register them to WP as custom vars:

function cpt_english_register_query_vars( $vars ) {
    $vars() = 'course';
    $vars() = 'task';
    $vars() = 'difficulty';
    return $vars;
}
add_filter( 'query_vars', 'cpt_english_register_query_vars' );

Build Query for the CPT Achieve page

    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; //use 'page' if the query is on a static front page
    
    
    $course =  get_query_var( 'course' ) ?: "courseA"; //set default value as "courseA"
    $task = get_query_var('task') ?: "task1"; // default value "task1" 
    $difficulty = get_query_var('difficulty') ?: "easy"; //default value "easy"
    
    $args = array( 
        'post_type' => 'english_speakings',
        'post_status'    => 'publish',
        'posts_per_page' =>  20 ,
        'paged' => $paged,
    
         'tax_query' => array(
    
           'relation' => 'AND', 
            
            array(
                'taxonomy' => 'english_speaking_tasks',
                'field'    => 'slug',
                'terms'    => $task,
            ),
    
            array(
                'taxonomy' => 'english_speaking_course',
                'field'    => 'slug',
                'terms'    => $course,
            ),
    
            array(
                'taxonomy' => 'english_speaking_difficlties',
                'field'    => 'slug',
                'terms'    => $difficulty,
            ),
    
        ),
    );

$the_query = new WP_Query( $args );

And Output the custom Query:

<?php

if ( $the_query->have_posts() ) {

    while ( $the_query->have_posts() ) {

        $the_query->the_post();
?>

Content ...

<?php
    }
    wp_reset_postdata(); //wp_reset_query();
} else {
    echo '<div class="card-body"><p>Sorry, there are no posts to display</p></div>';
}
?>

And I am lost….

The following are the parts I have trouble with:

(1) I have trouble making up my mind about the URL structure, need advise here

(2) “Adding Rewrite Tags”.. I do not understand how to use rewrite tags, regex and match1, match(2) ..these are very confusing to me

(3) For the front-end the taxonomy term buttons, I am not sure how to build the for each filter term buttons.

(4) I am not sure how to linked the custom var with the correct taxonomy term