web_taxonomy_terms_thumbnails Shortcode
The web_taxonomy_terms_thumbnails shortcode presents terms from one selected taxonomy as a responsive thumbnail grid. Only registered public taxonomies with public archive URLs are available, including supported WooCommerce product taxonomies.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_taxonomy_terms_thumbnails]
Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
taxonomy |
— | A public taxonomy slug | Selects the source taxonomy. The same public taxonomy list is used in Gutenberg. |
layout |
default |
default, simple |
Selects the card presentation. |
top_level_only |
— | yes or empty |
Limits hierarchical results to terms without a parent. |
child_of_term_with_id |
— | One term ID | Shows direct children of the specified parent term. |
specific_child_terms |
— | Comma-separated term IDs | Includes only the specified terms. |
excluded_terms |
— | Comma-separated term IDs | Excludes the specified terms. |
number |
-1 |
Non-negative integer; empty or negative selects all | Limits both layouts. Zero renders nothing; positive values retain their authored size. The native block's separate editor limit does not cap Legacy collections. |
columns |
3 |
12, 6, 4, 3, 2, 1 |
Sets the desktop grid span: 3 means four cards per row; 12 means one. |
columns_tablet |
12 |
12, 6, 4, 3, 2, 1 |
Grid span at 768–991px. |
columns_portrait |
Same as mobile | Grid span 1–12 |
Grid span at 576–767px. |
columns_mobile |
12 |
12, 6, 4, 3, 2, 1 |
Grid span below 576px. |
orderby |
name |
name, slug, term_id, description, parent, term_order, meta_value_num, menu_order |
Selects the sorting field. meta_value_num and menu_order use the saved category position. |
order |
DESC |
ASC, DESC |
Controls the order. |
display_thumbnail |
yes |
yes, no or empty |
Controls the display thumbnail. |
image_size |
thumbnail |
Any registered WordPress image-size slug | Selects the generated term-thumbnail size. |
display_background_image |
yes |
yes, no or empty |
Controls the display background image. |
background_image_size |
full |
full or any registered WordPress image-size slug |
Selects the generated copy used for a local background image. External image URLs remain unchanged. |
display_title |
yes |
yes, no or empty |
Controls the display title. |
display_color |
— | yes, no or empty |
Controls the display color. |
title_color |
1 |
Numeric palette slot 1–15; 0 inherits |
Choose title color. |
title_alignment |
right |
left, right, under, tooltip |
Choose title alignment. |
title_size |
h4 |
display-1, display-2, display-3, display-4, h1, h2, h3, h4, h5, h6, or empty to inherit |
Choose title size. |
display_description |
— | yes, no or empty |
Controls the display description. |
description_color |
1 |
Numeric palette slot 1–15; 0 inherits |
Choose description color. |
show_empty_terms |
— | yes, no or empty |
Controls the show empty terms. |
link_term_to_archive |
yes |
yes, no or empty |
Controls the link each term to archive. |
display_only_related_to_post |
— | yes, no or empty |
Controls the display only the terms related to the post. |
display_only_related_to_current_category |
— | yes |
If the module is in a category archive, only those related to that category will be displayed. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
accessible_name |
— | Plain text | Optional accessible collection label. |
Filtering and layout
The explicit parent ID takes priority over current-archive and top-level filters. Current-archive filtering requires an actual term archive of the selected taxonomy. Current-post filtering uses the singular or loop post, and intersects other filters. Exclusions also apply to explicitly included IDs. Empty-term filtering also includes parents whose descendants contain published content.
The Simple layout displays names and links, nesting selected children under selected parents. Children without a selected parent appear at the root. Card image, text and color settings are not applied to Simple lists. Both layouts retain the custom ID, helper classes and device visibility.
Card descriptions are independent of title visibility. Missing tooltip images fall back to visible term names; image-only links retain accessible names. Local image metadata is current at render time. Background images use a decorative cover layer, and swatches use safe color attributes, without inline CSS. Tooltip dependencies are conditional on the active card options. SVG files are loaded as images rather than injected as raw markup.
Legacy cards retain the p-15, p-5 and web-gap-20 selector hooks alongside their current spacing helpers, so existing custom styles can continue targeting these elements. These hooks do not create global pixel-based utility classes.
Ordering by category position
Choose Menu order in the module's Order by control and ASC in Order to follow the positions saved by dragging categories in WordPress. The Page Builder stores this choice as orderby="meta_value_num". HTML templates can also use orderby="menu_order" with the same result:
[web_taxonomy_terms_thumbnails taxonomy="category" orderby="menu_order" order="ASC" top_level_only="yes"]
Replace category with your taxonomy slug. Use DESC to reverse the saved positions. Terms without positions count as zero. For WooCommerce product categories (product_cat), both values use WooCommerce's category ordering. Term order is a separate WordPress option and does not select POM's saved category positions.
Verification
Linked thumbnails use the term name as their accessible name, including SVG image files and grids with Display title disabled. Check that each thumbnail announces the corresponding term and opens its archive in the current language.
Preview the grid with a taxonomy that has local images, descriptions and nested terms. Compare Full with a generated size such as Medium and confirm the background URL changes to the selected copy without affecting the separate thumbnail size. Then verify the chosen include, exclude or parent rule and the configured column count at desktop, tablet and mobile widths.
To verify category ordering, save positions that differ from alphabetical order and preview the shortcode with orderby="menu_order" order="ASC". Confirm it matches Menu order in the Page Builder, then use DESC to check the reverse order.