Taxonomies Query Block
Overview
The Taxonomies Query Block is a server-side rendered component in the Phenix Design System that allows you to fetch and display taxonomy terms from your WordPress site. This block enables you to create dynamic listings of categories, tags, or custom taxonomies with flexible grid layouts and slider functionality. The block works by querying taxonomy terms and displaying them using template parts from your theme.
Key Features
- Taxonomy Selection: Query terms from any registered taxonomy (categories, tags, or custom taxonomies)
- Post Type Association: Filter taxonomies based on their association with specific post types
- Template Part Integration: Display taxonomy terms using theme template parts
- Flexible Grid Layout: Configure responsive grid layouts with customizable columns
- Slider Functionality: Convert grid layouts into interactive sliders
- Server-Side Rendering: Content is rendered on the server for optimal performance and SEO
- Hierarchical Display: Option to show parent terms only or include child terms
- Empty Terms Filtering: Option to hide terms that don't have associated content
How to Use
- In the WordPress editor, click the "+" button to add a new block
- Search for "Taxonomies" or find it in the "Phenix Blocks" category
- Add the Taxonomies block to your page
- In the Query Setting panel, select the taxonomy you want to display (categories, tags, or custom taxonomies)
- Select a post type to associate with the taxonomy (optional)
- Choose a template part from your theme to use for displaying each term
- Configure additional query options like order, maximum items, and whether to hide empty terms
- Enable Grid Mode if you want to display results in a grid layout
- Configure columns and responsive behavior as needed
- Enable the Slider option if you want the grid to function as a slider
Block Settings
Toolbar Controls
Control | Description |
---|---|
Columns Number | Set the number of columns for different screen sizes (mobile, tablet, laptop, desktop) |
Sizes Options | Configure padding, margin, and other size-related properties |
Sidebar Controls
Query Setting Panel
Option | Description |
---|---|
Taxonomies | Select the taxonomy to query (categories, tags, or custom taxonomies) |
Post-Type | Filter taxonomy terms by their association with a specific post type |
Card Template | Select a template part from your theme to use for displaying each term |
Order | Set ascending (Oldest) or descending (Newest) order |
OrderBy | Sort results by name, count, or other criteria |
Max Items | Set how many terms to display |
Hide Empty | Option to hide terms with no associated posts |
Sub Terms | Option to include child terms in the results (when disabled, only parent terms are shown) |
Grid Mode | Enable grid layout for taxonomy terms |
IS Slider | Convert the grid layout into an interactive slider |
Grid Layout Panel
Option | Description |
---|---|
Grid Properties | Configure responsive grid layout settings |
Alignment | Set alignment options for grid items |
Responsive Columns | Configure different column counts for various screen sizes |
Gap Controls | Set horizontal and vertical spacing between grid items |
Slider Options Panel
Only visible when Slider Mode is enabled:
Option | Description |
---|---|
Slides Per View | Set the number of slides visible at once |
Slides Per Group | Set how many slides to move at once when navigating |
Space Between | Control the gap between slider items |
Navigation | Enable/disable navigation arrows |
Pagination | Enable/disable pagination dots |
Loop | Enable/disable infinite loop |
Autoplay | Enable/disable automatic sliding |
Technical Implementation
The Taxonomies Query block is implemented with server-side rendering for optimal performance and SEO. The PHP rendering function handles the query and display of taxonomy terms:
Query Construction
The block builds WordPress queries based on the selected taxonomy and configuration options:
Taxonomy Selection: The block queries terms from the selected taxonomy.
Hide Empty Option: When enabled, only terms with associated content are displayed.
Hierarchical Display: When "Sub Terms" is disabled, only parent terms (with parent=0) are shown. When enabled, all terms including child terms are displayed.
Template Part Integration
The block uses WordPress template parts for displaying taxonomy terms:
get_template_part("template-parts/".$block_attributes["template_part"], null, $category);
This approach allows for flexible and reusable templates that can be customized in your theme.
Implementation Examples
The Taxonomies Query block can be used in various ways based on the configuration options available. Below are descriptions of common implementations based on the actual block functionality.
Basic Categories Grid
A grid layout displaying blog categories:
- Configuration:
- Taxonomy: Select "category" from the dropdown
- Template Part: Select a category card template from your theme
- Grid Mode: Enabled
- Columns: 3 columns on desktop, 2 on tablet, 1 on mobile
- Hide Empty: Enabled to show only categories with posts
Product Categories Slider
A slider showcasing WooCommerce product categories:
- Configuration:
- Taxonomy: Select "product_cat" from the dropdown
- Post-Type: Select "product" to filter categories associated with products
- Template Part: Select a product category slide template
- Grid Mode: Enabled
- Slider Mode: Enabled
- Navigation: Enabled
- Pagination: Enabled
- Order: Set to "DESC" to show categories with most products first
- OrderBy: Set to "count" to prioritize popular categories
Parent Categories Display
A grid showing only top-level categories:
- Configuration:
- Taxonomy: Select your desired taxonomy
- Sub Terms: Disabled (to show only parent terms)
- Template Part: Select an appropriate template for category display
- Grid Mode: Enabled for multi-column layout
- Max Items: Limit to a specific number of parent categories
Complete Taxonomy Hierarchy
A comprehensive display of all terms including subcategories:
- Configuration:
- Taxonomy: Select your desired taxonomy
- Sub Terms: Enabled (to include child terms)
- Template Part: Select a template that handles hierarchical display
- Hide Empty: Configure based on whether you want to show empty terms
Common Use Cases
Blog Category Navigation
Create a navigation menu based on blog categories:
- Add the Taxonomies block to your sidebar or navigation area
- Select "category" as the taxonomy
- Choose a template part designed for navigation display
- Configure to show only parent categories by disabling Sub Terms
- Enable Grid Mode for horizontal layout or leave disabled for vertical menu
- Set Hide Empty to true to show only categories with posts
WooCommerce Category Showcase
Create a visually appealing showcase of product categories:
- Add the Taxonomies block to your shop page or homepage
- Select "product_cat" as the taxonomy and "product" as the post type
- Choose a template part designed to display product categories with images
- Enable Grid Mode with appropriate column settings for responsive display
- Configure OrderBy to "count" to prioritize popular categories
- Consider enabling Slider Mode for a carousel effect on smaller screens
Hierarchical Taxonomy Display
Create a complete display of a taxonomy hierarchy including parent and child terms:
- Add the Taxonomies block to your page
- Select your desired taxonomy
- Enable Sub Terms to include child terms in the display
- Choose a template part designed to handle hierarchical display
- Configure the grid layout to accommodate the hierarchical structure
Best Practices
Template Part Design: Create specialized template parts for different types of taxonomy displays (navigation, featured categories, hierarchical display)
Performance Optimization: Use the Max Items setting to limit the number of terms displayed, especially for taxonomies with many terms
Hierarchical Control: Use the Sub Terms option strategically - disable it when you only want to show top-level categories, enable it for complete hierarchical displays
Grid Responsiveness: Configure responsive column settings appropriate for your content and layout - more columns on desktop, fewer on mobile
Slider Implementation: Only enable the slider functionality when it enhances the user experience, such as for featured category showcases
Empty Terms Handling: Use the Hide Empty option to prevent displaying categories with no associated content
Template Part Reusability: Create reusable template parts that can work across multiple taxonomy blocks for consistency
Sorting Strategy: Choose appropriate OrderBy and Order settings based on your specific use case (alphabetical, popularity, etc.)
Related Blocks
- Dynamic Query Block - For querying and displaying posts associated with taxonomy terms
- Container Block - For positioning taxonomy queries within layouts
- Grid Row Block - For creating custom grid layouts with taxonomy terms
- Users Query Block - For querying and displaying user data