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 CPT and a few custom taxonomies.

Each single CPT post is basically a question for student to practice with. I would like to setup a taxonomy filter page, so user can quickly find the one they are looking for in the right categories.

I am creating a CPT Taxonomy filter page to serve this purpose. Note that the CPT archive url and its custom taxonomy url are all being pointed to the same php template file (english_speakings-taxonomy-tpl.php).

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

Below is a screenshot of what the page should look like

This is a HTML markup for custom taxonomy achieve page (english_speakings-taxonomy-tpl.php): (all the custom taxonomies for this CPT, and the CPT achieve page are being redirected to the same template file, with the help of template_include hook)

(* The buttons from the above image are just HTML dummy code, they are not being generate from a php function... because I do not know how to do it. )

---

Questions

Here are my questions:

• Q1: Currently the buttons are just handcoded html markup, I know how to output each taxonomy terms with php, but I am unsure about what goes into each hyperlink ( a herf=???? ).

• Q2: I know how to register custom vars with WP, but I do not know how to actually put it to work. In another words, how can I connect the registered custom vars with my custom taxonomy terms respectively??

• Q3: CPT/ CPT Taxonomy Permalink... I am aware that in order to setup a clean URL, I shall be using Adding Rewrite Tags... but I do not understand how to use them, regex and match1, match[2] ..these are very confusing to me

• Q4: Need advice or suggestion on the URL structure.

---

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

Register 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.
) );

Register Custom Taxonomies

I am unsure about the rewrite slug for each taxonomy, as **I am pointing all of them to the same template page, the "CPT & Taxonomy filter page"**.

Can I put the same slug ('slug' = 'english/speakings',) for all of them?

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


// Difficulties 
register_taxonomy( 'english_speaking_difficulties', array( 'english-speakings' ), 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:

• http://example.com/english/{task-slug}/{course-term-id}{difficulties-term-id}

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))

The above URL should be interpreted as: example.com/index.php?post_typ=english_speakingsenglish_speaking_tasks=task1english_speaking_courses=course-aenglish_speaking_difficlties=pro

(Note: The above URL is still on the very same page of the screenshot image of the CPT Taxonomy filter page, loaded with the template file: english_speakings-taxonomy-tpl.php )

When users click into one of the single post, the permalink should be something like: example.com/english/{task}/{post-id}

---

Register the custom var with WP. I have three taxonomies 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 (this is part of the "english_speakings-taxonomy-tpl.php" 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_courses',
                '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-bodypSorry, there are no posts to display/p/div';
}
?

And I am lost from here....