In version 7.3 the ThemeFusion team added conditional rendering to the Avada toolset, but what they didn’t do is explain all of the possible use cases. The initial focus in on Woo-commerce, user roles, and as a replacement for the visibility settings on device types. Even their overview only gives you a basic glimpse into the power. In a couple of projects at work I have discovered how powerful they can be especially combined with custom fields and dynamic data. The one drawback is that it is limited to columns — standard and nested — and containers, but nested columns are really the key at this point.

Rendering based on an empty value

Scenario 1 : Subtitle

The first time I ran across an undocumented feature is when I was working on a blog layout. In this design I have the excerpt text displayed below the title of a post, but I also have a custom field for a subtitle. The latter is seldom used, but when it is I don’t want both the subtitle and the excerpt to show. I was thinking, it would be really nice if the dynamic element allowed me to have a fallback of the excerpt. While this may be possible since the before and after fields can use Avada shortcodes, I haven’t tested it in the fallback. As I looked at the screen I started thinking about conditional rendering and would it be possible to have an if-then condition — if the subtile is null, show the excerpt. What I found is that you can do just that — if the custom field “subtitle” is empty. Since the dynamic data for the subtitle has a fallback of nothing, it is not displayed by default. I built a custom title bar and placed each element into its own nested column.

The steps

Fortunately, this is really simple to build.

screenshot of the conditional rendering interface
  1. Open the conditional rendering logic options and choose custom field
  2. Add the custom field ID
  3. Leave the value field blank

Scenario 2: Special Label

The scenario and setup is essentially the same as the previous with only one small variation. In this case we need to display that an official biography is only available for historic purposes and that the person is no longer part of the organization. I have a set of custom fields for a biography that include a start year and an end year. While the person is with the company, the end year is blank and has a fallback of “present.” When the individual departs, the departure year is added. In this scenario the condition is set to render when the custom field “departure_year” is not equal to blank. I could have added a checkbox field with a set value, but this minimizes the need to update two field when a person departs.

Title bar showing added label

This is just the beginning of my exploration of the conditional rendering logic and I expect in the near future that these features will be expanded to allow even more options.

Originally published on June 24, 2022

pink and black wallpaperAvada for the win - again
Borders and Boxes Demo

2 Comments

  1. louisecuschieri November 14, 2022 at 4:49 am - Reply

    Thank you! I so need this to work for my application of “if there’s no featured image in the blog post, display an ACF field with a video link instead”. I don’t think this is possible yet as there is no condition type for featured image. :(

    • Stephen Walker November 14, 2022 at 5:00 am - Reply

      The conditional rendering is currently limited to containers and columns. They are planning to extend this capability and you can vote on it (https://theme-fusion.com/engage/feature-voting/). The solution for what you want is to place the image element and the video element in their own nested columns and then show or hide based on the presence of the video url.

Leave a Reply

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

RELATED ARTICLES

  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Going Green-ish

    Going Green-ish

    Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.

    December 28, 2022

  • Read Analytics Alternative: Cabin.

    If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.

    December 25, 2022

  • Read New Section: Code Snippets

    I created a new Code Snippets section to start collecting and sharing code that I have found helpful for Avada or WordPress in general.

    December 18, 2022

  • Read The State of WordPress

    The future of WordPress is very bright, but it is going to take a new way of thinking and a willingness to learn new things. Gutenberg is only a part of that future.

    December 15, 2022

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022