You may want to demo certain aspects or elements of website to clients before allowing it to be viewed by members of the public. Let’s say you have a number of new pages you want to demo and wish for the client to be able to navigate through these pages using the normal nav menu in the header. At the same time you don’t want users who are simply browsing the site to be able to see these pages yet. A good way of doing this is making a new additional menu featuring these pages and using a simple PHP function. Just replace the class names below to match yours and then add this function in your theme’s functions.php file.
function my_wp_nav_menu_args( $args = '' ) {
if ( is_user_logged_in() ) {
$args['menu'] = 'logged-in-menu';
} else {
$args['menu'] = 'not-logged-in-menu';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
This will then display the menu with your new demo pages when you are logged in to the site whilst displaying the usual menu to users who are browsing the site. All you then have to do is change round the menus and comment out / delete the code once you want it to go live!
If you don’t wish to use PHP or don’t have access to edit PHP files, you can add some CSS to an HTML block using the “<style>” tags. Let’s say you have a element in Elementor that you wish to show logged in user but not logged out user. You can add a class name the element, column or row you wish to hide and then use a CSS rule to hide it. The code you want to use for this is:
<style>
body:not(.logged-in) .hide-for-logged-out {
display: none !important;
}
</style>
A few screenshots to illustrate:
First add a class name to whatever element you wish to hide:
Then add an HTML block element above the element you wish to hide and populate it as per below:
This will then hide whatever element you add the class name hide-for-logged-out to. Then just delete the HTML block or remove the class name from the element in order to display it as normal.