Search

How to Hide a Gutenberg Block from Non-Logged In Users in WordPress

People like being appreciated are no exception for your users. Appreciating your users, especially those who logged in to your site, will make them feel special and valued. This article might be helpful if you want to hide/show block/s on your website based on user login status to give exclusivity to your user who logged in or subscribed to your website.

Some websites require users to log in to access a contained part or the whole website. The page will be displayed differently to users who are logged in and non-logged in. Maybe you are wondering,” Is it possible to hide a Gutenberg block from non-logged in users in WordPress?”. Well, this article will show you how to do that.

Steps to Hide a Gutenberg Block from Non-Logged In Users in WordPress

Step 1: Add the Code Snippet to the functions.php File

Here, we will add the simple PHP snippet into the functions.php file to hide or show widgets based on user status.

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can use the Code Snippets plugin to add a custom function in WordPress. Read here to learn more.

On your WordPress dashboard, go to Appearance -> Theme File Editor.

Once enter the Theme File editor page, select the functions.php and paste the code snippet below:

// Add CSS class for logged in and logged out users
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}

Note: Paste the code snippet at the end of the functions file content.

Once you’ve added the code snippet, update the theme file by clicking the Update File button.

Step 2: Add the Additional CSS Code

Alright, we will move to the next step. We will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

/* Logged in & out conditions */

.logged-in-condition .hide-logged-in {
  display: none!important;
}

.logged-out-condition .hide-logged-out {
  display: none!important;
} 

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

Step 3: Add the CSS Classes

Go to the WordPress Gutenberg editor. You can create new content (page/post) or select the existing one. Afterward, prepare the block/s you want to hide or show from your users based on their login status.

You can see from the image above we have two blocks that we want to hide and show to users based on their status.

  1. BEGIN TUTORIAL: Hide for logged-out users.
    • This block will appear only for users logged in to the website.
  2. GET FULL ACCESS: Hide for logged-in users
    • When the user is logged in to the website, this block will not appear (hidden).

Alright, it’s time to add the CSS class to the block. Go to the Block settings -> Advanced. Inside the Advanced settings panel, navigate to the ADDITIONAL CSS CLASS(ES), then write the CSS Class below (depending on user status).

CSS Class to Hide Blocks for Logged-out Users

Type hide-logged-out if you want your Gutenberg block to show only for logged-in users.

CSS Class to Hide Blocks for Logged-in Users

Type hide-logged-in if you want your Gutenberg block to hide when the user is logged in.

Perfect! Don’t forget to save or publish your project. To see how it works, go to your site and open it on a new window. Please log out from your WordPress site if you want to test whether the block/s already hides when the user is logged out.

The Results

  • User Status: Logged-in
  • User Status: Logged-out

The Bottom Line

One of the main goals of designing a website is to get as many visitors to access your content as possible, contributing to your business. But having users log in on your website is another level. It will give you more benefits, not just as a support, but also increase your business. We hope this article is helpful for you to give exclusivity to your users who logged in to your website.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Hide a Gutenberg Block from Non-Logged In Users in WordPress”

Leave a Comment