Add CSS class for logged in and logged out users using PHP

This tutorial shows how the filter can conditionally output elements with a class of logged-in to logged-in users only and elements with a class of logged-out to visitors not logged in.

Add the following in the child theme’s functions.php or in a code snippets plugin:

// 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;
}

With this in place, for any element that you wish to be output only for users that are logged into your Bricks WordPress site, simply add this class: logged-in

For any element that should be output only for visitors that are not logged in, add this class: logged-out

Sample use case: Render separate menus for logged-in users and logged-out visitors.

For example: 

/* Styles for logged in users */
.logged-in .user-profile {
  background-color: #3f51b5;
  color: #fff;
}

.logged-in .cta-button {
  border: 2px solid #3f51b5;
  color: #3f51b5;
}

/* Styles for logged out users */
.logged-out .cta-button {
  background-color: #3f51b5;
  color: #fff;
}