How to Create a Custom Elementor Condition in 4 Easy Steps – 2023

June 1, 2023

Today’s exciting expedition? We’re embarking on a journey to discover how to create a custom Elementor condition without any plugins! With a bit of PHP and a pinch of courage, you can add even more dynamism to your Elementor designs. Ready for the adventure? Let’s hit the trail!

Step 1: Understand What a Condition Is

Before we begin, it’s essential to understand what a condition in Elementor is. Elementor’s conditions allow you to control where your templates will be applied on your site. This can be something like “only show this template on the ‘About Us’ page” or “hide this template for logged-out users”.

Today, we’re going to create a custom condition that will allow us to display a specific template only for users who have commented on one of our posts.

Step 2: Open Your Theme’s functions.php File

To get started, navigate to your WordPress theme’s folder (usually wp-content/themes/your-theme-name) and open the functions.php file. We’ll be adding our custom condition code here.

Step 3: Create Your Custom Condition

Add the following code to your functions.php file:

				
					add_action('elementor/theme/register_conditions', function($conditions_manager) {

    class Elementor_Has_Commented_Condition extends \ElementorPro\Modules\ThemeBuilder\Conditions\Condition_Base {

        public static function get_type() {
            return 'singular';
        }

        public function get_name() {
            return 'has_commented';
        }

        public function get_label() {
            return 'Has Commented';
        }

        public function check( $args ) {
            return have_comments();
        }
    }

    $conditions_manager->get_condition_instance('general')->register_sub_condition(new Elementor_Has_Commented_Condition());

});

Let’s dissect this code a bit:

We’re using Elementor’s elementor/theme/register_conditions hook to add our custom condition.
We define a class Elementor_Has_Commented_Condition that extends Elementor’s Condition_Base class.
get_type() returns the type of the condition. We’re using ‘singular’ because our condition applies to individual posts.
get_name() is the internal name of the condition.
get_label() is the name that will be displayed in the Elementor editor.
check($args) is where we define our condition. In this case, we’re returning true if the current post has comments.

Step 4: Test Your Custom Condition

Now, let’s test our new custom condition.

Navigate to the Elementor editor.
Open a template and click on the ‘Conditions’ button.
You should see your new ‘Has Commented’ condition in the dropdown menu. You can select it and save your template.

Here’s the complete code in one snippet:

				
					add_action('elementor/theme/register_conditions', function($conditions_manager) {

    class Elementor_Has_Commented_Condition extends \ElementorPro\Modules\ThemeBuilder\Conditions\Condition_Base {

        public static function get_type() {
            return 'singular';
        }

        public function get_name() {
            return 'has_commented';
        }

        public function get_label() {
            return 'Has Commented';
        }

        public function check( $args ) {
            return have_comments();
        }
    }

    $conditions_manager->get_condition_instance('general')->register_sub_condition(new Elementor_Has_Commented_Condition());

});

Congratulations, code adventurer! You’ve successfully created a custom Elementor condition without a plugin. Keep up the exploration, and don’t forget to share your victories with us! Happy coding! 🚀

How to Create a Custom Elementor Condition in 4 Easy Steps – 2023

Step 1: Understand What a Condition Is

Step 2: Open Your Theme’s functions.php File

Step 3: Create Your Custom Condition

Step 4: Test Your Custom Condition

Table of Contents

Unlimited Placeholders

When to Use This Feature

Use Examples