Valentines Day Sale

Save 25% on TaxoPress with this coupon:

LOVEWORDPRESS

Buy Now
TaxoPress
reorder
  • Features
  • Docs
  • Blog
  • Support
  • Login
  • Get TaxoPress Pro

Tag Groups: Getting Started

  • Introduction to Tag Groups
  • Installation of Tag Groups
  • First Steps With Tag Groups
  • Design and Colors in Tag Groups
  • Feature Overview (Free Version)
  • Glossary of Useful Words for Tag Groups

Working with Tag Groups

  • Creating and Editing Groups
  • Working with Tags
  • Use the Posts Filter for Tags
  • Use the Groups Filter for Tags
  • Bulk Actions in Tag Groups
  • Back End Post Filter
  • Organizing Groups with a Parent Level
  • Using the Tag Meta Box on the Post Edit Screen
  • Translating Tag Group Names with WPML

Tag Groups: Front End Features

  • Integration with WooCommerce
  • Post Tags: Show Tag Groups on Posts
  • Theming: Design and Colors
  • Using the Post Filter on the Front End
  • How To Use Gutenberg Blocks With Tag Groups
  • How to Use Shortcodes With Tag Groups

Accordion Tag Cloud

  • Accordion Tag Cloud – Overview
  • Accordion Tag Cloud – Gutenberg Block
  • Accordion Tag Cloud – Shortcode Parameters

Alphabetical Tag Index

  • Alphabetical Tag Index – Overview
  • Alphabetical Tag Index – Gutenberg Block
  • Alphabetical Tag Index – Shortcode Parameters

Alphabetical Tag Cloud

  • Alphabetical Tag Cloud – Overview
  • Alphabetical Tag Cloud – Gutenberg Block
  • Alphabetical Tag Cloud – Shortcode Parameters

Tabbed Tag Cloud

  • Tabbed Tag Cloud – Overview
  • Tabbed Tag Cloud – Gutenberg Block
  • Tabbed Tag Cloud – Shortcode Parameters

Tag Groups Info

  • Tag Groups Info – Overview
  • Tag Groups Info – Shortcode Parameters

Tag List

  • Tag List – Overview
  • Tag List – Gutenberg Block
  • Tag List – Shortcode Parameters

Dynamic Post Filter (Pro)

  • Dynamic Post Filter – Overview
  • Dynamic Post Filter – Gutenberg Block
  • Dynamic Post Filter – Shortcode Parameters

Post List (Pro)

  • Post List – Overview
  • Post List – Gutenberg Block
  • Post List – Shortcode Parameters

Shuffle Box (Pro)

  • Shuffle Box – Overview
  • Shuffle Box – Gutenberg Block
  • Shuffle Box – Shortcode Parameters
  • Create a Custom Color Scheme for Shuffle Box
  • Hide the “not assigned” button in the Shuffle Box

Simple Tag Cloud (Pro)

  • Simple Tag Cloud – Overview
  • Simple Tag Cloud – Gutenberg Block
  • Simple Tag Cloud – Shortcode Parameters

Tag Cloud Search (Pro)

  • Tag Cloud Search – Overview
  • Tag Cloud Search – Gutenberg Block
  • Tag Cloud Search – Shortcode Parameters

Tag Groups Menu (Pro)

  • Tag Groups Menu – Overview
  • Tag Groups Menu – Shortcode Parameters

Toggle Post Filter (Pro)

  • Toggle Post Filter – Overview
  • Toggle Post Filter – Overview of Shortcode Parameters
  • Toggle Post Filter, Body (Posts) – Gutenberg Block
  • Toggle Post Filter, Body (Posts) – Shortcode Parameters
  • Toggle Post Filter, Text Search – Gutenberg Block
  • Toggle Post Filter, Text Search – Shortcode Parameters
  • Toggle Post Filter, Slider Button – Gutenberg Block
  • Toggle Post Filter, Slider Button – Shortcode Parameters
  • Toggle Post Filter, Order Menu, Gutenberg Block
  • Toggle Post Filter, Order Menu – Shortcode Parameters
  • Toggle Post Filter, Menu – Gutenberg Block
  • Toggle Post Filter, Menu – Shortcode Parameters
  • Toggle Post Filter, Reset Button – Shortcode Parameters

