Display Taxonomy Categories and Tags Immediately Within WordPress Content
Let's break down the art of showing taxonomies inline in WordPress, making your site look sleeker and more organized. In this guide, I'll walk you through various methods to achieve that, suitable for both beginners and advanced developers.
So, what's the fuss about displaying taxonomy inline?
When you display taxonomy terms horizontally instead of stacking them vertically, you save valuable screen space and level up the overall aesthetic of your WordPress site. This presentation style, often seen in blog posts, product pages, and meta-data sections, helps users find related terms quickly and efficiently.
Here's a simple example:
Vertical display:
Inline display:
Now that you understand why it's cool, let's dive into the techy stuff.
Why should you show taxonomy terms inline?
Aesthetically pleasing design, improved user experience, SEO benefits, and efficient use of space are just a few reasons why displaying taxonomy inline is a smart move.
- Enhanced design: By decluttering the page, inline taxonomies contribute to a more professional and modern look. They are perfect for minimalistic and clean designs where you want to keep things tidy and organized.
- Better UX: Visitors can spot relevant taxonomy terms quickly, leading to improved navigation and faster content discovery. Inline formatting also simplifies understanding the connections between content without overwhelming users with excessive links or clutter.
- SEO advantages: While taxonomy inline displays are primarily a design choice, they can indirectly boost SEO by improving the internal linking structure. This improves search engine crawlability and relevancy of your content.
- Smarter use of space: For content-rich sites with numerous taxonomies, displaying them inline saves valuable screen real estate and reduces excessive scrolling, enhancing the user experience.
Enter the battlefield - three ways to display taxonomy inline in WordPress
1. For the code warriors: Using PHP
Thanks to WordPress functions like and , developers can customize the front-end taxonomy appearance. Here's a step-by-step guide for a beginner-friendly approach:
- Locate the template file: Start by finding the template file where you'd like to display the taxonomies—it could be , , or another template file based on your theme.
- Use function: The function helps you retrieve the taxonomy terms for a specific post or page. Use this function to fetch the taxonomy terms and display them inline.
Example code:This code fetches the terms assigned to the current post for the specified taxonomy (e.g., category or custom taxonomy). The terms are then looped through and displayed as links, separated by a pipe (|).
2. For the design-centric: Styling with CSS
Once the taxonomy terms are retrieved and displayed using PHP, you can use CSS to ensure they look attractive and inline.
Example CSS code:
```css
}
}```
Replace with the ID of the container that holds your taxonomy terms.
3. For the lazy: Using WordPress plugins
If you prefer not to code, don't sweat it. Several plugins available can help you achieve the inline taxonomy display. Here are some popular options:
- TaxoPress: A plugin that makes managing and displaying taxonomies a breeze on your WordPress site.
- WP Term Images: A plugin that allows you to add images to your taxonomies, which you can display inline with some adjustments.
- Advanced Custom Fields (ACF): A versatile plugin that lets you customize taxonomies and display them inline using custom fields.
- Custom Post Type UI (CPT UI): A plugin designed for creating custom post types and taxonomies. It offers easy integration and display options for custom taxonomies.
Pro tips: Stepping up the inline taxonomy game
1. Make it multiple: Displaying terms from more than one taxonomy on the same post
For instance, you may want to display both the categories and tags of a post inline.
Example code:```phpphp// Replace 'your_taxonomy1', 'your_taxonomy2' with your taxonomy names$terms1 = get_the_terms( get_the_ID(), 'your_taxonomy1' );$terms2 = get_the_terms( get_the_ID(), 'your_taxonomy2' );
if ( $terms1 && ! is_wp_error( $terms1 ) && $terms2 && ! is_wp_error( $terms2 ) ) { $term_list1 = array(); $term_list2 = array();
}?>```
This code downloads terms from two taxonomies and displays them inline with a pipe (|) as a separator. You can add more taxonomies by including additional calls.
2. Add some flair: Display taxonomy terms with icons
Use icons to make your inline taxonomy display pop. You can do this with a combination of PHP and an icon library like Font Awesome.
Example code with Font Awesome:
- Enqueue Font Awesome styles: In your theme's functions.php file, add the Font Awesome stylesheet.
- Modify the PHP code: Include Font Awesome-related HTML and CSS tags in your inline taxonomy code.
Example:
Here's the updated CSS code to display taxonomy terms with icons:
Replace with the appropriate taxonomy slug.
Wrap up
Displaying taxonomy terms inline in WordPress is an excellent way to enhance both the design and user experience of your site. By following the methods and best practices outlined in this guide, you can effortlessly implement inline taxonomy displays tailored to fit your needs, whether you're working with categories, tags, or custom taxonomies.
For more tips and tricks, tuck into the interesting reads section below:
What is Group Block in Gutenberg WordPress
What Are WordPress Hooks: A Tool or Feature
10 Best WordPress CDN Plugins for Images
- The inline display of taxonomy terms helps users navigate content more efficiently, leading to streamlined discoverability with quicker access to relevant content.
- Employing a combination of CSS and PHP, developers can craft a more alluring and user-friendly display for inline taxonomy terms while optimizing screen space and enhancing the SEO of a WordPress site.
