How to change a bar based on the fact users are logged in or not ?

Greetings,

Another question related to the last one, on the new membership area I'm building...
On the front end of my website, I have a dark-blue top bar with some stuff on it, as you can see here : https://labo.marketing/complete-offsite-optimization-as-a-part-of-seo-services-for-heigher-search/

As you can see, this bar is currently displaying a call to action for a marketing quizz ("PASSEZ LE QUIZZ" means "take the quizz":wink:.

However, for my loggedin members, it doesn't make any sense to display this marketing call to action, because if they are logged in members it means they are already customers...

So I'm wondering if there is a way to repurpose this bar to make it display something else (for exemple a simple "Welcome to your membership area", or better, a menu with "account, support, log out, etc.":wink: for loggedin members ?

Or, if it's not possible, can I at least hide it, but JUST for loggedin members ?

Thanks a lot for your help,

DJ

  • Ash

    Hello DJExp

    If you want to hide the top bar for logged in users, please try this:

    add_action( 'wp_head', function() {
    	if( ! is_user_logged_in() ) return;
    	?>
    	<style type="text/css">
    		.topbar.flw{
    			display: none !important
    		}
    	</style>
    	<?php
    } );

    If you just want to change the button with text, try this:

    add_action( 'wp_head', function() {
    	if( ! is_user_logged_in() ) return;
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$('.topbar-right').html( '<span class="topbar-text">Welcome to your membership area</span>' );
    		});
    	</script>
    	<?php
    } );

    You can use this code in your child theme's functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • DJExp

    Hey Ash,

    Thanks a lot man, thanks to you I was able to adapt the code easily, include a quick member menu in that bar, and save a bit of space problem... Awesome ! Here's the code I used (In case I did a coding mistake, which is very possible) :

    <?php
    add_action( 'wp_head', function() {
    	if( ! is_user_logged_in() ) return;
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$('.topbar-right').html( '<span class="topbar-text">Bienvenue dans votre zone membre : <a href="https://labo.marketing/accueil-membres/" style="color:#68AA50;">Accueil Membres</a>  |  <a href="https://labo.marketing" style="color:#68AA50;">Profil</a>  |  <a href="https://labo.marketing/support/" style="color:#68AA50;">Support</a>  |  <a href="https://labo.marketing/wp-login.php?action=logout" style="color:#68AA50;">D&eacute;connexion</a></span>' );
    		});
    	</script>
    	<?php
    } );

    However, I have one weird problem... Now I don't know if it's related to the mod we just did or not, but I noticed the problem only after that...

    Anyway, here's the bug :

    As you can see if you check a "normal page" (not membership area), the white part of the header, with logo + my green main menu is "sticky"... (This is as per the theme configuration) :

    https://labo.marketing/conditions-generales-de-vente/

    However, when logged in, if you go to that page (i have granted you support access), you'll see it's different : https://labo.marketing/accueil-membres/

    On that page, when I scroll down the sticky header doesn't react the same... I mean, the header and white background part does, but the green menu behave entirely differently, and goes to the right corner for some reason...

    What's weird is that the menu bug happens only on that page as a logged in user : https://labo.marketing/accueil-membres/

    I checked other pages as a loggged in user, and the problem doesn't happen : https://labo.marketing/conditions-generales-de-vente/

    So I tried to think about what makes this page special, and the only thing I can think of is that the "https://labo.marketing/accueil-membres/" is protected by my membership system (Wishlist member), while the "https://labo.marketing/conditions-generales-de-vente/" isn'it.

    So I checked another protected page : "https://labo.marketing/categorie/ateliers/", and the problem doesn't happen.

    It really seem to happen only on this specific page : "https://labo.marketing/accueil-membres/" and no others, and I have no idea why...

    Any idea ? Thanks a lot for your great help !

    DJ

    P.S : I've just granted you admin access so you can have a look. Thanks.

  • Ash

    Hi DJExp

    Yes, I can see the issue on your site. But I don't think it's related to the modification we added. But to be sure, would you please remove the code I gave and check one more time if the issue exists?

    If the issue still exists, then that is not related to that code.

    However, what I noticed in that member page is, the menu is not getting sticky class. I am not familiar with the builder you are using, is there any option to set sticky menu?

  • Tony G

    If your content is in a sidebar, you can change it depending on the user state or role without code.

    In your sidebar add two widgets, one for logged-out users and one for logged-in users. Of course both will display. So now you need some logic to make the choice of what displays.

    Install the Widget Logic plugin. It adds a logic box to the bottom of all widgets.

    Now you can set in each widget:
    is_user_logged_in()
    or
    !is_user_logged_in()
    to check role:
    current_user_can( 'rolename' )
    No end-semicolons are required.

    Another way to do this is with the Shortcodes Ultimate plugin. You can wrap content for members and guests in shortcodes. Example:

    [su_members login_url="/wp-login.php"]Content for members. If present, link displays with warning to guests[/su_members]
    [su_guests]Content for guests[/su_guests]

    HTH

  • DJExp

    One more quick question : based on your code, Ash, I was able to add some menus for connected users, including a menu called "Déconnexion" (i.e. "sign off")... To make that menu work, I used this url : https://labo.marketing/wp-login.php?action=logout

    But for some reason, when I test this, I'm not immediately disconnected. Instead, I get a page asking me : "You're about to disconnect from MYWEBSITE. Are you sure you really want to sign off ?" (I'm translating, not sure it's this exact text in English).

    Usually, when you sign off from Wordpress, a click on the log off button immediately disconnect you, I don't remember this intermediate step...

    Is there a way to remove it, and to add a "Log off" link in my blue top bar, a link that will work like the normal deconnexion process ?

    Thanks a lot,

    DJ

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.