Conditionally display Contents based on User Login Status
Have you ever had the need to display content based on your visitors’ login status, e. g. to show a download link only to a user with a user account? In this tutorial I will show you how to do this with just a few easy steps!
Using this technique will allow you to display specific Divi sections, rows and even modules based on users’ login status. You will be able to display different content for logged-in and for logged-out users, which the other group can’t see.
This is especially useful for you, if you want to share premium content with users who signed up for an account while at the same time show a sign-up form or other content to users who haven’t created an account yet. But of course it can also be used to change any element on your website to create a better user experience based on the users’ login status.
To make this possible, you will need to add a few lines of PHP code to your website. We recommended that you use a Divi Child Theme and add it to the functions.php. If you don’t have a Child Theme yet, you can generate one using our Free Divi Child Theme Generator.
Add PHP code to functions.php file
As mentioned above, you need to add some code which will add the new functionality to your Divi website. With the code below, you’ll be able to use 2 custom CSS classes on your modules – by the way, for Divi Sections and Rows are internally just some fancy modules, so if I talk about modules from now on, that also includes Sections and Rows.
Those 2 classes are user_logged_in and user_not_logged_in and they are speaking enough that no explanation should be needed for a smart person like you. However, just to be clear, if you use the user_logged_in class, the module will only be shown to users who are currently logged into your website whereas the user_not_logged_in class will cause a module to be hidden from users who are logged in but instead will show only to users who are currently not logged in.
Alright, let’s start implementing. Open your child themes’ functions.php file and add the following code to it. I added some comments so it’s easier for you to understand whats going on:
PHP
// This filter will be fired for every Divi section, row, column and module. By the way, internally
// for Divi a section is just another module so if we talk about modules below, this also includes
// sectios, rows, and columns.
add_filter('et_module_shortcode_output', 'my_custom_et_module_shortcode_output', 10, 3);
function my_custom_et_module_shortcode_output($output, $render_slug, $module)
{
// First we check whether there are any CSS classes we could check for.
// If not, we can directly return the HTML of the module and are done.
if (!isset($module->props['module_class'])) {
return $output;
}
// Now we can check if one of our two classes "user_logged_in" or "user_not_logged_in"
// are present in the CSS classes and handle them accordingly.
// If the "user_logged_in" class is present, we also check if the user is logged in.
// If both conditions are met, we return the HTML of the module and if not, we
// return an empty string and omit therefore modules HTML. If you're curios, the ? :
// is called a ternary operator and it's just a shortform for a simple if statement. :)
if (strpos($module->props['module_class'], 'user_logged_in') !== false) {
return is_user_logged_in() ? $output : '';
}
// And here we basically do the same for the "user_not_logged_in" class but this time, we
// use the not operator (!) to check that the user is not logged in. Simple, right? ;)
if (strpos($module->props['module_class'], 'user_not_logged_in') !== false) {
return !is_user_logged_in() ? $output : '';
}
// Finally, if neither one of our classes is present in the modules CSS classes, we
// return the HTML of the module so it can be shown on the page.
return $output;
}
Add a custom CSS class to a Divi module
- Open the page where you want to use Conditional Display feature
- Enable Divi Builder
- Open any Section, Row or individual Module
- Head over to the Advanced tab
- Open the CSS ID & Classes toggle
- Enter one of the 2 custom classes user_logged_in or user_not_logged_in to the CSS Class field
- Save the module and your post
Now it’s time to harvest the fruits of your labour. Close the Divi Builder and view your post on the frontend. Since you’re still logged in, you should see all the modules without any custom CSS class and those modules that are using the user_logged_in class.
You can open a new incognito window and visit the same page. As you can see, here the modules with user_logged_in are not showing up but instead, those modules with the class user_not_logged_in are showing.
That’s it! It wasn’t too hard, right? And imagine the possibilities. With this, you could basically build a whole membership site. This technique also has a huge advantage over using a pure CSS approach, as content won’t be visible even for the geeks 😁
Use the Divi Pixel Conditional Display Settings
The Divi Pixel is powering thousands of websites across the world. Our team is working hard to bring new features, and this time, we have added Conditional Display settings to sections, rows and modules.
You will not only be able to show your Divi website elements by users login status, but also by users roles. With the Divi Pixel, it is extremely easy, as these settings are available in sections, rows and modules and can be enabled anytime and on any module you want.
We hope you enjoy reading this tutorial as well as the new Divi Pixel functionality. There are more cool features to come, so please make sure to sign up for our newsletter. If you haven’t purchased the Divi Pixel plugin yet, now it’s the right time. We are offering up to 30% off in our Summer Sale
Jan Thielemann
Jan is the co-founder of Divi Pixel. He is a professional software developer who started developing for WordPress as a hobby. When he made his first contact with Divi in 2016, he immediately saw the potential. Shortly after he developed his first Divi plugin, which was a huge success, he started a side business selling various Divi related products. He's an expert known throughout the whole Divi developer community.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
Perfect, I needed to do this!
This is just what I need, but it broke my site! I copied and pasted the PHP to my functions.php and then refreshed my home page which rendered as a totally blank white page. I had made no changes to any of the pages within Divi, so sadly, I can’t use it as it is.
Hello Seb,
We have updated this tutorial to make it working with the latest Divi 4.10+. Please try again with the updated code and let me know how it goes 🙂