Adding and Styling Top-level Category Labels

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

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.

Bonus

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.

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