Making block content hide or appear in WordPress

Having control over what content is seen and under what conditions is a valuable tool for any WordPress developer or designer.

Fortunately, there are many plugins to choose from in the WordPress ecosystem that can help. Here, we discuss four plugins that allow you to:

• Hide draft content on a live page.
• Apply display conditions to groups, headers, and footers.
• Show content based on date and time.
• Display different designs depending on device type.

A key difference between the plugins we reviewed is how easy — or difficult — it is to perform these actions.

Our selected plugins focus on showing or hiding content within blocks. We are not covering broader solutions like membership plugins that restrict page access, nor are we discussing how to lock, unlock, or hide blocks themselves. For that, see our article How to disable and lock Gutenberg blocks.

All four plugins should work with block, hybrid, or classic themes. They also support patterns, partially synced patterns, and fully synced patterns made with blocks.

While custom code may not always be the best way to show or hide blocks, we provide some code snippets as examples.

Plugins to show or hide block content in WordPress

The plugins we examine have similar capabilities but are implemented in different ways. Most include global settings in WP Admin > Settings, except for the last two plugins mentioned in the Other Plugins section, which do not have these options.

However, all of them provide per-block visibility controls in the Inspector panel (the right sidebar) within the editor, whether you’re working with a page, post, custom post type, or the site editor.

Block Visibility

Block Visibility is one of the best-known plugins in this space. It has been available since the early days of the block editor. It offers the most comprehensive feature set with an intuitive user interface (UI), and it is completely free with no premium version.

You can set visibility controls on any block based on different conditions, either individually or in combination:

• Browser & Device – Show or hide a block depending on the visitor’s browser (Chrome, Firefox, Safari, etc.) or device type (desktop, tablet, mobile).
• Cookie – Control visibility based on whether a specific cookie is present in the user’s browser, useful for personalization.
• Date & Time – Schedule content to be visible during specific hours or on certain dates, such as displaying a message only during business hours.
• Hide Block – A direct override that completely hides a block, regardless of any other conditions.
• Location – Show or hide content based on the visitor’s geographical location (country, region, or city).
• Metadata – Control visibility using custom metadata values, often useful for dynamic content in custom post types.
• Query String – Display or hide blocks based on URL parameters (like showing a block only if ?promo=true is in the URL).
• Referral Source – Change visibility depending on where the visitor came from (like hiding a special offer if the user arrived from Google).
• Screen Size – Adjust visibility based on screen width, allowing different content for mobile, tablet, or desktop users.
• URL Path – Show or hide blocks based on the page’s URL, useful for displaying content only on specific pages or sections of the site.
• User Role – Restrict visibility based on the logged-in user’s role, such as showing exclusive content to admins or members.

The plugin also includes additional features for managing block visibility:

• Visibility Presets – Save and apply predefined visibility settings to multiple blocks.
• Copy & Import Settings – Easily duplicate visibility settings across different blocks.

Additionally, a Hide block from everyone toggle is available directly in the block toolbar, providing a quick way to completely hide any block.

Let’s look at two common examples of how this plugin can be used.

Date & Time

The Block Visibility plugin offers full control over scheduling content based on date and time conditions. You can set specific time ranges, dates, or combinations of both.

For example, we want to display one heading when the shop is open and another when it is closed:

• “Our Shop Is Open Now” should be visible between 8 a.m. and 5 p.m.
• “We Are Closed Now” should be visible at all other times.

If this is your first time, click the plus (+) icon or the three-dot options menu to reveal the plugin’s control options and select Date & Time. Do this for both heading blocks.

Apply the 8 a.m. – 5 p.m. condition to the “Our Shop Is Open Now” heading.

The heading “We Are Closed Now” requires two sets of data to bridge the change of day at midnight.

The resulting setup displays the headings as set in the visibility condition.

Referral Source

For this example, we hide a button if the referral source contains any part of a prescribed URL. Alternatively, we could have chosen to display the button if the referral contains any part of a prescribed URL.

Finally, in Settings > Block Visibility, you’ll find three main sections:

• General Settings
• Visibility Controls
• Block Manager