Tag Groups: For Developers

  • Constants
  • Modifying the Post Query
  • Modifying the Term Query
  • Theme Modifications (PHP)
  • Filters and Actions (Hooks)
  • REST API

Tag Groups: Settings

  • Home
  • Taxonomies
  • Front End
  • Back End
  • Tools
  • Troubleshooting

Tag Groups: Instructional Videos

  • Installation and Getting Started (Free Version)
  • Installation and Setup
  • 1. Installation and First Use
  • 2. How to use the Tag Meta Box
  • 3. How to use the Shuffle Box
  • 4. How to use the Toggle Post Filter
  • Videos About the Premium Version

Tag Groups: Frequently Asked Questions

  • How to … ? Which feature is the right for me?
  • Can I use the plugin with more than one taxonomy?
  • Can I use the plugin with pages?
  • Can I use the plugin with categories?
  • Can I use tag groups with custom taxonomies?
  • Can I have multiple levels of tag groups (parents)?
  • Where can I find a WordPress developer or web designer for customization?
  • How to display tags in a custom sort order?
  • How do I add custom CSS?
  • How to Make the Alphabetical Tag Index or the Tag List Responsive?
  • Can I use tag groups with custom taxonomies?
  • Can I have multiple levels of tag groups (parents)?
  • Where do I find the IDs of WordPress tags, posts or categories?
  • How can I display a tag cloud in a widget?
  • Can I use the plugin with more than one taxonomy?
  • Can I use the plugin with categories?
  • Can I use the plugin with page tags?
  • What are the minimum system requirements to install Tag Groups?
  • How can I customize a Gutenberg Block beyond the given options?
  • “The free Tag Groups plugin cannot be active together with Tag Groups Premium.”
  • Does Tag Groups work with the Polylang plugin?
  • Where can I get customization of the plugin code?

Tag Groups: Troubleshooting

  • “Error loading block: The response is not a valid JSON response.”
  • Shortcodes (tabs, accordion or other) don’t work in (sidebar) widgets
  • I cannot use multiple tag clouds on the same page
  • I use a plugin to aggregate inline JS and the cache size grows rapidly
  • I don’t see all tags in the Tag Meta Box
  • How To Use The Debug Log?
  • The plugin changes design elements (accordions, tabs, sliders, buttons, handles) in other places of my site
  • When I click on a tag in the tag cloud, the list of posts is empty or incomplete
  • Some shortcode parameters are not effective
  • There is a gray box around the tag cloud or the tabs or accordion are messed up
  • Instead of the tag cloud the page just renders an empty space
  • I cannot save HTML in the tag description
  • Where are my tags? My tags are gone
  • The processes in Troubleshooting – First Aid don’t complete
  • Authors cannot add tags to groups
  • Tag Cloud: When I Click on a Tag, the Posts Don’t Differentiate by Groups
  • I don’t see any or all posts
  • Debugging a WordPress Ajax Error
  • The list on the Tag Groups Administration page doesn’t load. I see the wheel spinning forever or an error message

Tag Clouds and Tag Lists

  • How to display tags in a custom sort order?
  • Can I use the shortcodes or Gutenberg blocks multiple times on the same page?
  • Where do I find the IDs of tags, posts or categories?
  • How can I display a tag cloud in a widget?
  • Can I have two tag clouds on the same page?
  • How can I change the text in the Shuffle Box?

Post Filters

  • How can I display the posts in custom order?
  • How can I change the length of the post excerpts?
  • How to change the size of the first posts in the masonry layout of the Toggle Post Filter
  • How to limit the size of the menu in the Dynamic Post Filter?
  • How can I change the text in the Dynamic Post Filter?

Tag Groups: CSS and Styling

  • How do I add custom CSS?
  • How to Make the Alphabetical Tag Index or the Tag List Responsive?
  • How do I change the styling of the post tags under the posts?
  • How can I change the colors and other styling?

Administration

  • What is a tag slug?
  • How can I show less tag groups on the back end?
  • How can I use permissions to restrict editing of tag groups?

