Remove buttons if a user is logged in on WordPress

Question

I have these two buttons in the header:

<a href="/" class="button primary-button">Members</a>
<a href="#/register/" class="button secondary-button">Register Now!</a>

If the user is not logged in or registered, these two buttons should be shown. If logged in, these two should not be shown. How can I do that?

Answer 1

You can check with is_user_logged_in() for if user is logged in wp or not

if ( is_user_logged_in() ) {
// your code for logged in user 
} else {
// your code for logged out user 
}

Add Members and Register button for logged out user you need to used below code

if ( !is_user_logged_in() ) {
  <a href="/" class="button primary-button">Members</a>
  <a href="#/register/" class="button secondary-button">Register Now!</a>
} 

Answer 2

There are various ways one can do this. The first one I'll mention will be leveraging a WP function, and the second one using only CSS.

Lastly, I'll end the answer with a way to display a button only to logged in users.

---

Option 1

WordPress has a function to determine whether a current visitor is a logged in user: is_user_logged_in() and resembles the following

function is_user_logged_in() {
    $user = wp_get_current_user();
 
    return $user->exists();
}

On can find the function in wp-includes/pluggable.php.

For your particular case, the following might do the work

<?php if ( !is_user_logged_in() ) : ?>
      <a href="/" class="button primary-button">Members</a>
      <a href="#/register/" class="button secondary-button">Register Now!</a>
<?php endif; ?>

---

Option 2

Adding something like the following in the Customize>Additional CSS might also do the work (it worked for me)

.logged-in .button-class { 
    visibility: hidden !important;
    display: none !important;
}

or

.button-class {display: block;}
.logged-in .button-class {display: none;}

---

Additional

Alternatively, if one wants to display the buttons only when a user is logged in, using CSS, do as follows

.button-class {
    visibility: hidden !important;
    display: none !important;
}
.logged-in .button-class { 
    visibility: visible !important;
    display: inline-block !important;
}