Using Custom Query Filter of Elementor in WordPress

In this post I’m going to show how I used the Custom Query Filter of the Elementor plugin to display dynamic content in WordPress.

I was working on a site having a custom posts type for Curriculum and Courses. I also created custom term/taxonomy that is available on both posts type. When creating a Course post I would set the curriculum and course code from the custom terms/taxonomies.

What I want to do is, when a curriculum page is opened I want to show all courses related to that curriculum in the sidebar.

Using Elementor plugin, I created a new “Section” template which can be added in the sidebar widgets for the Curriculum post type. Then added the “Posts” template into the page template builder.

Elementor Posts Element
Image 2: Posts Element
Custom Query Filter - Taxonomies
Image 1: Custom Taxonomies

Posts Query Builder

The “Posts” element is only available for the Elementor Pro version. This will allow you to customize the source of the posts you want the query to display results. This can be any other custom posts type.

You can also set a custom filter by Term or Author. That sounds great but you are only setting a static filter in that case because you are pre-defining the results while building the page.

Since we are building a custom “Section” template which will be added in a sidebar widget. The contents we will be dealing are dynamic. And that’s where the Custom Query Filter comes into play.

The Query ID field lets you to input a custom unique id which will allow you to alter the query or do server side filtering. 

I set the query id to curriculum_sidebar_filter, as shown in Image 3.

Elementor Posts Query Element
Image 3: Query Builder

Using the Custom Query Filter

The Custom Query filter of the Elementor plugin in WordPress exposes the WP_Query object which allows you to customize the query in any way you want.

In this example the query ID is set to curriculum_sidebar_filter, so when Elementor renders the widget it will create a custom filter based on the query ID like: elementor/query/curriculum_sidebar_filter

After you have set up the Custom Query Filter you can use it to modify the query in the same way WordPress native  hook lets you modify the Query. Using the Custom Query filter is just like any other WordPress native pre_get_posts action hook: 

// Display Related Courses for the active Curriculum Post
add_action( 'elementor/query/curriculum_sidebar_filter', function( $query ) {
// Here we set the query to fetch posts with
} );

I added the above action hook in my Child themes functions.php file and started adding some codes.

The following line sets post_type to courses. Though this can also be manually set by selecting the Source in the Posts Element Query builder as you can see in Image 3.

  // Set the post_type to 'courses'
  $query->set( 'post_type', 'courses' );

The following line of code used the wp_get_object_terms to retrieve the terms of the  'curriculum' of the current post. And store the first element of the array in the $curriculum variable.

  // Get the term_id of the active curriculum post
  $curriculum = wp_get_object_terms( get_the_id(),  'curriculum' )[0];

The following code sets up the taxonomy query, we set the field to be the term_taxonomy_id and the values in the terms are the term_id we get from the $curriculum variable. We also the operator to ‘IN’ which means it will return all posts that include the $curriculum->term_id. You can also set the ‘include_children’ to true if your posts are hierarchical. If not, you can remove that field.

  $tax_query = array(
    'taxonomy'        => 'curriculum',
    'field'         => 'term_taxonomy_id',
    'terms'         => ["$curriculum->term_id"],
    'operator'        => 'IN',
    'include_children'  => true
  );

The following code creates an array of arguments for the terms query. 

// Set the terms query
  $terms = array(
    'curriculum'  => array(
      'terms' => ["$curriculum->term_id"],
      'field'   => 'term_taxonomy_id',
    )
  );

The following codes will add or update WP_Query object’s query fields. 

$query->tax_query->queries[] = $tax_query;
$query->tax_query->queried_terms = $terms;
$query->query_vars['tax_query'] = $query->tax_query->queries;

Now, putting all codes together.

// Display Related Courses for the active Curriculum Post
add_action( 'elementor/query/curriculum_sidebar_filter', function( $query ) {

  // Set the post_type to 'courses'
  $query->set( 'post_type', 'courses' );

 // Get the term_id of the active curriculum post
  $curriculum = wp_get_object_terms( get_the_id(),  'curriculum' )[0];

  // Set tax_query for the curriculum taxonomy
  $tax_query = array(
    'taxonomy'        => 'curriculum',
    'field'         => 'term_taxonomy_id',
    'terms'         => ["$curriculum->term_id"],
    'operator'        => 'IN',
    'include_children'  => true
  );

// Set the terms query
  $terms = array(
    'curriculum'  => array(
      'terms' => ["$curriculum->term_id"],
      'field'   => 'term_taxonomy_id',
    )
  );

  $query->tax_query->queries[] = $tax_query;
  $query->tax_query->queried_terms = $terms;
  $query->query_vars['tax_query'] = $query->tax_query->queries;

} );

The above custom query filter should dynamically return all posts from the ‘courses’ post type where the curriculum taxonomy id matches the curriculum term_id of the current post.

Do you have any other use case about how you used the custom query filter provided by the Elementor plugin? Please leave them in the comments section below.

Cromwell Bayon

He is a self-tutored programmer and a Full-Stack Developer. He strives to excel in the newest technology as possible. He has a very high sense of technicality and analytical skills which allows him to resolve any kind of issues related to technology. He also loves woodworking. Read more about him here...

Add comment

E-mail is already registered on the site. Please use the Login form or enter another.

You entered an incorrect username or password

Sorry, you must be logged in to post a comment.