Tag Groups: Maintenance and Optimization

  • How to Reduce the Number of Loaded Scripts for Better Speed and SEO
  • How to improve the performance of the Toggle Post Filter/Dynamic Post Filter
  • Running Maintenance
  • How to Improve the Speed of Tag Clouds
  • Migrating your Tags and Posts
  • Home
  • TaxoPress Documentation
  • Tag Groups
  • Tag Groups: Front End Features
  • Toggle Post Filter (Pro)
  • Toggle Post Filter – Overview

Toggle Post Filter – Overview

The Toggle Post Filter is a frontend feature where visitors select tags and enter text and then see a list of posts that match the search criteria.

Instructions

To insert the Toggle Post Filter into a page, you can use either shortcodes or Gutenberg blocks. If you don’t feel comfortable with searching and configuring shortcode parameters, Gutenberg is the recommended path to follow.

For this tool you need to insert at least two blocks or shortcodes: One for the filter menu and one for the post block (body). Optionally you can also insert one for messages about how many posts were found, a pull-down menu to change the sort order and a reset button. If you use the slider layout, you also need a button to open the slider. Keeping these blocks separate makes it possible to freely arrange the components in your page layout.

The menu and the body parts of the vertical (“classic”) layout can be placed in columns side by side.

If groups become too long or have a different height in wide layout, try if the accordion option makes sense here.

Please make sure that you have published posts that use the tags that you see in the menu. If you still don’t see the posts, you may need to use the First Aid buttons in the Troubleshooting menu.

Settings and Parameters

For all available options, see

  • the settings of the Gutenberg block
  • the list of shortcode parameters

Common Settings

  • included taxonomies: Most sites show default WordPress posts. If you want to show products or gallery items or other post types, you will need to select the corresponding taxonomy here: product_tag, xyz_tag
  • logic operator: Select here how matching posts should be determined from the tags. A more fine-grained configuration per group is available in the shortcode.
  • included groups: Narrow down the tag groups that should be used.
  • select only one tag: It is possible to have one or more groups where visitors can select only one tag.
  • text search: Optionally show a text search field. The search term will be connected with the other search criteria using the logic operator AND (refine the results). Search is triggered on pressing enter, optionally also after you stopped typing. Use a dash in front of the search term to exclude it (AND NOT).
  • caching: Speed up complex searches by caching the results on your server. You can also save the selected search criteria for each visitor with the “persistent filter” option. When they click through to a post and then return to the list, they continue where they left off.
  • initially show all posts: This option lets you show all posts when no toggle is set, rather than showing an empty box with a placeholder message. This provides a “filter” experience, rather than searching.
  • pager: Shows arrows to load more or go back or a pagination by page numbers. Without a pager the rest of the list will be cut off. You can also set the number of posts per page.
  • total amount: Optionally show a message about the total amount. You can use the extra block or shortcode for the message or display it in a an overlay (popup). This text can be customized for singular and plural.
  • layout: There are several layouts for the menu part and for the post part. The menu can also be configured to hide tags in an accordion under each group. Hidden toggle switches are also effective.
  • themes: Two out-of-the-box themes are available, light and dark. You set them with the “theme” parameter.
  • post template: Here you can configure what every post should element look like. You can also edit the HTML for the posts in the Tag Groups settings (go to Front End, Post Filter).
  • hide toggles in an accordion: If you use many tags in a group, the list of toggles might become very long. The accordion option lets you show only group labels and hide all toggles in “drawers”.

Further Notes

  • Toggles (tags) can be sorted by name, slug, ID, description or post count.
  • Use include tags (terms) and exclude tags (terms) to fine-tune the available tags.
  • With knowledge of CSS you can create your own themes. ((Unfortunately we are not able to help with customizations. Please consult your web designer.)) Toggle switches are HTML checkboxes.
  • This post filter can only be used once on each page (including widgets), and it cannot be used together with the shortcode or block of the Dynamic Post Filter.
  • If you sort posts randomly, you should disable the pager since for each page the order of all posts across all pages is randomized again.

Performance

Please note that it is unavoidable that complex queries take some time to process in the database. That is particularly the case if many tags are selected in multiple groups. The search, including tags and text, makes use of default WordPress post queries, which are already optimized for use on busy websites.