For the best experience, we recommend enabling Full Control Mode in General Settings. This ensures that visibility settings are available for every block.

Some blocks, like the Button block, require this setting because the plugin’s visibility controls are not enabled by default in the Inspector panel.

Content Control

Not to be confused with the Restrict Content plugin, the Content Control plugin provides two conditions for hiding or showing content.

• Device Rules – Controls block visibility based on the device type (desktop, tablet, or mobile).
• User Rules – Displays a block based on user roles, which can be set for logged-in users, logged-out users, all roles, specific roles, or excluded roles.

These rules can be used separately or combined to create flexible visibility conditions. For example, we use the Device Rules to display an image optimized for different screen sizes. The larger image is set to appear only on desktops.

• A: In the page editor, Mobile, and Tablet views are toggled off.
• B: On the front end, the image is correctly sized for desktops.

Also, the mobile-optimized image is set to appear only on tablets and mobile devices.

• A: In the page editor, the Desktop view is toggled off.
• B: On the front end, the image is displayed for tablets and mobile devices.

This setup ensures that users see the most appropriate image size for their device, improving performance and user experience.

In addition, each block also includes four optional settings, accessible via the three-dot options menu:

• Copy – Copies the block settings.
• Paste – Applies copied settings to another block.
• Restore Default – Resets all visibility conditions for the block.
• Disable Device Rules / Disable User Rules – Turns off visibility conditions temporarily without deleting them.

We strongly recommend using the Disable Device Rules or Disable User Rules options while testing the plugin. This makes it easier to reset and adjust visibility settings as needed.

Within WP Admin > Settings, you will find several global settings for the plugin, such as defining the breakpoints. Here are the defaults for the three devices.

You can also toggle off the plugin for any block within these settings. The premium version of this plugin includes these and many other features:

• Block scheduling – Set time-based visibility conditions.
• WooCommerce rules – Control block visibility based on WooCommerce settings.
• Easy Digital Downloads rules – Restrict content for digital product customers.
• Boolean rules – Use logical conditions for block visibility.
• Rule engine for blocks – Create custom visibility conditions with greater flexibility.

Other plugins

In addition to the more popular options, there are two lesser-known plugins with fewer active installations that also provide block visibility controls:

Conditional Blocks – Advanced Content Visibility

This Conditional Blocks plugin allows you to control the visibility of WordPress blocks using advanced logic, all within a simple modal interface. You can set conditions to determine when and where a block should be visible.

The free version of Conditional Blocks includes basic visibility controls, such as:

• Lockdown Block from Everyone – Completely hides a block.
• Responsive Visibility – Show or hide blocks based on device type (mobile, tablet, or desktop).
• User Status Conditions – The User Logged In option displays blocks only for logged-in users, while the User Logged Out display blocks only for logged-out users.
• AND/OR Condition Logic – Combine multiple rules to create complex visibility conditions.

The Pro version expands functionality with additional features, including:

• Preset Manager – Save rule groups and apply them to multiple blocks across your site for efficient management.
• Advanced Breakpoints – Define custom screen sizes for different devices.
• Geolocation Control – Show or hide blocks based on a user’s location (requires an API key).
• Toolbar Settings – Manage visibility conditions directly from the block toolbar.
• User Role-Based Visibility – Restrict blocks based on user roles (such as admins, subscribers, customers).
• Scheduling Options – Set blocks to appear only within specific date ranges or times.
• WooCommerce & Membership Integrations – Control visibility based on cart contents, user memberships, and more.

For those needing greater flexibility and advanced conditional logic, the Pro version provides a complete toolkit for managing content visibility at scale.

Wicked Blocks Condition

The Wicked Blocks Condition plugin is a free plugin that allows you to hide or show blocks based on various criteria:

• User login status – Show or hide blocks depending on whether a user is logged in.
• User role – Restrict visibility based on user roles.
• Date and time – Schedule content to appear or disappear at specific times.
• Post categories or tags – Display content based on the assigned category or tag.
• Post status – Control visibility based on whether a post is published, draft, pending, etc.
• Query string parameter – Adjust visibility based on values in the URL.
• Custom PHP function – Execute custom logic for advanced visibility control.

