Both Posts and Portfolio Widgets come with a feature-packed query control that allows you to select specific posts to show in the widget. But sometimes you need more control over the query and for that, we added a Custom Query filter to expose the WP_Query object and allow you to customize the query in any way you want.

Setting Up a Custom Filter

In Posts or Portfolio widget, give your query an ID, make sure it is unique unless you want the filter to run on multiple posts or portfolio widgets.

In this example the query ID is set to my_custom_filter, so when Elementor render’s the widget it will create a custom filter based on the query ID:

• Posts & Portfolio Widgets– elementor/query/my_custom_filter

Using the Custom Filter

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

<span class="variable language php-tag"><?php</span>
<span class="comment">// Posts or Portfolio Widget</span>
<span class="function call">add_action</span>( <span class="string">'elementor/query/my_custom_filter'</span>, <span class="keyword">function</span>( <span class="variable dollar-sign">$</span><span class="variable">query</span> ) {
	<span class="comment">// Modify the posts query here</span>
} );

Multiple Post Types in Posts Widget

<span class="comment">// Showing multiple post types in Posts Widget</span>
<span class="function call">add_action</span>( <span class="string">'elementor/query/my_custom_filter'</span>, <span class="keyword">function</span>( <span class="variable dollar-sign">$</span><span class="variable">query</span> ) {
	<span class="comment">// Here we set the query to fetch posts with</span>
	<span class="comment">// post type of 'custom-post-type1' and 'custom-post-type2'</span>
	<span class="variable dollar-sign">$</span><span class="variable">query</span><span class="keyword operator">-</span><span class="keyword operator">></span><span class="function call">set</span>( <span class="string">'post_type'</span>, [ <span class="string">'custom-post-type1'</span>, <span class="string">'custom-post-type2'</span> ] );
} );

<span class="comment">// Showing post with meta key filter in Portfolio Widget</span>
<span class="function call">add_action</span>( <span class="string">'elementor/query/my_custom_filter'</span>, <span class="keyword">function</span>( <span class="variable dollar-sign">$</span><span class="variable">query</span> ) {
	<span class="comment">// Get current meta Query</span>
	<span class="variable dollar-sign">$</span><span class="variable">meta_query</span> <span class="keyword operator">=</span> <span class="variable dollar-sign">$</span><span class="variable">query</span><span class="keyword operator">-</span><span class="keyword operator">></span><span class="function call">get</span>( <span class="string">'meta_query'</span> );
	<span class="comment">// Append our meta query</span>
	<span class="variable dollar-sign">$</span><span class="variable">meta_query</span>[] <span class="keyword operator">=</span> [
		<span class="string">'key'</span> <span class="keyword operator">=</span><span class="keyword operator">></span> <span class="string">'project_type'</span>,
		<span class="string">'value'</span> <span class="keyword operator">=</span><span class="keyword operator">></span> [ <span class="string">'design'</span>, <span class="string">'development'</span> ],
		<span class="string">'compare'</span> <span class="keyword operator">=</span><span class="keyword operator">></span> <span class="string">'in'</span>,
	];
	<span class="variable dollar-sign">$</span><span class="variable">query</span><span class="keyword operator">-</span><span class="keyword operator">></span><span class="function call">set</span>( <span class="string">'meta_query'</span>, <span class="variable dollar-sign">$</span><span class="variable">meta_query</span> );
} );

<span class="comment">// Showing posts ordered by comment count in Posts Widget</span>
<span class="function call">add_action</span>( <span class="string">'elementor/query/my_custom_filter'</span>, <span class="keyword">function</span>( <span class="variable dollar-sign">$</span><span class="variable">query</span> ) {
	<span class="comment">// Here we set the query to fetch posts with</span>
	<span class="comment">// ordered by comments count</span>
	<span class="variable dollar-sign">$</span><span class="variable">query</span><span class="keyword operator">-</span><span class="keyword operator">></span><span class="function call">set</span>( <span class="string">'orderby'</span>, <span class="string">'comment_count'</span> );
} );

<span class="comment">// Showing posts ordered by comment count in Posts Widget</span>
<span class="comment">// NOTE: Using this snippet may result in displaying private data</span>
<span class="comment">// Please use with caution.</span>
<span class="function call">add_action</span>( <span class="string">'elementor/query/my_custom_filter'</span>, <span class="keyword">function</span>( <span class="variable dollar-sign">$</span><span class="variable">query</span> ) {
	<span class="comment">// Here we set the query to fetch posts with </span>
	<span class="comment">// post status 'future' and 'draft'.</span>
	<span class="comment">// Refer to WP_Query documentation in WP codex for values list.</span>
	<span class="variable dollar-sign">$</span><span class="variable">query</span><span class="keyword operator">-</span><span class="keyword operator">></span><span class="function call">set</span>( <span class="string">'post_status'</span>, [ <span class="string">'future'</span>, <span class="string">'draft'</span>] );
} );

• The action hook provides two parameters:
  • $query – The WP_Query object.
  • $widget – The Current widget object.
• You may need to refresh the editor to see the effect of the filter.
• Deprecated hooks:
  • elementor_pro/posts/query/{$custom_query_id}
  • elementor_pro/portfolio/query/{$custom_query_id}