There are several ways how to improve performance:

  1. Utilize server caching: With server caching we avoid executing the full database request multiple times for identical searches. In the Gutenberg block you set the caching time under Caching and Performance, in the shortcode with caching_time.
  2. Optimize the database: The speed of database queries can greatly be improved by adding an index to the postmeta table. For this solution you might need the help of your system administrator who can run SQL queries on your database. See here for more details.
  3. Reduce redundant queries: Visitors often want to search for a combination of tags and text and we don’t need to kick off that search until they are done making their selection. We achieved this through a timeout (by default one second) of inactivity before we send the query to the server. We dynamically increase this timeout if we notice that a visitor selects many tags or doesn’t seem to be sure which options to choose.((since version 1.40.1)) If you still see too many premature server queries you can increase the value for the timeout (in the block under Caching and Performance, in the shortcode use timeout).((since version 1.40.1)) Try to find a good balance between a responsive search for a good user experience and a reduction of redundant requests to the server.
  4. Optimize images: When posts are rendered, the browser also retrieves the images from the web. In the post templates try to use only image formats as large as it makes sense. Furthermore it is recommended to optimize image files for smaller size without compromising on quality.((There are free plugins that let you do that.))

Preset Tags

Sometimes it comes in handy to preset tags for new visitors arriving at that page. Visitors will see the corresponding posts and can then change the filter.

There are two ways how to preset these initial tags: in the block/shortcode and via a URL parameter. In both cases you use the tag slug, which you find for each tag on the tags page. Multiple tags can be added in a comma-separated list.

In the Gutenberg block you select the tags in “Preset tags”.

In the shortcode for the menu part you enter:

[[tag_groups_dpf_toggle_menu preset_tags="tag-slug-1,tag-slug-2"]]

Or you add the URL-Parameter to the URL of the page where you show the Toggle Post Filter:

www.example.com/page-with-dynamic-post-filter/?presettags=tag-slug-1,tag-slug-2

If both the block/shortcode parameter and the URL parameter are set, we will use only the latter one.

Please note that preset tags are only effective when someone visits the page for the first time. When later returning to this page, some browsers keep the previous selection of toggles in the cache.

In the case that you also use the persistent filter (which is by default on – disable it with persistent_filter=0), the saved filter also takes priority over the preset tags. This means that visitors who made a selection and head over to a post will see their own selection when returning, rather than the preset tags. While you are testing the page, it might therefore help to temporarily disable the persistent filter or set it to a very low value.

If you preset a tag, this tag is effective for all groups where it appears. It is not possible to turn on the toggle only in one group while the same tag would be off in another group.

Alternatives

If you don’t want your visitors to select tags with a toggle (on-off) switch but to enter them into a tag field, you could take a look at the Dynamic Post Filter.

If you don’t need the interactivity of a filter where posts respond live to search criteria, you may want to check out the Post List.

You can also use one of the tag clouds. They are highly customizable so that you can, for example, display all tags in the same size or prepend to each the same character. With the tag clouds, however, visitors don’t see immediately the list of matching posts. Instead, a click on the tag takes them to another page, where all posts are listed that use this tag.

Common Issues and Solutions

If no tags or no posts appear, please make sure that

  • you have selected the correct taxonomy. If you need something else than the default post_tag, use the taxonomy parameter;
  • you have assigned your tags to groups;
  • you use these tags in published posts.

If that still doesn’t help, you may want to try the buttons on the Troubleshooting page (particularly if you installed the plugin on a site with existing content and the meta data has not yet been generated).

Tags: Gutenberg

Recent Posts

  • How to Show WordPress Posts With a Specific Taxonomy Term November 11, 2022
  • How to Use the Site Editor to Design WordPress Taxonomy Archives November 9, 2022
  • What Characters Are Allowed in WordPress Taxonomy Terms? October 26, 2022
  • The Tag Groups Plugin is Now Part of TaxoPress October 14, 2022
  • How to Merge Similar Taxonomy Terms in WordPress September 14, 2022

Testimonials

I had a support issue and the response was same day. I find the plugin extremely fast and easy to implement.

stevenmayjr

This plugin is the best available for suggesting tags, is also easy to install and use. Highly recommended.

supertrooper2

Search TaxoPress.com

Important Links

  • Frequently Asked Questions
  • About the TaxoPress Team
  • Terms of Service
  • TaxoPress Affiliates
  • Logo and Brand Materials

Our Projects

  • PublishPress
  • MetaSlider
  • KinshiPress
  • Ramble Ventures
  • Logtivity