How to aply ECS Pro dynamic filters on a Taxonomy terms loop?

[jess8bit]

I have created a simple Page where I want to list all the taxonomy terms of a given taxonomy (this taxonomy is used to categorize a Custom Post Type).

So, I would need a way to loop on these terms and display each one, and I would lke to use ECS Pro to skin the term rendering.

Problem: the Posts Widget does not allow to loop over any Custom Taxonomies (only Posts, Pages etc.). Not even regular Posts Categories... It can be done by adding more plugins but it looks like installing a big add-on for only one feature...

So I guess I would to achieve this by coding something.

I have a general idea of what to do, but I have missing parts. Maybe you can help finalizing.

My main idea is to add a shortcode to render the whole loop.

add_shortcode('taxonomy_list', function ($atts) {
    $wp_terms = get_terms( array(
            'taxonomy'   => 'car_segments'
    ));
    $out = '';

    // Loop through all terms
    foreach( $wp_terms as $wp_term ) {

        // I can get term's custom fields like that: 
        // $logo = get_field('logo', $wp_term);
        // $name = $wp_term->name ;

        // I can get the skin template like that
        $my_skin = do_shortcode('[elementor-template id="1238"]');

        // how to pass $logo and $name, or other variables to the Skin template?
        // Could they replace dynamic variable with
        // $out .= apply_filters('ecs_dynamic_filter', $my_skin, ?, ?, ?); 

    }
    $out .= '<br />';
    return $out;
} );

Does it make sense ?

UPDATE: we can take a real life example: I have A Custom Post Type "Cars", with custom fields I have A Taxonomy "car_segments" assoicated to this CPT, terms can be "4x4, Luxury, Convertible, Sedan, SUV etc.", each term have custom fields like "logo", etc. So I want to design a skin for each term and display the list of these terms, in a page, each skin would display the terms's name, logo etc.

[dudaster]

I know your pain. It isn’t a quick solution here. I’ll think about a widget like this in the future.

But yeah you could do it like the way you did it but you need to pass custom dynamic keys every time inside foreach loop.

[dudaster]

Hopefully this would give you an idea:

add_shortcode('taxonomy_list', function ($atts) {
    $wp_terms = get_terms( array(
            'taxonomy'   => 'car_segments'
    ));
    $out = '';

    // Loop through all terms
    foreach( $wp_terms as $wp_term ) {

        // I can get term's custom fields like that: 
        // $logo = get_field('logo', $wp_term);
        // $name = $wp_term->name ;

        add_filter( 'ecs_vars', function ( $custom_vars ) use ($wp_term){
            $custom_vars['logo']='<img class="img-logo" src="'.get_field('logo', $wp_term).'"/>';
            $custom_vars['name']=$wp_term->name ;
            return $custom_vars;
        });

        // I can get the skin template like that
        $my_skin = do_shortcode('[elementor-template id="1238"]');

        // how to pass $logo and $name, or other variables to the Skin template?
        // Could they replace dynamic variable with
        $out .= '<article class="term-item">'.
            apply_filters('ecs_dynamic_filter', $my_skin).
        "</article>"; 

    }
    // keep in mind elementor-grid-4 is the number of columns
    return '
        <div class="term-loop-wrapper elementor-grid-4">
        <div class="term-loop-container elementor-grid">
                '.$out.'
        </div></div>
        <!-- now will add the spacing between articles -->
        <style>
            .term-loop-container {
                grid-column-gap: 30px;
                grid-row-gap: 35px;
            }
        </style>
        ';
} );

In the template you need to use in this case {{logo}} and {{name}} It's not tested and I wrote it here in github for the first time.

[dudaster]

Tomorrow I'll be away from the computer for the rest of the week hopefully you're gonna manage.

[jess8bit]

Thanks for posting the code sample, it put me in the right direction :)

It's not simple but it's a working solution meanwhile.

just a quick note: outside variables are accessible inside the function add_filter( 'ecs_vars', function ( $custom_vars ) {})

unless you change it to add_filter( 'ecs_vars', function ( $custom_vars ) use ($my_outside_variable) {})

With that, it renders the custom variables 👍

thanks!

[dudaster]

You are right I forgot to add use ($wp-term). I'll quick edit the code for someone else to see it properly written.

[lea-pw]

Is there a way to get this result by using a custom elementor query? I need to get the results as a slider and would like to use elementor posts widget for it.