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.
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.
Copy to Clipboard
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.
I then set the styling based on the title text.
Created a custom hover style based on the title text.
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.
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.
ALLOW ALL COOKIES
Third-party cookies are cookies that are set by other websites, not this one. This website may use embedded content from other websites, such as YouTube or Google maps. Your consent is required to view content from these websites embedded on this site.
THIRD PARTY EMBEDS
These are cookies that are required for the operation of our website, details of which can be found here.