By Stephen Walker

Note: this article was written for another site I created and if you look at the source code there may be variations but the content is still accurate. On this site I am not using ACF or Metabox as it is mentioned, but the standard taxonomy features.

I really like the new post card feature in Avada as it adds some much needed layout freedom. One thing I have been trying to do is figure out a way to only have a single, top-level category showing on a post and then styling that based on the category. I am not sure if this is a limitation of WordPress or Avada (I suspect the former), but the Avada meta data element shows all the categories as does a dynamic text element based on the category taxonomy. I initially attempted to use CSS to limit the list, but since these are always in alphabetical order, I quickly realized it was not what I wanted. After leaving the idea for a while and focusing on other things, I returned with a fresh set of eyes.

If you only ever assign a post to a single category, you can skip the custom taxonomy section and jump to the code.

Custom Taxonomy

I quickly realized that the only solution would be a plugin to extend the taxonomy. I could have used Advanced Custom Fields (ACF) that is bundled with Avada, but I had recently purchased MetaBox (great AppSumo deal) and wanted to give it a try.

Like ACF, MetaBox makes it extremely easy to add a custom taxonomy. I added this as a traditional taxonomy box so it is possible to assign more than one “Main Category” which is not what I wanted and I will eventually go back and make that a radio button selector. Since I am the only one working on this site, it is easy to remember choosing only a single main category.

Once that feature was created, I began adding main categories to my posts. I then created the card layout I wanted to use (mimicking the BBC news page). I have a title, excerpt and the main category assigned. The main category uses a custom text field with the dynamic data id assigned and MetaBox creates the archive link automatically. Task done…sort of.

I realized that with all the main categories having the same styling it might be easy to overlook them, so I decided to add custom CSS based on the category. Fortunately, the link includes the matching title text which makes it extremely easy to target. I initially started with just a color background that changed on hover, but then I decided I wanted to add an icon for some added visual recognition. Again, fairly easy to do with custom CSS. The key to the styling is to assign class to the text element. In this case I used topic-bar as the class.

The Code

Copy to Clipboard

Custom CSS

  1. As you can see above, I set some basic styling and resets of the “components” within the text element — the tag has a 20px margin by default and I needed it to be 0.
  2. I then set the styling based on the title text.
  3. Created a custom hover style based on the title text.
  4. Added the icon using Font Awesome Pro. The free version can also be used (limited icon availability) but you will have to create an account and use a kit that includes the font icons. My testing indicates that Avada only uses the svg version which cannot be applied using the font family.


While the Avada logo is not featured in Font Awesome, it is essentially the same as the Atlassian logo (not sure who came first), just reversed horizontally. To do this with CSS you have to transform the icon.

Copy to Clipboard

This is visible on the homepage and the articles page. Let me know what you think.

Originally published on April 25, 2021

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.