Toggle Post Filter, Menu – Shortcode Parameters

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

Note: These shortcodes are also available as Gutenberg blocks. You can configure the block without using any code or parameters. Read more about the block options.

Note: This shortcode or block 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.

If you don’t know what is a shortcode and how to use it, you first may want to read this article.

Overview

You find here the overview of all shortcodes for the Toggle Post Filter.

Data Types

  • string: A text. For identifiers that won’t be visible to visitors you often have to replace spaces with _ or -. If the string contains spaces, you need to wrap it in quotes.
  • integer: A number without decimal places.
  • 0 or 1: 0 turns the feature off and 1 on.

Parameters

Tags and Terms

hide_empty

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

accepted valuesdefaultexample shortcode
integer1 (on)hide_empty=0

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

accepted valuesdefaultexample shortcode
stringINoperator="IN AND"

preset_tags

See the information under Preset Tags.

accepted valuesdefaultexample shortcode
stringnonepreset_tags="tag-slug-1,tag-slug-2"

term_orderby

Lets you determine the order of the tags (terms). You can modify the tags’ slugs or descriptions in order to achieve the required order.

optiondescription
name tag name
naturalnatural sorting, e.g. “3” before “12”
slug see on the Tags page
term_id term ID
description see on the Tags page
count post count
term_orderA custom sort order is available with a 3rd-party plugin.
accepted valuesdefaultexample shortcode
stringnameterm_orderby=natural

term_order

Whether to sort the tags in ascending or descending order.

accepted valuesdefaultexample shortcode
string (“asc” or “desc”, capitalization doesn’t matter)ASCterm_order=asc

taxonomy

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

accepted valuesdefaultexample shortcode
comma-separated list of taxonomy namesTaxonomies selected in the settings under “Basics”.taxonomy=post_tag,product_tag

include_terms

Select terms (tags) that should be included. Empty means all.

accepted valuesdefaultexample shortcode
comma-separated list of integersempty (=all)include=1,5,9

exclude_terms

Select terms (tags) that should be excluded. Empty means none.

accepted valuesdefaultexample shortcode
comma-separated list of integersempty (=none)include=1,5,9

static_taxonomy

Optionally filter also by terms (tags, categories, …) of an additional taxonomy (not necessarily one of the taxonomies used for tag groups). That way you can narrow down the total sample of filtered posts.

Used together with static_terms.

accepted valuesdefaultexample shortcode
stringnonestatic_taxonomy=category

static_terms

Used together with static_taxonomy. This parameter lists the IDs of the additional tags, categories, … that should be present in all posts used by the filter.

accepted valuesdefaultexample shortcode
comma-separated list of integersnonestatic_terms=42,255

Groups

accordion

Display the menu as an accordion. Please note that also hidden toggle switches are effective.

accepted valuesdefaultexample shortcode
integer0 (off)accordion=1

include

Tag groups that will be shown to visitors. Groups without tags will be hidden.

In the short code you use the IDs, which you find in the left column in the list of groups. Empty or not used means that all tag groups will be used.

accepted valuesdefaultexample shortcode
comma-separated list of integersempty (=all)include=1,5,9

Layout and Theme

layout

  • classic: The menu items appear vertically stacked in a narrow container. Posts have space to display on the right side. If you select “classic” for the menu, also the body part with the posts should use the “classic” layout.
  • button: Like the classic layout, but instead of toggles we use buttons. Optionally show an icon on active buttons.
  • classic_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_button: Like the wide layout, but instead of toggles we use buttons. Optionally show an icon on active buttons.
  • wide_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 default slider uses buttons with optional icons.
  • slider_left_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_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).
accepted valuesdefaultexample shortcode
stringclassiclayout=wide

icon_class

Use the identifier (the part in lowercase letters with dashes) to place an icon on active buttons. (Not available with toggles.)

often used: dashicons-tag, dashicons-yes, dashicons-yes-alt, dashicons-heart, dashicons-arrow-left, dashicons-arrow-right, dashicons-thumbs-up

accepted valuesdefaultexample shortcode
stringemptyicon_class=dashicons-tag

slider_width

Set the width of the slider menu in pixels. Only available with the slider_left_tags and the slider_right_tags menu layouts.1

accepted valuesdefaultexample shortcode
integer600slider_width=300

tag_color

Set the background color of the tags. Only available with the classic_tags, wide_tags, slider_left_tags and the slider_right_tags menu layouts.

accepted valuesdefaultexample shortcode
string600tag_color="#ddd"

selected_tag_color

Set the background color of the tags that are toggled on in the filter. Only available with the classic_tags, wide_tags, slider_left_tags and the slider_right_tags menu layouts.

accepted valuesdefaultexample shortcode
string600selected_tag_color="#d00"

theme

Available are “light” and “dark”.

accepted valuesdefaultexample shortcode
stringlighttheme="dark"

Caching

caching_time

Time in minutes that results remain in the cache.

accepted valuesdefaultexample shortcode
integer10caching_time=10

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 now post has been clicked, 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 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.

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

accepted valuesdefaultexample shortcode
integer0 (off) persistent_filter=30

Text Search

Enable text search and determine when the search should start.

0: off
1: launch by pressing enter
2: launch by pressing enter or pause typing

accepted valuesdefaultexample shortcode
integer0text_search=2

Labels and Messages

Placeholder message for the text search field.

accepted valuesdefaultexample shortcode
string“type here”placeholder_text_search="try word or -word"

Advanced Styling

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

div_class

Define a class for the <div>.

accepted valuesdefaultexample shortcode
stringdpf_toggle_menu_lightdiv_class="dpf_toggle_menu_dark"

div_id

Define an ID for the enclosing <div>.

accepted valuesdefaultexample shortcode
stringemptydiv_id="my_own"

Footnotes

  1. In the other slider layouts the width is fixed.[]

How do you rate this article?