I'm trying to display text in a button in the header that says "LOG IN" or "LOG OUT" depending on the visitor's status. The button calls a slider action, so I just need to change the text displayed on it.

I have found snippets like this, but they go into index.php, and I don't know how to add them to the button. (In my header.php)

if ( is_user_logged_in() ) {
    echo 'Welcome, registered user!';
} else {
    echo 'Welcome, visitor!';
};

I think the solution might be to name it in my .js file, and have the action there as well. This is my first attempt, and have no idea if this is the correct way to achieve this.

jQuery(document).ready(function(){
if ( is_user_logged_in() ) {
    document.getElementById("visitorstatus").innerHTML = "LOG OUT";
} else {
    document.getElementById("visitorstatus").innerHTML = "LOG IN";
};
});

And then to add <div id="visitorstatus"> to the button in header.php? Please be kind! I'm new to PHP/JS

ETA header.php

<div class="memberpresswindow">
<button type="button" class="hide-btn">X</button>
<?php echo do_shortcode( "[mepr-login-form]" ); ?>
<?php echo do_shortcode( "[mepr-membership-registration-form id=702]" ); ?> 
<br>
<hr>
<button type="button" class="hide-btn">CLOSE</button> 
</div>
<button type="button" class="show-btn">LOG IN | REGISTER

</button>
            </div>

I'm trying to display text in a button in the header that says "LOG IN" or "LOG OUT" depending on the visitor's status. The button calls a slider action, so I just need to change the text displayed on it.

I have found snippets like this, but they go into index.php, and I don't know how to add them to the button. (In my header.php)

if ( is_user_logged_in() ) {
    echo 'Welcome, registered user!';
} else {
    echo 'Welcome, visitor!';
};

I think the solution might be to name it in my .js file, and have the action there as well. This is my first attempt, and have no idea if this is the correct way to achieve this.

jQuery(document).ready(function(){
if ( is_user_logged_in() ) {
    document.getElementById("visitorstatus").innerHTML = "LOG OUT";
} else {
    document.getElementById("visitorstatus").innerHTML = "LOG IN";
};
});

And then to add <div id="visitorstatus"> to the button in header.php? Please be kind! I'm new to PHP/JS

ETA header.php

<div class="memberpresswindow">
<button type="button" class="hide-btn">X</button>
<?php echo do_shortcode( "[mepr-login-form]" ); ?>
<?php echo do_shortcode( "[mepr-membership-registration-form id=702]" ); ?> 
<br>
<hr>
<button type="button" class="hide-btn">CLOSE</button> 
</div>
<button type="button" class="show-btn">LOG IN | REGISTER

</button>
            </div>

• php
• login
• conditional-content
• logout

Share Improve this question edited Jun 18, 2019 at 20:08 RiddleMeThis 3,80788 gold badges2222 silver badges3030 bronze badges asked Jun 18, 2019 at 19:33 hedgehogsweaterhedgehogsweater 533 bronze badges 3

• Can you please share your header.php where the button is? PHP is definitely the place to do it. JavaScript is kind of a last resort for changing things and the function you are using there, is_user_logged_in(), is a PHP one that won't work in JS. – WebElaine Commented Jun 18, 2019 at 19:36
• Also, have you built a child theme yet? Anytime you make changes to a theme they need to be made in a child theme so your changes don't get overwritten when the theme updates. – WebElaine Commented Jun 18, 2019 at 19:37
• There is a child theme. The header.php is copied over from the parent; the functions.php is a fresh file. I've added the snippet fr header.php that displays the button. Where it says "LOG IN | REGISTER" is where I'd like to change the static text to conditional text. – hedgehogsweater Commented Jun 18, 2019 at 19:50

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have the PHP IF statement needed, is_user_logged_in().

Just add your button to that and you should be good. Something this...

<?php if (is_user_logged_in()) {
    echo '<button type="button" class="show-btn">LOG IN</button>';
} else {
    echo '<button type="button" class="show-btn">REGISTER</button>';
}; ?>

Note: You have an extra </div> in your code above.