Taxinomy slug as var in parent archive page, without having a specific taxinomy page

Question

I'm not exactly sure of the best way to ask what I am trying to achieve, so I'm going to describe it here. If someone can identify a more succinct way to ask this, or if it's been answered in a different way, please let me know!

For example sake, I going to describe a photographer's WordPress site, where there would be a Portfolio archive page listing available taxonomies, say Nature, Landscape, and Portraits.

This Portfolio page had a grid of entries, displayed from all various Portfolio taxonomies. Above the grid, would be a navigation bar listing those taxonomies:

All | Nature | Landscape | Portraits

When one of the taxonomy menu options is clicked, the grid filters to the user selection using JavaScript. For example, when "Nature" is clicked, only Nature entries are shown and all others are invisible.

The Nature taxonomy would also have its own page, accessed via the slug: mysite.com/portfolio/nature - I do not want this page to exist.

I would like to be able to use that Nature URL above to go to the Portfolio archive page and have it filtered to the Nature entries by JavaScript when the page is ready.

Essentially, I would like the URL mysite.com/portfolio/nature to act as mysite.com/portfolio/?tax=nature - where the tax GET var would get registered in PHP (and later outputted to JavaScript) and then the parent Portfolio archive page is loaded.

I'm not looking for any help with the actual JavaScript implementation of this, I'm looking for advice for how to handle the URL rewriting(?) in WordPress.

What's the best way to achieve this? Thanks!

Answer 1

My first idea (I'm not sure it's the most efficient) is to do a redirection in the file category.php or archive.php depending of your theme.

Try with this code before the get_header() line :

$term = get_queried_object();


if (    ("category" === $term->taxonomy)
    &&  (0 !== $term->parent) // if it's not a 1st level category
) {

    // get the parent
    $parent = get_term($term->parent);


    // redirection

    $url = get_term_link($parent) . "#" . $term->slug;

    wp_redirect($url);
    exit();

}

this code only work with a 2 levels taxonomy because the redirection ends at the 1st level.

Answer 2

First, register a custom query var to pass the taxonomy term. We want this value to be ignored by the query, so we won't use the taxonomy's actual slug in the rule.

function wpd_add_query_var( $query_vars ) {
    $query_vars[] = 'wpd_term';
    return $query_vars;
}
add_filter( 'query_vars', 'wpd_add_query_var' );

For the rule, we just need to set post_type=slug to trigger a post type archive, where slug is the slug that the post type was registered with. If you're not sure what this is, you can see it in the URL when viewing that post type's list screen in admin. We also set our custom query var to whatever was passed in the URL.

function wp_add_rewrite_rule() {
    add_rewrite_rule(
        'portfolio/([^/]+)/?$',
        'index.php?post_type=portfolio&wpd_term=$matches[1]',
        'top'
    );
}
add_action( 'init', 'wp_add_rewrite_rule' );

Visit the Settings > Permalinks admin page to flush rules after adding this.

You can then access the value after the query is parsed with get_query_var( 'wpd_term' ).

Also have a look at wp_enqueue_script and wp_localize_script functions for getting that value into your script.