Device Visibility Condition in Bricks Builder for Mobile or Desktop Users

Customizing visibility in Bricks Builder is straightforward when you want content to show only on mobile or desktop devices. With a small PHP snippet, you can set conditions based on the visitor’s device type.

TL;DR Jump straight to the code snippet ⬇️

Why Use Visibility Conditions?

Device-specific visibility helps tailor your content for different screen sizes, improving the user experience. While you could use display: none in CSS, that only hides the content visually—it’s still loaded in the DOM.

By conditionally rendering content, you reduce unnecessary output on certain devices, which can improve performance for mobile visitors in particular.

The Snippet

Add the following PHP code to your child theme’s functions.php file or via a custom snippets plugin:

/**
* Snippet Name: Device-Based Visibility
* @author    Adit MB
* @link      https://webdivo.com
* @version   1.0.1
* Description: Adds a visibility condition in Bricks Builder based on whether
* the user is on a mobile or desktop device using wp_is_mobile().
*
* Usage:
* Add this snippet to your theme's `functions.php` file or a custom code snippet plugin.
*/

if (!defined('ABSPATH')) {
    exit;
}

class Device_Based_Visibility {

    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        // Add the new visibility condition to Bricks Builder
        add_filter('bricks/conditions/options', array($this, 'add_device_visibility_condition'));

        // Check the condition result
        add_filter('bricks/conditions/result', array($this, 'check_device_visibility_condition'), 10, 3);
    }

    public function add_device_visibility_condition($options) {
        $options[] = [
            'key'     => 'device_visibility',
            'label'   => esc_html__('Device', 'bricks'),
            'group'   => 'other',
            'compare' => [
                'type'    => 'select',
                'options' => [
                    '='  => esc_html__('Is', 'bricks'),
                ],
            ],
            'value'   => [
                'type'    => 'select',
                'options' => [
                    'mobile'  => esc_html__('Mobile', 'bricks'),
                    'desktop' => esc_html__('Desktop', 'bricks'),
                ],
            ],
        ];

        return $options;
    }

    public function check_device_visibility_condition($result, $condition_key, $condition) {
        // Only handle the custom 'device_visibility' condition
        if ($condition_key !== 'device_visibility') {
            return $result;
        }

        // Determine if the current device is mobile or desktop
        $current_device = wp_is_mobile() ? 'mobile' : 'desktop';

        // Get the selected condition values from Bricks
        $compare = isset($condition['compare']) ? $condition['compare'] : '=';
        $value   = isset($condition['value']) ? $condition['value'] : '';

        // Compare the current device with the selected value
        if ($compare === '=') {
            return $current_device === $value;
        } elseif ($compare === '!=') {
            return $current_device !== $value;
        }

        return $result;
    }
}

new Device_Based_Visibility();

How It Works

When you add a condition to any Bricks element, you’ll see a new option called Device.
Choose whether the element should display on Desktop, Mobile, or the opposite.

Example:

Before using this snippet, I had a .wd-title__desc-wrap div set to display: none for tablets and below. It still appeared in the DOM if you inspected the page.

After adding the snippet and applying the Device: Desktop condition, the element (and its content) doesn’t render at all for mobile visitors—cleaner output and better performance.