How to define the $query parameter for Elementor

The Elementor page builder is a great page builder for building WordPress websites. It offers a plethora of extra functions to be used by developers. Often, you'll come across the $query parameter. This parameter is intended to define media queries and can be helpful with functions like add_rules. In this post, I'm going to show you how it works and how you can use it.

This article is a sequel to my earlier article about using the Elementor add_rules function.

Getting started

When you use the add_rules(), we do it like the example below. This is also where we stopped in the last tutorial.

add_action(    'elementor/element/parse_css', function( $post_css, $element ) {
 
    $selector = 'body';
    $style_rules = [
        'background-color' => '#0077ff', //property and value
    ];
 
    $post_css->get_stylesheet()->add_rules($selector, $style_rules, null);
 
    // Repeat for every rule
 
}, 10, 2 );

If you have a good look at the add_rules() function, you'll see that it has three parameters, but that we only did define two (well, technically we did define three, but the last one is null by default).

The last parameter is, you guessed it, for the media queries. How do we add media queries with Elementor add_rules function? To do so, we need two things:

1. We need to register a device for each media query.

2. We need to add the media query.

Registering a device for media queries

Let's start with the first, registering a device. This is done with the add_device() function (docs). Registering devices works like 'breakpoints'. If you register a device at 600px, you can choose to do a min-width of 600px or a max-width of 599px.

Registering a device is done like this. We place this code inside the add_action().

$post_css->get_stylesheet()->add_device( '600', 600 );
$post_css->get_stylesheet()->add_device( '800', 800 );

Adding CSS rules

Now, let's add some new CSS rules. We'll create two new CSS rules:

1. A background-color applied to body for max-width: 599px.

2. A background-color applied to body for min-width: 800px.

For the background-color and the body (the selector), we already have code. Let's now create two variables with the third media query parameter:

$query_min = [
   'min' => 800, //for a minimum, take the value of the device's registration
];
 
$query_max = [
   'max' => 599, //for a maximum, take the value of the device's registration minus 1 (600 - 1 = 599)
];

This makes the total code come down to the following:

add_action(    'elementor/element/parse_css', function( $post_css, $element ) {
 
    $post_css->get_stylesheet()->add_device( '600', 600 );
    $post_css->get_stylesheet()->add_device( '800', 800 );
 
    $selector = 'body';
    $style_rules = [
        'background-color' => '#0077ff', //property and value
    ];
 
    $query_min = [
        'min' => 800, //min or max and device reference
    ];
    $query_max = [
        'max' => 599, //min or max and device reference
    ];
 
    $post_css->get_stylesheet()->add_rules($selector, $style_rules, $query_min);
    $post_css->get_stylesheet()->add_rules($selector, $style_rules, $query_max);
 
    // Repeat for every rule
 
}, 10, 2 );

This outputs the following CSS:

@media (max-width: 599px) {
    body {
        background-color: #0077ff;
    }
}
 
@media (min-width: 800px) {
    body {
        background-color: #0077ff;
    }
}

Conclusion

As you've seen, adding custom CSS with the Elementor page builder is a very advanced tool. You can achieve really great things with this technique, especially when you're building Elementor optimised themes or when you have some custom integration with it. Perhaps you could even use it in a plugin with custom Elementor widgets.