Toggle Post Filter – 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.

Shortcodes

This feature consists of three shortcodes that you can place at different locations of the page, including widgets. The main part are tag_groups_tpf_menu and tag groups_tpf_body where you supply most parameters.

[tag_groups_tpf_menu]
[tag_groups_tpf_body]
[tag_groups_tpf_messages]

There is also an optional fourth shortcode that displays a reset button:1

[tag_groups_tpf_reset]

Note: Old shortcodes with the pattern tg_dpf_toggle_… still remain functional.

Examples

[tag_groups_tpf_messages]

Now here comes the filter part:

[tag_groups_tpf_menu caching_time=60 display_amount=1 pager=1 persistent_filter=60 div_class="dpf_toggle_menu_dark" transition=fade operator="IN AND"]

And the posts go to a place that is sufficiently large:

[tag_groups_tpf_body div_class="dpf_toggle_menu_dark"]

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 – Menu Part

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

preset_tags="tag-slug-1,tag-slug-2"

See the information under Preset Tags.

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 
naturalnatural sorting, e.g. “3” before “12”
slug 
term_id 
description 
count 
accepted valuesdefaultexample shortcode
stringnameterm_orderby=name

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

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

Posts

default_show_posts

Show a list of posts if no filter is active. This will contribute to the impression that you filter the entirety of posts by reducing their number.

accepted valuesdefaultexample shortcode
integer0 (=off)default_show_posts=1

caching_time

Time in minutes that results remain in the cache.

accepted valuesdefaultexample shortcode
integer10caching_time=10

layout

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

example:

layout=wide

posts_per_page

How many posts appear under the filter. Use -1 to show all.

Please note that high numbers of posts may impact the performance.

Tip: If you use the parameter “display_amount” you can reduce the additional database request by using posts_per_page=-1 instead of a high number of posts.

accepted valuesdefaultexample shortcode
integer5posts_per_page=10

pager

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

accepted valuesdefaultexample shortcode
integer0pager=1

orderby

Which field to use for sorting.

optionnotes
author 
date 
modified 
randrandom order; recommended to use also a small value for caching, for example caching_time=10. Don’t disable caching if you activated paging.
title 
comment_count 
accepted valuesdefaultexample shortcode
stringdateorderby=title

order

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

accepted valuesdefaultexample shortcode
stringDESCorder=asc

display_amount

Whether to display how many posts were found. If the pager is off, this will be the number of displayed posts.

  • 0: off
  • 1: This line will appear in a separate field that you create with the messages shortcode.
  • 2: The message will appear for three seconds in an overlay. If you use the messages shortcode, it will also appear there.
accepted valuesdefaultexample shortcode
0, 1 or 20display_amount=1

template

HTML code that contains some placeholders. Leave empty to use the default template. It is recommended to edit it in the settings.

The default template shows every post with a thumbnail – see below. Possible placeholders are: {post_id}, {post_title}, {permalink}, {post_excerpt} (automatically generated), {post_excerpt_html} (preserves most common html tags), {post_date}, {post_author}, {image_src} or {image_src|100×100}, {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.

accepted valuesdefaultexample shortcode
stringsee belowtemplate='<a href="{post_guid}">{post_title}</a>'

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>

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

transition

Transition between loading the list of posts.

accepted valuesdefaultexample shortcode
stringnonetransition=fade

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.

accepted valuesdefaultexample shortcode
stringnonestatic_taxonomy=category

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.

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

Other

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

Labels and Messages

Placeholder message for the text search field.

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

posts_placeholder

Placeholder message for the list of posts.

accepted valuesdefaultexample shortcode
string“Please select a group.”posts_placeholder=""

message_nothing_found

Message to show if no posts were found.

accepted valuesdefaultexample shortcode
string“Nothing found.”message_nothing_found=""

message_load_more

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

accepted valuesdefaultexample shortcode
string“Load more”message_load_more=""

message_go_back

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

accepted valuesdefaultexample shortcode
string“Go back”message_go_back=""

message_amount_singular

Message if one post was found, if display_amount is active.

accepted valuesdefaultexample shortcode
string“1 post found.”message_amount_singular="One recipe found."

message_amount_plural

Message if many posts were found, if display_amount is active. May contain the placeholder {count}

accepted valuesdefaultexample shortcode
string“{count} posts found.”message_amount_plural="We found {count} recipes."

Advanced Styling

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

For the default themes you use dpf_toggle_menu_light or dpf_toggle_menu_dark.

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”

Parameters – Body Part

layout

  • 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-keep-together: 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.
  • masonry-small: Masonry with smaller items.
  • masonry-large: Masonry with larger items.

example:

layout=masonry

Advanced Styling

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

div_id

Define an id for the enclosing <div>.

accepted valuesdefaultexample shortcode
stringtag_groups_dpf_toggle_bodydiv_id=“something”

div_class

Define a class for the enclosing <div>.

accepted valuesdefaultexample shortcode
stringdpf_toggle_menu_lightdiv_class=“my-theme”
Show 1 footnote
  1. Any button with the class “tg_dpf_toggle_reset_button” will work as reset button.

How do you rate this article?