UC Filterable Grid

This plugin is currently in beta and only activated on specific sites by request only. Please reach out to the WebDev team to request this plugin if you’d like to use it.

This guide explains how to use the Filterable Grid in two ways:

Block Editor (Cynder / block editor)
Shortcode (Cornerstone, Stowe / classic editor, page builder)

Both options render the same output on the frontend of the site: a grid of posts that match the chosen type with flexible filters based on chosen fields, and optional keyword text search.

1) Using with Cynder (the block editor)

Add the block

Edit a page/post in WordPress.
Click + Add Block.
Search for Filterable Grid.
Insert the block.

Configure basic settings

In the block sidebar:

Post Type: choose what content to display (post, page, etc.).
Taxonomies: select taxonomy filters to show. These will be taxonomies that are specific to the post type, including any custom post types that the Web Development team have added to your site.
ACF (Advanced Custom Fields) Fields: select ACF-based filters (if available). These are only included on posts that register custom fields via ACF.
Dropdown Labels: optionally set a custom label for the each dropdown used on the page. If none is entered, the default field name will be shown as the label.
Image Field: choose which field contains the image of the post – either featured or an ACF image field.
Columns: choose how many cards per row get displayed in the grid.

Configure display settings

Show Image / Image Field: whether or not to show an image with the grid and which field should be used for the image
Style: cards, compact, background-card, or uconn-today. You can cycle through the options to see how each choice impacts the look of the grid
Heading Font Size: set a custom font size (px, rem, %, etc.) to be used
Equal Height Cards: turn on to make all visible cards the same height. This is helpful for posts that have long titles, to make the grid more aesthetic. Turning it off will cause the post title to cover part of the image
Heading Level: choose semantic heading level for card titles, to assist in the accessibility of the page overall.
Title Template: customize the title of the cards, optionally using ACF fields. Leave it blank to just use the post title by default
Enable Hover: controls hover effect behavior. Turning it on will allow a semi-transparent hover color to be applied to each item in the grid.
Colors: there are color pickers for each of the following items
- Header/Title Color
- Background-card secondary color
- Hover color
- Text color
Initial Item Limit: set how many items should be displayed on page load. If set, also exposes Show More/Show less buttons, each of which have optional labels. Leave at 0 to load all posts for the selected type

Note that because of the nature of these cards and the selection options, the color contrast checker is NOT keeping tracking off the contrast between these color options. Site admins and authors are responsible for contrast issues on their sites.

Optional behavior

Show Keyword Search: show/hide the title search input. If enabled, this will display a keyword text input field for users to quickly filter the items that are displayed.
Hierarchy Links: for hierarchical post types, support parent/child navigation behavior (where applicable).

2) Using the Filterable Grid Shortcode

If your site is not using Cynder, you can still have a filterable grid via a shortcode (you can also use this shortcode option with Cynder by adding a Shortcode Block).

To view all the possible post types that are available on your site, first create a shortcode with the debug options like so

[filterable_grid debug="true"]

When you save and load the page that contains the shortcode, you should see the following printed out to the page.

the shortcode debug option

This will provide a list of all the posts, their available taxonomies, their image settings, and an example shortcode you can copy and paste to select that post type. You can see further examples below.

Basic shortcode

[filterable_grid post_type="post"]

Basic shortcode with taxonomies

[filterable_grid post_type="post" taxonomies="category,post_tag"]

Custom post type with ACF fields

[filterable_grid
    post_type="person"
    taxonomies="group,persontag"
    acf_fields="department,campus,title"
    image_field="photo"
]

Custom dropdown labels

[filterable_grid
    post_type="person"
    taxonomies="group"
    acf_fields="campus"
    filter_labels="tax:group=Department|acf:campus=Campus Location"
]

Minimal grid without filters

[filterable_grid post_type="post" show_keyword_search="false"]

Background Card style with custom colors

[filterable_grid post_type="person" style="background-card" header_top_color="#0f2b6b" header_bottom_color="#013ecd" hover_color="#e4002b"]

Custom title with ACF field tokens

[filterable_grid post_type="course" title_template="{audience} | {post_title}"]

Tokens available: {post_title} always works; {field_name} pulls any ACF field value. Arrays (checkbox, multi-select) are joined with , .

Grid without images, with a colored placeholder

[filterable_grid post_type="course" show_image="false" no_image_bg_color="#a8c8e0"]

UConn Today-style cards with expandable results

[filterable_grid
    post_type="post"
    taxonomies="category"
    style="uconn-today-card"
    header_font_size="1.75rem"
    initial_item_limit="6"
]

3) Shortcode Attribute Reference

Below is a complete list of shortcode attributes that are available to site authors

These attributes can change as time goes on and we receive feedback about how authors are using the shortcode. Any additions or edits to the attributes will also be made to the block editor variation above.

Attribute	Required	Default	Description

Attribute	Required	Default	Description
`post_type`	Yes		Any registered post type slug
`taxonomies`	No		Comma-separated taxonomy slugs for filter dropdowns
`acf_fields`	No		Comma-separated ACF field names for filter dropdowns
`filter_labels`	No		Optional label overrides as `key=Label\|key=Label` (supports `tax:slug` and `acf:field`, with unprefixed fallback)
`show_keyword_search`	No	`true`	Show keyword search input
`image_field`	No	`featured`	Image source: `featured` or ACF field name
`columns`	No	`4`	Grid columns (1, 2, 3, 4, or 6)
`hierarchy_links`	No	`false`	Enable parent/child navigation for hierarchical post types
`style`	No	`cards`	Display style: `cards`, `compact`, `background-card`, or `uconn-today-card`
`hover_enabled`	No	`true`	Enable hover styles for supported card styles
`equal_height`	No	`false`	Force all cards to match the height of the tallest card
`heading_level`	No	`2`	HTML heading level for card titles (2–6)
`header_top_color`	No	`#0f2043`	Header/title color for most styles (hex)
`header_bottom_color`	No	`#d4403a`	Button color for Background Card (hex)
`hover_color`	No	`#d4403a`	Hover color for supported styles (hex)
`text_color`	No	`#ffffff`	Text color inside card headers (hex)
`header_font_size`	No	theme/style default	CSS size for item headings, e.g. `18px` or `1.5rem`
`title_template`	No		Template string for card titles. Use `{post_title}` and `{acf_field_name}` tokens, e.g. `{post_title} — {department}`
`show_image`	No	`true`	Show or hide the card image, or placeholder if an image doesn't exist for that field
`no_image_bg_color`	No	`#e9ecef`	Background color for the image area when `show_image="false"` (hex)
`debug`	No	`false`	Show debug info instead of grid (requires editor capability)
`initial_item_limit`	No	`0`	Maximum matching items shown before rendering a Show More button
`expand_button_label`	No	`Show more`	Text for the expand button
`collapse_button_label`	No	`Show less`	Text for the collapse button

4) Tips For Editors

Start simple: set only post_type first, then add filters. Using debug on a private page is a great way to get an overall sense of what’s available.
If a filter appears empty, confirm terms/ACF values exist on published items.
If images are missing, verify Featured Image or ACF image field value is present.
If card heights look uneven, enable Equal Height Cards.