Alphabetical Tag Index – Gutenberg Block

This is a feature of the free and the premium plugins. Tag Groups Premium Tag Groups free

Block Options

The following options appear in the editor side panel after you selected a block.

Tags and Terms

Include taxonomies

Select the “tag type”. By default we use all that are enabled in the Tag Groups settings.

Smallest font size

Font size of the tags with the smallest post count.

Largest font size

Font size of the tags with the largest post count.

Tags per panel

Maximum number of tags per panel.

Order tags by

Field that we should compare when ordering the tag. If you choose “natural sorting” with “Tags per group” then the number will be determined after sorting by name (not natural sorting).

Sort order

ascending or descending order

Hide unused tags

Hide tags with a post count of zero.

Prepend

Character or text to place before each tag. You can use the placeholder {count} to insert the post count.

Append

Character or text to place after each tag. You can use the placeholder {count} to insert the post count.

Show post count in the tooltip

Show the number of posts that use that tag when hovering the mouse over the tag.

Custom title

Tooltip text when hovering the mouse over the tag. You can use the placeholder {count} to insert the post count.

Set the “target” attribute for the links of the tags. Possible values are:

  • _blank: open in a new tab/window
  • _self: open in the same frame
  • _parent: open in the parent frame
  • _top: open in the full tab/window of this frame

In the shortcode you can also set the name of a frame.

Append something to each tag’s link, for example a URL query.

Add filter to tags for multiple groups

When you use the premium plugin, additional query parameters in the links make sure that we can distinguish between the same tag that is used in different groups. If the resulting posts are not complete and troubleshooting doesn’t help, you can disable it here.

Use tags of the following post

Display only tags that are assigned to the post (or page) with a specified ID. If you need this option, you mostly want to “use this post”. The menu offers also some recent posts by title.

Alphabet

Include letters

A list of letters/characters that should be used, if they appear among the first letters. If you leave it empty, we use all initial letters of the tags.

Exclude letters

A list of letters/characters that should be excluded, even if they are among the initial letters of the tags.

Groups

Include groups

Tag groups that will be considered in the tag cloud.

Columns

Column count

The number of columns. Read the instructions how to create a responsive design.

Gap between columns

Width of the gap between columns.

Avoid breaking groups over columns

Try to keep the group header and its tags together in one block. That makes it easier to understand which tags belong to which group, but it might lead to empty spaces at the bottom of columns.

Advanced Styling

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

Title element

Level of the HTML <h?> element.

div id

Define an ID for the enclosing <div>.

  1. If you display more than one tag cloud on the same page, each shortcode needs a different value. The safest solution is to leave it empty so that div_id automatically receives a random value.
  2. Avoid words that are used by WordPress such as “content” or “main”. Each ID must be unique for the entire page.

div class

Define a class for the enclosing <div>.

tags div class

Define a class for the tags container.

header class

Define a class for the header.

How do you rate this article?