Elementor Pro: Adding Custom Display Conditions for Theme Builder

0
59
Elementor Custom Display Conditions for Elementor Pro Theme Builder

Way back in jolly old 2015, in a time before Elementor and Theme Builders are a thing. WordPress Developers like us were building WordPress Themes with custom codes. Editable customised layouts and structure were and sections were achieved by a combination of custom fields and page templates.

Then, when Elementor Pro came along in 2019, we all got lazy…. So, when our client from back in 2015 asked us to make improvements to said website, we’re kinda stuck with the old coding structure. We knew that moving forward, we would be using Elementor Pro but we didn’t want to change the backend custom fields structure (which is still really solid).

For context, the situation is like this: We have a hierarchal custom post type called “Books” and within each “Book” we have many “Chapters”. And to differentiate “Books” and “Chapters” we have a custom field called “Layout”.

Hierarchical Custom Post Type
[Books] 

Custom Fields
[Layout]
- [Book]
- [Chapter]
- [Publisher]
- [Review]

Of course, you can use Page Templates to distinguish the type of layout to load. We will be exploring both options. For context, we were using CMB2 for custom fields.

How to create custom display conditions for Elementor Pro Theme Builder

The Elementor Theme Builder is extremely powerful. By using the theme builder, we could load any elementor template and define rules for each template location. For example, we might define a template for the 404 page or as a single page for a custom post type.

However, the Elementor Theme Builder does not have any display rules for based on Custom Fields. Fortunately, we came across this piece of code, which we can customize according to our needs.

add_action( 'elementor/theme/register_conditions', function( $conditions_manager ) {
class Page_Template_Condition extends ElementorPro\Modules\ThemeBuilder\Conditions\Condition_Base {
public static function get_type() {
return 'singular';
}

public static function get_priority() {
return 30;
}

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

public function get_label() {
return __( 'Page Template' );
}

public function check( $args ) {
return isset( $args['id'] ) && is_page_template( $args['id'] );
}

protected function _register_controls() {
$this->add_control(
'page_template',
[
'section' => 'settings',
'label' => __( 'Page Template' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => array_flip( get_page_templates() ),
]
);
}
}

$conditions_manager->get_condition( 'singular' )->register_sub_condition( new Page_Template_Condition() );
}, 100 );

What the code does is to add a Page Template display rule to Elementor Theme Builder. For example, if a page template attribute is set on your page, Elementor will display the Elementor Template instead.

So if you are looking for a Page Template solution, the above code will work nicely.

Now let’s edit the code to fit our scenario where Custom Fields are used instead of page templates.

Editing the code

Without actual documentation, i suppose we’ll make educated guesses on what each block of code does. Lets go through which portions of the code we need to customise.

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

First, lets give a unique name to the rule. Make is something logical in our case ‘book_page_type’ sounds good enough.

public function get_label() { return __( 'Book Layout Template' ); }

Next let’s give it a label. This is what you will see displayed as a Theme Builder Display Rule. Then we make available custom field options in the form of a select box. Simply edit the “options’ array to fit your needs.

protected function _register_controls() { 
$this->add_control( 'book_page_type', 
[ 
'section' => 'settings', 
'label' => __( 'Book Template' ), 
'type' => \Elementor\Controls_Manager::SELECT, 
'options' => array( 
'book' => 'Book', 
'chapter' => 'Chapter', 
'publisher' => 'Publisher', 
'review' => 'Review', 
), 
] ); } }

Finally, the check function. This is the important bit. This is where the rules get validated a true Boolean flag is returned when conditions are a pass. Conversely, a false when the rule fails.

First we must find the value of the custom field (with get_post_meta) and compare it against the selected value of the chosen value. Refer to the options array you have set previously. A simple conditional statement will suffice.

public function check( $args ) { 
if (get_post_meta( get_the_ID(), 'book_page_type', true ) == $args['id'])
{ return true; }
else { return false; } 
}

The Final Code

Voila! Now simply add the final code to your functions.php file and you are good to go! Just a point to note that if you are using ACF instead of CMB2 or the native custom fields, you can replace get_meta with the ACF equivalent get_field function.

add_action( 'elementor/theme/register_conditions', function( $conditions_manager ) {
class Page_Template_Condition extends ElementorPro\Modules\ThemeBuilder\Conditions\Condition_Base {
public static function get_type() {
return 'singular';
}

public static function get_priority() {
return 30;
}

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

public function get_label() {
return __( 'Book Page Type' );
}

public function check( $args ) {
if (get_post_meta( get_the_ID(), 'book_page_type', true ) == $args['id']){
return true;
}else {
return false;
}
}

protected function _register_controls() {
$this->add_control(
'book_page_type',
[
'section' => 'settings',
'label' => __( 'Book Template' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => array( 
'book' => 'Book', 
'chapter' => 'Chapter', 
'publisher' => 'Publisher', 
'review' => 'Review',
),
]
);
}
}

$conditions_manager->get_condition( 'singular' )->register_sub_condition( new Page_Template_Condition() );
}, 100 );

Conclusion

We hope you have enjoyed this article and found it useful and as we have enjoyed writing it. Do check out our other WordPress and Elementor related articles.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments