Dynamic Post Filter – Gutenberg Block

This is a feature of the premium plugin. Tag Groups Premium

Note: This block can only be used once on a page (including widgets), and it cannot be used together with the shortcode or block of the Toggle Post Filter.

Block Options

The following options appear in the editor side panel after you selected a block.

Tags and Terms

Include taxonomy

Restrict the tags only to these taxonomies. Available are only taxonomies that have been activated in the Settings.

Logical operator

How the tags should be logically connected. Possible values are “IN” (At least one tag matches.), “AND” (All tags match.) and “IN AND” (At least one tag from each group matches).

Groups

Include groups

Restrict the posts to those having tags in these groups.

Initially open

Tag groups that are initially open.

Show groups only

Skip the tag selection and display all products that match the selected groups.

Hide the close buttons

Disables the possibility to remove the input fields of groups. You can use that option if you want to show a fixed set of groups that cannot be altered by visitors.

Posts

Posts per page

How many posts appear under the filter.

Use a pager

If the pager is enabled then visitors can load the next or previous page.

Caching time

Time in minutes that results remain in the cache on the server.

Order posts by

Which field to use for sorting.

Sort order

Whether to sort the posts in ascending or descending order. Ascending order also means from oldest to newest.

Display how many posts were found

This line will appear in a separate field that you create with the messages block. The message itself can be customized in the “Labels and Messages” menu.

From version 1.28.0: You can optionally display the message in an overlay notification that remains visible for three seconds. This is particularly useful for mobile devices, because your visitors will receive a feedback of their search even if the message and posts blocks are outside of their screen (viewport). You can select this option and omit the message block to show only overlay notifications.

When you use a pager, the number will be the total amount. Otherwise it’ll be the amount of visible posts, that is maximum what you choose for Posts per Page.

Post template

HTML code that contains some placeholders. Leave empty to use the default template. You can edit it also in the settings.

The default template shows every post with a thumbnail – see below. Possible placeholders are: {post_id}, {post_title}, {post_guid} (link to the post, {post_excerpt} (automatically generated), {post_date}, {post_author}, {image_src} or {image_src|100×100} (followed by the dimensions – will create also width and height attributes), {image_alt}, {post_category}. Make sure that single or double quotes appear only once as initial and final delimiters, while the other type of quotes can be used inside the template code.

Example for an image tag:

<img src={image_src|100×150}alt={image_alt}class=”tg-entry-image” />

Default template:

<header class="tg-entry-header">
<img src="{image_src|100x100}" alt="{image_alt}" class="tg-entry-image" />
<h3 class="tg-entry-title"><a href="{post_guid}" rel="bookmark">{post_title}</a></h3>
Posted on {post_date} by {post_author}.
<p>{post_category}</p></header>
<div class="tg-entry-content"><p>{post_excerpt}</p></div>

Transition

Transition between loading the list of posts.

Static taxonomy

Optionally filter also by terms of an additional taxonomy (not necessarily one of the taxonomies used for tag groups). Used together with static terms.

Static terms

Optionally filter also by terms of an additional taxonomy (not necessarily one of the taxonomies used for tag groups). Used together with static taxonomy.

Other

Remember selected filter and post

The Dynamic Post Filter can optionally remember the selection of groups and tags so that your visitors who clicked on an article and then return to this page will see the same list of articles again. After loading, the page will scroll to the group selection menu. (Otherwise the browser might go to a random post, depending on the loading speed.)

The data is saved in a browser cookie. If you use several Dynamic Post Filters on your site, you should give each a different div_id so that each will have its own cookie.

The value is the time in minutes. Zero means off.

Labels and Messages

Placeholder for tag field

Placeholder message in the tag input field. It disappears as soon as you enter tags.

Placeholder for posts field

Placeholder message for the list of posts.

Label for default option

What the pull-down menu should show if no group is selected.

Header above groups

Header above the list of selected groups.

Alert to use only existing tags

Error message if user tries to enter a tag that doesn’t exist.

Alert to use only tags from correct group

Error message if user tries to enter a tag from another group.

Message if nothing was found

Message to show if no posts were found. This will also be used for the overlay notification.

Link to load more posts

Label of the link to load more posts, if the pager is active.

Link to load previous posts

Label of the link to go back, if the pager is active.

Message for one post in total

Message if one post was found, if “Display the total amount of posts” is active.

Message for {count} posts in total

Message if many posts were found, if “Display the total amount of posts” is active. May contain the placeholder {count}

Advanced Styling

Use styling for selector.

Changes the default select menu to a more stylish one.

You can set here classes to be referred to in CSS. You need some knowledge of CSS to use these options.

div class

Set a class for the <div>.

div id

Set an ID for the enclosing <div>.

How do you rate this article?