The ability to use custom PHP functions makes this plugin particularly useful for developers who want to add their own logic directly within the UI.

Custom code to show or hide block content

If you have a simple use case and prefer to load only what’s necessary, you can use custom code instead of a plugin. This can be done by coding your own plugin or adding functions directly to your functions.php file.

Below are three PHP-based examples, but if performance is a priority, JavaScript might be a better choice.

Hiding content based on user login status

The following example hides all paragraph (<p>) elements when a user is logged in:

add_action( 'wp_head', 'kinsta_toggle_paragraphs_visibility' );

function kinsta_toggle_paragraphs_visibility() {
   if (is_user_logged_in() ) {
       echo 'p { display: none !important; }';
   }
}

The function checks if a user is logged in using is_user_logged_in(). If the condition is true, it injects CSS into the <head> section, hiding all <p> elements using display: none;. While the markup remains in the page source, it is not visible to users.

You can modify this behavior by replacing is_user_logged_in() with:

• !is_user_logged_in() – Hide content when the user is logged out.
• is_user_logged_out() – An alternative function for detecting logged-out users.

• !is_user_logged_out() – An alternative way to check if the user is logged in.

Hiding content based on geolocation

Suppose you wish to hide content for users from a given location. There is no limit on what you can show or hide, but here, we took a general approach and hid all images from U.S.-based users.

add_action('wp_head', 'kinsta_hide_images_for_us_visitors');

function kinsta_hide_images_for_us_visitors() {
   // Get visitor's IP address
   $user_ip = $_SERVER['REMOTE_ADDR'];
   $geo_api_url = "https://ipapi.co/{$user_ip}/json/";

   // Fetch geolocation data
   $response = wp_remote_get($geo_api_url);

   if ( is_wp_error($response) ) {
       return; // Exit if API request fails
   }

   $data = json_decode( wp_remote_retrieve_body($response) );

   // Check if the user is from the U.S.
   if ( isset($data->country_code) && $data->country_code === 'US' ) {
       echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
   }
}

Note:

• $_SERVER['REMOTE_ADDR'] is not always reliable and may return incorrect IPs.
• Calling the API on every page load may impact performance. A better approach would be to cache the response using a WordPress transient to store the data temporarily.

Hiding a featured image by category

None of the plugins we looked at had a way to show or hide page titles or featured images, as they are not blocks. Here, we are hiding the feature image for all posts whose category is books.

add_filter('post_thumbnail_html', 'kinsta_hide_featured_image_for_books_category', 10, 2);

function kinsta_hide_featured_image_for_books_category($html, $post_id) {
   // Check if the post belongs to the "Books" category
   if (has_category('books', $post_id)) {
       return ''; // Hide the featured image by returning an empty string
   }
   return $html; // Show the featured image if the category is not "Books"
}

This filter checks if the post belongs to the Books category using has_category(). If the condition is true, it removes the featured image by returning an empty string. Otherwise, it keeps the featured image unchanged.

Testing your implementation

Before deploying your chosen plugin or custom code, we recommend thorough testing to prevent unintended issues, such as restricting content from the intended audience. Here are some key testing steps:

• Ensure Compatibility – Verify that the plugin or custom code works seamlessly, especially with third-party block plugins.
• Review Source Code Output – Some methods hide content using CSS, while others remove it from the markup entirely. Consider how each approach impacts SEO before making a decision.
• Use a Staging Environment – Kinsta provides WordPress staging environments for all accounts, allowing you to safely test changes before applying them to a live site.

Summary

Controlling content visibility is an essential tool for WordPress site management. The approach you choose — whether an off-the-shelf plugin or custom code — depends on your specific needs and technical expertise.

If you want a host that makes it easy to handle development, test plugins, and keep your site secure, try Kinsta.

Security vulnerabilities can be a real concern, but with Kinsta, you get automatic malware scanning every three minutes, enterprise-level firewalls, and a platform optimized for speed and reliability. Get started with Kinsta today.

The post Making block content hide or appear in WordPress appeared first on Kinsta®.