All Tutorials

How to Display Custom Post Term Colors in WP Grid Builder

Doug

Tech Stack Integrator

If you’re using WP Grid Builder to display posts on your website, you may want to customize the colors of taxonomy flags (such as categories or tags) to improve readability and enhance the visual experience. This tutorial will guide you through the process of setting custom colors for post terms so that each category or tag displays with its own unique background color inside your WP Grid Builder grid.

Step 1: Enable Term Display Options in WP Grid Builder

Before setting custom colors for your taxonomies, you need to ensure that WP Grid Builder has term display options enabled.

  1. Go to WP Grid Builder → Settings in your WordPress dashboard.
  2. Look for the option “Display Term Options” and enable it.
    • This setting allows WP Grid Builder to display additional options on the term editing pages (categories, tags, or custom taxonomies).
  3. Click Save Changes.

Step 2: Assign Custom Colors to Your Categories or Tags

Now that term options are enabled, you can assign colors to your taxonomies.

1. Choose Your Taxonomy (Categories or Tags)

  • If you’re customizing categories, go to Posts → Categories.
  • If you’re using tags, go to Posts → Tags.

2. Edit Each Taxonomy and Set a Color

For each category or tag that you want to customize:

  1. Click Edit next to the taxonomy name (e.g., “Tutorials”).
  2. Scroll down to the WP Grid Builder settings section.
  3. Locate the Background Color field.
  4. Enter your desired color using:
    • Hex code (e.g., #0073e6 for blue).
    • Color picker if you prefer a visual selection.
  5. Click Update to save your changes.

💡 Tip: Repeat this process for all categories or tags that you want to style.

Step 3: Modify the WP Grid Builder Card to Display Custom Colors

Once you’ve assigned colors to your taxonomies, you need to ensure that WP Grid Builder displays them correctly on your post cards.

1. Edit Your Grid Card Template

  1. Go to WP Grid Builder → Cards.
  2. Find the card template that you are using for your post grid.
  3. Click Edit.

2. Add the Post Terms Element

  1. Ensure that the “Post Terms” block is included in the card layout.
  2. If it’s missing, add it from the available elements.

3. Adjust the Background Color to Use Dynamic Taxonomy Colors

  1. Select the Post Terms element in the card editor.
  2. Click on Styles → Colors.
  3. Scroll down to the Background Color setting.
  4. Click the X (Remove Background Color) to ensure that WP Grid Builder applies the category or tag colors dynamically.

4. Set the Text Color for Visibility

  • If your background colors vary, choose a text color that will be readable on all backgrounds.
  • Example: If you’re using dark and light background colors, white text (#ffffff) is a safe choice.
  1. Click Save to apply your changes.

Step 4: Preview and Test the Grid

Now that you’ve configured everything, check your post grid to ensure the changes are working.

  1. View your grid on the front end.
  2. Confirm that:
    • Categories or tags are displaying with the correct colors.
    • Multiple terms (if applicable) retain their assigned colors.
    • Text is readable against different backgrounds.

If something isn’t displaying correctly, clear your cache and re-save the card template in WP Grid Builder.

Conclusion

By following this tutorial, you can create visually distinct category or tag labels in WP Grid Builder, improving content navigation and readability. This method allows you to maintain a consistent design while making it easy for visitors to differentiate between different types of content.