Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can conditional tags be used to hide specific blocks on mobile devices


Can conditional tags be used to hide specific blocks on mobile devices


Yes, conditional tags can be used to hide specific blocks on mobile devices. This can be achieved by combining the `is_mobile()` conditional tag with other conditions to control the visibility of blocks based on the device type. Here is an example of how you can use `is_mobile()` to hide a block on mobile devices:

php
if ( ! is_mobile() ) {
    // Display the block on desktop devices
} else {
    // Hide the block on mobile devices
}

Example: Hiding a Block on Mobile Devices

Here is an example of how you can use `is_mobile()` to hide a block on mobile devices:

php
// Check if the block should be hidden on mobile devices
if ( is_mobile() ) {
    // Hide the block
    return;
}

// Display the block on desktop devices
echo 'This block is only visible on desktop devices.';

Example: Showing a Block on Mobile Devices

Here is an example of how you can use `is_mobile()` to show a block on mobile devices:

php
// Check if the block should be shown on mobile devices
if ( ! is_mobile() ) {
    // Hide the block on desktop devices
    return;
}

// Display the block on mobile devices
echo 'This block is only visible on mobile devices.';

Example: Using `is_mobile()` with Other Conditions

Here is an example of how you can use `is_mobile()` with other conditions to control the visibility of blocks based on the device type and other conditions:

php
// Check if the block should be hidden on mobile devices
if ( is_mobile() && is_category( 'vegetarian' ) ) {
    // Hide the block on mobile devices and vegetarian category
    return;
}

// Display the block on desktop devices and all categories
echo 'This block is visible on desktop devices and all categories.';

Example: Using `is_mobile()` with Responsive Designs

Here is an example of how you can use `is_mobile()` with responsive designs to control the visibility of blocks based on the device type and screen size:

php
// Check if the block should be hidden on mobile devices
if ( is_mobile() && wp_get_current_screen_size() == 'mobile' ) {
    // Hide the block on mobile devices
    return;
}

// Display the block on desktop devices
echo 'This block is visible on desktop devices.';

By combining `is_mobile()` with other conditions and responsive designs, you can create complex rules for controlling the visibility of blocks based on the device type and other conditions.

Citations:
[1] https://wordpress.org/plugins/conditional-blocks/
[2] https://learn.wordpress.org/lesson-plan/conditional-tags/
[3] https://codex.wordpress.org/Conditional_Tags
[4] https://developer.wordpress.org/themes/basics/conditional-tags/
[5] https://generatepress.com/forums/topic/conditional-blocks-in-block-element/