Toggle Post Filter, Menu – Gutenberg Block

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

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.

Available Blocks

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.

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)”.

Please make sure you don’t use the “legacy” menu block. This block is still functional but its options have been migrated to the posts block.

Block Options (Menu Part)

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.

You find post-related options in the post (body) block.

Tags and Terms

Include taxonomies

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.

Include tags

Restricts the tags that should be used. If you leave this option empty, we use all tags of selected groups and taxonomies.

Exclude tags

Restricts the tags that should be excluded.

Logical operator

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.

Order tags by

Lets you determine the order of the tags (terms).

A custom sort order is available with a 3rd-party plugin.

Tag order

Whether to sort the tags in ascending or descending order.

Hide unused tags

Hide tags that are not being used in (public) posts.

Preset tags

Lets you initialize the filter with a selected toggle set to on. See the information under Preset Tags.

Groups

Include groups

Select tag groups that will be shown to visitors. By default all your groups will appear.

Text

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.

Caching

Caching time

Time in minutes that the selection of posts that match the search criteria should remain available for faster access on the server.

Remember selected filter and post (persistent filter)

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.

Posts

Static taxonomy

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.

Static terms

See static taxonomy above. Here you select the terms (tags, categories).

Labels and Messages

Title above the text search field.

Placeholder message for the text search field.

Layout

Menu layout

Layout of the menu part, containing the toggles.

  • classic: 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.
  • buttons: Like the classic layout, but instead of toggles we use buttons. Optionally show an icon on active buttons.
  • classic with tags: The menu is arranged like the “classic” layout. Tags appear in a tag shape and line up in rows (like in tag clouds).
  • 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.
  • wide with buttons: Like the “wide” layout, but instead of toggles we use buttons. Optionally show an icon on active buttons.
  • wide with tags: The menu is arranged like the wide layout. Tags appear in a tag shape and line up in rows (like in tag clouds).
  • slider left: The menu slides in from the left side, covering the contents of the page. The slider remains open while you click on the buttons so that you scroll through the search results while the menu remains open. Consider composing the page in a way that the slider doesn’t cover the posts.
    You close the menu by clicking on the X or outside the slider. For the slider you will also need the button to open the slider. The slider uses buttons with optional icons.
  • slider left with tags: The menu is arranged like the “slider left” layout. Tags appear in a tag shape and line up in rows (like in tag clouds).
  • slider right: The same as the left slider, opening from the right.
  • slider right with tags: The menu is arranged like the “slider right” layout. Tags appear in a tag shape and line up in rows (like in tag clouds).

Icon

Place an icon on active buttons. (Not available with toggles.) Some common icons are available as buttons. For other icons you need to convert the block to a shortcode.

Slider width

Set the width of the slider menu in pixels. Only available with the “slider left with tags” and the “slider right with tags” menu layouts.1

Tag color

Set the background color of the tags. Only available with the “slider left with tags” and the “slider right with tags” menu layouts.

Selected tag color

Set the background color of the tags that are toggled on in the filter. Only available with the “classic with tags”, “wide with tags”, “slider left with tags” and the “slider right with tags” menu layouts.

Theme

The plugin comes with two default themes, light and dark.

Hide toggles in an accordion

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.

Advanced Styling

You can set here classes to be referred to in CSS. You need some knowledge of CSS to create your own theme.2

div_class

Define a class for the <div>.

div_id

Define an ID for the enclosing <div>.

Footnotes

  1. In the other slider layouts the width is fixed.[]
  2. Unfortunately we are not able to provide assistance for customization. Please consult your web designer.[]

How do you rate this article?