Depending on your needs, there are several ways to hide content in WordPress. For example, you can make a post private, remove an element from a WordPress theme, hide content with a “Read More” button, hide content based on specific user properties, and more.

In this tutorial, I cover some common methods using programmatic solutions and free plugins.

Hide Content by Making Specific Pages Private

If you have to hide a limited number of posts from public view, edit the individual post that you want to make private, open the Summary post sidebar section, and set the visibility value to “Private.”

The Summary post sidebar section with a post made private.

The same change can be applied in bulk from the menu with the list of posts. (E.g. All Posts, All Pages, etc.) Here first select the posts using the checkbox, then select “Edit” with the select box at the top of the page and click Apply.

To conclude, under the Status value, select “Private” and click the Update button.

A bulk operation used to set the post status to “Private”

Password Protecting Posts Using the WordPress Built-In Feature

WordPress has a built-in feature to password-protect individual posts and pages.

To use this feature, first edit the post that you want to password-protect. After that, open the Summary post sidebar section of the post editor. To conclude, click the link beside “Visibility” and select “Password protected”, then enter the password in the provided input field.

The Visibility modal window with the configured password.

Hide Content in a Specific Time Range

The Restricted Blocks plugin allows you to hide editor blocks based on custom criteria.

Using the Time Interval restriction you can set a time interval in which you want to remove the block from the front-end layout.

To start, install the plugin from the WordPress.org plugin repository,

When the plugin is activated, proceed to the Restrictions menu. Here, you can configure particular restrictions that will later apply to blocks.

Create a new restriction with a custom name and select Time Range as the name of the restriction. Then, open the Time Range section and enter the time interval in which the block should remain hidden. To conclude, under the Advanced tab, select the “Exclude” mode.

A restriction of type “Time Range” defined with the Restricted Blocks plugin for WordPress.

To apply the restriction to a block, edit the post and click on the block on which you want to apply the restriction. Then, under the Restriction block sidebar section, select the restriction you just created.

The Restriction block sidebar section with a restriction of type Time Range selected.

Hide Content Based on the User Device

To achieve this, we are going to use Content Control, a popular content restriction plugin for WordPress.

With the plugin installed, open the Device Rules section and select which device should see the selected block. The options are Mobile, Tablet, and Desktop.

Device Rules section of the Content Control plugin.

Hide Content Based on the User Role

Using another feature of the Content Control plugin, we can make content visible only to the specified user role. To achieve this, click on the block where you want to apply this behavior. Then, in the User Rules section, select “Logged in Users”.” With the User Role selector, set “Matching”. Finally, using the Chosen Roles field, add the WordPress roles that should be able to see this content.

User Rules applied with the Content Control plugin. In this example I created a paragraph visibile only for users with the administrator or editor roles.

It’s worth noting that you can use this type of restriction, for example, to create private sections of the site accessible only to paying subscribers. You first create a role for the paying subscriber; then you manually enable content using the Content Control plugin.

Using Conditional Tags in Themes

If you are comfortable editing theme files, use WordPress conditional tags to hide content based on certain conditions.

Example of hiding content for non-logged-in users:

<?php if ( is_user_logged_in() ) : ?>
<p>This content is only visible to logged-in users.</p>
<?php else : ?>
<p>You must be logged in to see this content.</p>
<?php endif; ?>

Add this code to your theme’s template files where you want the content to be conditionally displayed.

Using the Reusable Blocks

Using the Gutenberg block editor, you can use the Reusable Blocks feature to create content blocks that you can easily show or hide.

  1. Create a reusable block for the content you want to hide.
  2. You can add or remove this block when editing a page or post as needed.

Hiding Widgets

You can conditionally hide widgets using widget area plugins like Content Aware Sidebars. These plugins allow you to control where and when widgets appear based on various conditions.

Hide Content Using an Accordion

The accordion is a UI element that displays and collapses specific elements on the page.

With the Ultimate Blocks plugin, you can create a Content Toggle block that acts as an accordion element. To start, with the plugin active on your WordPress site, proceed to the Toggle State block sidebar section and enable the Collapsed property.

The accordion created with the Content Toggle block. Note that the Toggle State block sidebar section is visible on the right with the Collapsed property enabled.

Hide Content With Elementor

The Display Conditions feature of Elementor gives you several possibilities to achieve this, including post conditions (category, tags, author, etc.), user status related conditions (login status, role, etc.), date-related conditions, and more. 

Here is the Elementor tutorial on how to show and hide elements using the display conditions. Details on all the conditions are available here.

Note that Display Conditions is a premium feature of Elementor. Consequently, these functionalities are locked in the free edition available on WordPress.org.

Create a Read More Link/Button to Show Hidden Content

This feature is used when you want to add textual content to the page without taking up too much space in the layout.

Programmatic Solution

Since adding this functionality requires a simple implementation, we will first see a programmatic solution.

First, add the link or button to display the hidden content. The default block named “Buttons” is ideal for this job. Then, assign a class to the button. This can easily be done directly in the WordPress post editor using the Additional CSS Class(es) field. This class will be used in the JavaScript part to create an event listener associated with this element.

A “Read More” button created with the Buttons block in the WordPress post editor.

You also have to assign an identifier or a class to the hidden content. This other selector will be used to display the hidden content by modifying the element style with JavaScript.

Now add in your theme CSS files a rule to make by default the content with that class hidden:

.hidden-content{
display: none;
}

To conclude, add a JavaScript script to your site:

/**
* Enqueue a script with jQuery as a dependency.
*/
function enqueue_read_more_scripts() {
wp_enqueue_script( 'read-more', get_stylesheet_directory_uri() . '/js/read-more.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_read_more_scripts' );

In the script, add the following content:

(function($) {

$(document).ready(function($) {

$('.read-more-button').click(function() {

// Display the hidden content.
$('.hidden-content').show();

});

});


}(jQuery));

Using a Plugin

If you prefer using a plugin, there are a few options for this. In this tutorial, I’ll be using the most popular and best-rated “Read More” plugin, which is the Read More & Accordion plugin.

Begin by visiting the plugin’s Read More menu. In this menu, you can create multiple types of read-more variations, specifically a button, an inline button, an accordion, a link button, a button & popup, and more. For this tutorial, I used the “Button” type.

The read more settings with style and animation options.

Assign a name to your “Read More” button. Then, configure the dimensions of the element, style options, animation options, and more.

After saving, you will be provided with a shortcode. Copy it and include it in your post. That’s all. The “Read More” element is now available in your post.

Hide Content With CSS

You can hide specific elements on your site using custom CSS. This method hides content visually but does not restrict access to it in the source code.

The first step involves first identifying the selectors of the element that you want to hide. You can achieve this by opening the site with Chrome and then clicking F12 to open the Chrome DevTools (a tool for web developers that allows you to inspect and modify the page). Click on the arrow at the top left of the DevTools window, and then click again on the element that you want to remove. This operation will display the HTML of the element that you want to remove, including its selectors. Write down the selector of the element that you want to remove.

Then add to your theme custom CSS this rule:

#elements-to-remove{
display: none;
}

Note that if the element that you want to remove doesn’t have a selector you can achieve the same by applying a more complex CSS rule or by adding the id or class by modifying the theme.

Completely Remove an Element From the WordPress Theme

This process is more complex and requires the following procedure:

  1. Create a child theme. This step is necessary to prevent overwriting the theme at each theme update.
  2. Identify the element that you want to hide from the theme
  3. Remove it from the theme