Greenshift WordPress
Free Download

Query Builder

Blog Staff

,

Query Builder is similar to core Query Loop block, but it has next enhancements

  1. More query selectors. (by post type, custom taxonomy, manual select)
  2. More Order options (by title, id, custom field value, date, random order, date of post changes)
  3. More pagination options (simple pagination, Infinite Scroll)
  4. Filter panel (by meta field value, by taxonomy + taxonomy selector)
  5. Responsive options (choose number of columns per each resolution
  6. Design options for items (background, spacing, border, shadow)
  7. Better default view
  8. Support for Wishlist archives (you need to enable auto detection in Data query settings)
  9. Support for Full Container link
  10. Custom ads areas
  11. Conversion to carousel
  12. Advanced placeholders

You can also add any kind of blocks inside Query Builder. We also prepared some dynamic fields special for Query Builder

Do you want to know more about Query builder?

Check our video

Patterns

Query Builder has many patterns. You can easily import them from Library – FSE Templates

Combination with Animation addon

Query grid has option for filter panel and Infinite scroll. Also, you can combine it with other blocks, for example, with Animation addon to add Batch scroll feature

Transformation to Slider/Carousel

You can easily transform grid to Slider and even more, you can synchronize two sliders, for example, this can be used to make complex Dynamic slider where thumbnails will be another query block

Advanced Placeholders and operators

Query builder has option to add chained Meta query conditions. There is also support for Placeholders. This can be used in different scenarios. For example, if you want to connect one post type to another. You can use {POST_ID} Check video with some details

There are other scenarios when placeholders are helpful. Especially when you need to get posts with date in meta fields, for example, on Event site.

Imagine that you have many events and you store date of finishing in meta field event_date. Now, you want to show all actual events. So, you need to compare current date and date which is stored in custom field. Setup will be next

Please, note, that WordPress supports operators for query class only when you save your dates in Y-m-d or Y-m-d H:i:s format. Also UNIX timestamp value is supported and this will be even better because you can use Time string placeholders. For example, {TIMESTRING:+1 month} will be converted to the current date + 1 month, so, you can show fresh events which will be finished in a month from the current date. You can also use Ranges, for this, divide two values by | symbol and use Operator BETWEEN or IN, NOT IN, NOT BETWEEN

When you click on the special icon, you will find many placeholders and description of what they do.

Another common used placeholder is {CUSTOM:meta}. This allows to get value of meta field. Imagine, that you want to show all related products on product page which have the same _sku as current product _sku. So, you need to set in custom field key _sku and in value {CUSTOM:_sku}. This will compare current product’s sku field and show all products with the same sku.

Wishlist Query

Query builder can be used to show results from Wishlist block

Query Builder can be used to show related items of current post by taxonomy (for example, by category). You can also get all items from custom field by their ids. This can be useful if you use ACF relationship field that stores data as comma separated ids in custom field. This can be used for making custom related items. Use Ids relationship source in Query builder

Child or Sister Items

You can get all child items of current page or all sister items (pages that have common parent)

RelationShip from MetaBox plugin

Query builder can be used to get related items from MetaBox Relationship addon.

For this, create relationship between two post types and copy its ID

In Query Builder, select Metabox Relationship source and set ID

Drop Query builder inside Single post template or reusable template, or content of post and attach items to post.

Query builder will show only selected items on Frontend.

The backend Editor will show all items of the selected post type for preview purposes.

Hooks and filters in Query Builder

Query builder is a very powerful Swiss knife block for any loop maker. It has also a few filters and hooks which you can use to extend it or add compatibility with other plugins.

How to show post classes on each grid

By default, grid item shows only type of post and post id. But you can extend to show all categories, tags, etc. Here is snippet

add_filter('gspbgrid_item_class', 'gs_item_class', 10, 3);
function gs_item_class($class, $postid, $block_instance){
    $classnew = get_post_class('', $postid);
    $classnew = implode(' ', $classnew);
    $class = $class. ' '.$classnew;
    return $class;
}

Also, you can change $args of loop. We have filter and action for this. Example

add_filter( 'gspb_module_args_query', function( $args ) {
    if ( ! is_admin() ) {
        $args['wp_grid_builder'] = 'wpgb-content';
    }
    return $args;
});

Previous example has change for global $args for all Query builder blocks. But also you can add specific changes for specific query block. You can limit it by ID of block. How to know ID? There is Filter block connection option in panel. You can copy there string. It will be like “gspb_filterid_gsbp-45e0c1e”. Remove “gspb_filterid_” from string and you will get ID of block that you can use in filter

add_filter( 'gspb_module_args_query_id', function( $args, $id ) {
    if ( is_home() && $id == 'gsbp-45e0c1e' ) {
        $args['ignore_sticky_posts'] = 1;
    }
    return $args;
}, 10, 2);

This filter will change $args of WP_Query class before it runs.

You can also use action which will affect wp_query after WP_Query

add_action('gspb_after_module_args_query', function ($wp_query){
    return $wp_query;
});
Copy this post’s content
<!-- wp:paragraph -->
<p>Query Builder is similar to core Query Loop block, but it has next enhancements </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>More query selectors. (by post type, custom taxonomy, manual select)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>More Order options (by title, id, custom field value, date, random order, date of post changes)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>More pagination options (simple pagination, Infinite Scroll)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Filter panel (by meta field value, by taxonomy + taxonomy selector)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Responsive options (choose number of columns per each resolution</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Design options for items (background, spacing, border, shadow)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Better default view</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Support for Wishlist archives (you need to enable auto detection in Data query settings)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Support for Full Container link</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Custom ads areas</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Conversion to carousel</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Advanced placeholders</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>You can also add any kind of blocks inside Query Builder. We also prepared some <a href="https://greenshiftwp.com/dynamic-fields/" data-type="post" data-id="2246">dynamic fields special for Query Builder</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Do you want to know more about Query builder?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Check our video</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-937d1bcd-2d4f","src":"https://youtu.be/8oYVMQ3sOc8?t=2209","provider":"youtube","startTime":2209,"poster":"https://i.ytimg.com/vi/8oYVMQ3sOc8/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.1,"overlayIcon":true,"postDate":"2022-10-13T22:10:11+00:00","bgColor":"#010101"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-937d1bcd-2d4f" id="gs-video-gsbp-937d1bcd-2d4f"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/8oYVMQ3sOc8?t=2209" data-provider="youtube" data-start="2209" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/8oYVMQ3sOc8/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#010101;background-image:;opacity:0.1"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="patterns">Patterns</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Query Builder has many patterns. You can easily import them from <a href="https://greenshiftwp.com/documentation/get-started/library-of-templates-and-wireframes/" data-type="documentation" data-id="3827">Library - FSE Templates</a></p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-5f299465-4203","headingContent":"Combination with Animation addon"} -->
<h2 id="gspb_heading-id-gsbp-5f299465-4203" class="gspb_heading gspb_heading-id-gsbp-5f299465-4203 ">Combination with Animation addon</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Query grid has option for filter panel and Infinite scroll. Also, you can combine it with other blocks, for example, with Animation addon to add Batch scroll feature</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-cb49faea-54b8","videoid":3060,"src":"https://greenshiftwp.com/wp-content/uploads/2023/06/batchtoquery.mp4","provider":"video","postDate":"2022-10-13T22:10:11+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video video gspb_video-id-gsbp-cb49faea-54b8" id="gs-video-gsbp-cb49faea-54b8"><div class="gs-video-wrapper" itemscope><div class="gs-video-element" data-src="https://greenshiftwp.com/wp-content/uploads/2023/06/batchtoquery.mp4" data-autoplay="false" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-poster="" data-provider="video" data-overlay="false" data-lightbox="false"></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-c38a945b-65e6","headingContent":"Transformation to Slider/Carousel"} -->
<h2 id="gspb_heading-id-gsbp-c38a945b-65e6" class="gspb_heading gspb_heading-id-gsbp-c38a945b-65e6 ">Transformation to Slider/Carousel</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>You can easily transform grid to Slider and even more, you can synchronize two sliders, for example, this can be used to make complex Dynamic slider where thumbnails will be another query block</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":3061} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2023/06/SyncSliders.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-9648c15a-42e1","headingContent":"Advanced Placeholders and operators"} -->
<h2 id="gspb_heading-id-gsbp-9648c15a-42e1" class="gspb_heading gspb_heading-id-gsbp-9648c15a-42e1 ">Advanced Placeholders and operators</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Query builder has option to add chained Meta query conditions. There is also support for Placeholders. This can be used in different scenarios. For example, if you want to connect one post type to another. You can use {POST_ID} Check video with some details</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=K62P8EjsQlo\u0026t=12s","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=K62P8EjsQlo&t=12s
</div></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>There are other scenarios when placeholders are helpful. Especially when you need to get posts with date in meta fields, for example, on Event site.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Imagine that you have many events and you store date of finishing in meta field event_date. Now, you want to show all actual events. So, you need to compare current date and date which is stored in custom field. Setup will be next</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3062,"width":290,"height":512,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/06/metacondition-580x1024.jpg" alt="" class="wp-image-3062" width="290" height="512"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Please, note, that Wordpress supports operators for query class only when you save your dates in Y-m-d or Y-m-d H:i:s format. Also UNIX timestamp value is supported and this will be even better because you can use Time string placeholders. For example, {TIMESTRING:+1 month} will be converted to the current date + 1 month, so, you can show fresh events which will be finished in a month from the current date. You can also use Ranges, for this, divide two values by | symbol and use Operator BETWEEN or IN, NOT IN, NOT BETWEEN</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3063,"width":305,"height":508,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/06/querycont.jpg" alt="" class="wp-image-3063" width="305" height="508"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When you click on the special icon, you will find many placeholders and description of what they do. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Another common used placeholder is {CUSTOM:meta}. This allows to get value of meta field. Imagine, that you want to show all related products on product page which have the same _sku as current product _sku. So, you need to set in custom field key _sku and in value {CUSTOM:_sku}. This will compare current product's sku field and show all products with the same sku. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="wishlist-query">Wishlist Query</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Query builder can be used to show results from <a href="https://greenshiftwp.com/wishlist/" data-type="post" data-id="1229">Wishlist block</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="related-items">Related items </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Query Builder can be used to show related items of current post by taxonomy (for example, by category). You can also get all items from custom field by their ids. This can be useful if you use ACF relationship field that stores data as comma separated ids in custom field. This can be used for making custom related items. Use <strong>Ids relationship</strong> source in Query builder</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="child-or-sister-items">Child or Sister Items</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can get all child items of current page or all sister items (pages that have common parent)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="relationship-from-metabox-plugin">RelationShip from MetaBox plugin</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Query builder can be used to get related items from MetaBox Relationship addon.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For this, create relationship between two post types and copy its ID</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3261,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2022/10/relationship-1024x466.jpg" alt="" class="wp-image-3261"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In Query Builder, select Metabox Relationship source and set ID</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3262,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://greenshiftwp.com/wp-content/uploads/2022/10/relationship-1.jpg" alt="" class="wp-image-3262"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Drop Query builder inside Single post template or reusable template, or content of post and attach items to post. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3263,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://greenshiftwp.com/wp-content/uploads/2022/10/itemsrelation.jpg" alt="" class="wp-image-3263"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Query builder will show only selected items on Frontend. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-c9fd6858-7619"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-c9fd6858-7619" id="gspb_infoBox-id-gsbp-c9fd6858-7619"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>The backend Editor will show all items of the selected post type for preview purposes.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="hooks-and-filters-in-query-builder">Hooks and filters in Query Builder</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Query builder is a very powerful Swiss knife block for any loop maker. It has also a few filters and hooks which you can use to extend it or add compatibility with other plugins.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="how-to-show-post-classes-on-each-grid">How to show post classes on each grid</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By default, grid item shows only type of post and post id. But you can extend to show all categories, tags, etc. Here is snippet</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>add_filter('gspbgrid_item_class', 'gs_item_class', 10, 3);
function gs_item_class($class, $postid, $block_instance){
    $classnew = get_post_class('', $postid);
    $classnew = implode(' ', $classnew);
    $class = $class. ' '.$classnew;
    return $class;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Also, you can change $args of loop. We have filter and action for this. Example</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>add_filter( 'gspb_module_args_query', function( $args ) {
    if ( ! is_admin() ) {
        $args['wp_grid_builder'] = 'wpgb-content';
    }
    return $args;
});</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Previous example has change for global $args for all Query builder blocks. But also you can add specific changes for specific query block. You can limit it by ID of block. How to know ID? There is Filter block connection option in panel. You can copy there string. It will be like "gspb_filterid_gsbp-45e0c1e". Remove "gspb_filterid_" from string and you will get ID of block that you can use in filter</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>add_filter( 'gspb_module_args_query_id', function( $args, $id ) {
    if ( is_home() && $id == 'gsbp-45e0c1e' ) {
        $args['ignore_sticky_posts'] = 1;
    }
    return $args;
}, 10, 2);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This filter will change $args of WP_Query class before it runs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can also use action which will affect wp_query after WP_Query</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>add_action('gspb_after_module_args_query', function ($wp_query){
    return $wp_query;
});</code></pre>
<!-- /wp:code -->
«
»
,