Toggle Post Filter – Gutenberg Block
Note: The Toggle Post Filter can only be used once on a page (including widgets), and it cannot be used together with the shortcode or block of the Dynamic Post Filter.
This feature consists of four blocks that you can place at different locations of the page, including widgets. The main part is the menu block and here you supply almost all parameters.
- Toggle Post Filter – Menu (required)
- Toggle Post Filter – Posts (required)
- Toggle Post Filter – Message Field (optional)
- Toggle Post Filter – Reset Button (optional)
Instead of the Reset Button block you can also use the default WordPress button block and enter “tg_dpf_toggle_reset_button” as “Additional CSS class(es)”.
The following options appear in the editor side panel after you selected a block. Some of them appear only when you activated the corresponding function. For example, you can set the title of the search field only after you activated text search.
Use only tags from selected taxonomies (“tag types”). Available are only taxonomies that have been enabled in the Settings. If you leave this option empty, we use all enabled taxonomies.
Restricts the tags that should be used. If you leave this option empty, we use all tags of selected groups and taxonomies.
Restricts the tags that should be excluded.
How the tags should be logically connected. Possible values are:
- any tag matches (“IN”/”OR”): One or more tags in any group must match the post tags for a post to be displayed.
- all tags match (“AND”): All tags across all tags must match.
- at least one tag matches from each group (“IN AND”):
Groups where no tags are selected won’t be considered. If you use AND or IN AND on five groups and a visitors selects only tags from the first two groups, they may already see posts. The unused other three groups don’t count in.
Lets you determine the order of the tags (terms). If you need a custom order, you can write numbers into the tags’ description and then sort by description.
Whether to sort the tags in ascending or descending order.
Hide tags that are not being used in (public) posts.
Lets you initialize the filter with a selected toggle set to on. See the information under Preset Tags.
Select tag groups that will be shown to visitors. By default all your groups will appear.
Adds a text search field at the beginning of the menu. The entered word can be prepended with a minus so that it will be excluded. The logical connection with other search criteria is always AND, which means that the text search can narrow down the list of posts that was determined by the other search criteria.
Options:
- off: no text field appears
- on enter: Search begins when you press ‘enter’.
- on enter or timed: Search begins when you press ‘enter’ or when you pause typing.
Time in minutes that the selection of posts that match the search criteria should remain available for faster access on the server.
The Toggle 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. If no post has been clicked, the page will scroll to the group selection menu.
This option requires that visitors accept cookies in their browsers. If you are using this filter more than once on your site, you should use different values for div_id so that each filter uses a different cookie.
Show a list of posts if all toggles are off and not text search is in use. This will contribute to a real “filter” impression. That means that you start out from the entirety of posts and use search criteria to narrow them down.
Set the maximum number of posts per page.
If the pager is enabled then visitors can load the next or previous page. Please note that for a random post order the posts will be randomized for each page and the same post might therefore appear on different pages.
Which field to use for sorting posts.
Whether to sort the posts in ascending or descending order. Ascending order also means from oldest to newest.
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.
Transition when loading the list of posts.
Optionally filter also by terms of an additional taxonomy (not necessarily one of the taxonomies used for tag groups). You can, for example, show only posts that belong to a particular category.
See static taxonomy above. Here you select the terms (tags, categories).
HTML code that contains some placeholders. Leave empty to use the default template. It is recommended to edit the template 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_excerpt_html} (preserves most common html tags), {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}.
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">
<a href="{permalink}" rel="bookmark"><img src="{image_src|100x100}" alt="{image_alt}" class="tg-entry-image" /></a>
<h3 class="tg-entry-title"><a href="{permalink}" 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>Example of a template with a big image on top:
<header class="tg-entry-header">
<a href="{permalink}" rel="bookmark"><img src="{image_src|100%xauto}" alt="{image_alt}" style="border: solid 1px #ccc; border-radius:7px;" /></a>
<h3 style="margin:0.8em 0 0;display:inline-block;"><a href="{permalink}" rel="bookmark">{post_title}</a></h3>
<h4 style="font-size:12px; margin:0.5em 0;">{post_date} | {post_category}</h4>
</header>Placeholder message for the list of posts.
Title above the text search field.
Placeholder message for the text search field.
Message to show if no posts were found. This will also be used for the overlay notification.
Label of the link to load more posts, if the pager is active.
Label of the link to go back, if the pager is active.
Message if one post was found, if the option “Display the total amount of posts” is enabled.
Message if many posts were found, if the option “Display the total amount of posts” is enabled. May contain the placeholder {count}
Layout of the menu part, containing the toggles.
- classic: This is the previously known layout. The menu items appear vertically stacked in a narrow container. Posts display on the right side. If you select “classic” for the menu, also the body part with the posts should use the “classic” layout.
- wide: Groups are lined up horizontally. Posts should display below the menu. If you select “wide”, the post layout can be any of wide, boxed, columns, columns-avoid-break and masonry.
Layout of the body part, containing the posts.
- classic: Posts appear stacked on each other in a narrow container. If you select “classic” for the posts, also the menu should display as “classic” layout.
- wide: Posts appear stacked on each other in a wide container.
- boxed: Posts appear in rows. Posts should approximately have the same size, otherwise you will see empty spaces.
- columns: Posts appear in 1-3 rows (depending on the screen size), each row from top to bottom.
- columns (avoid splitting posts): Same as “columns”, but we try to avoid splitting posts over different columns. This layout makes it clearer which parts belong to a post but it might lead to empty spaces at the bottom.
- masonry: Posts arrange as tiles, from top to bottom, trying to fill the slots equally. The post order may therefore change.
Display each group as an accordion where toggles are hidden under the group label. If you use the option “Remember selected filter and post”, all groups that contain active toggles will be open.
Please note that also hidden toggle switches are effective.
You can set here classes to be referred to in CSS. For the default themes you use dpf_toggle_menu_light or dpf_toggle_menu_dark in the div_class. You need some knowledge of CSS to create your own theme.1
Define a class for the <div>.
Define an ID for the enclosing <div>.