[Closed] Create a logout link

[Author]

Posts

[gaborG]

I am trying to: create a logout link for my front-end admin.
I tried this, from the wordpress function reference:

<a href="<?php echo wp_logout_url( home_url() ); ?>">Logout</a>

But it just crashes my layout and doesn't display a logout link.
Any ideas?

[Beda]

You can't use PHP in a WP Backend editor.

Try to create a Custom ShortCode instead:

/** Custom Logout Shortcode
 */
 function custom_logout_link_func() {
            $return = wp_logout_url();?>
            <a href="<?php echo $return; ?>" class="btn btn-primary btn-xs btn-block" role="button" style="margin-bottom: 10px;">Logout</a>
            <?php
        }
        
    add_shortcode('logout_link', 'custom_logout_link_func');

This goes to your functions.php file.
It already includes some BootsTrap HTML standards.

Then make sure to register the ShortCode in your Views > Settings > Compatibility >3rd Party ShortCode arguments
https://toolset.com/documentation/user-guides/shortcodes-within-shortcodes/ > Third-party short code arguments

Afterwards you can use this short code anywhere in a View as example, or Content Template.

That should work out of the Box.

[gaborG]

This works, thanks.
Just 2 tweeks are needed:
1. for some reason this button appears on the top of the page instead of in its proper position.
I used this code:

<div class="row">
  <div class="col-xs-12 col-centered">
    <div class="adming-logo">
        <img src="<em><u>hidden link</u></em>" alt="Website logo">
    </div>
    
    [toolset_access role="Guest" operator="allow"]
    
    <div class="not-logged-in">
      [wpv-login-form redirect_url="<em><u>hidden link</u></em>" allow_remember="true"][/wpv-login-form]
    </div>
    
    [/toolset_access]

    
    [toolset_access role="Guest" operator="deny"]
    
    <div class="logged-in">
      <div class="user-info">
        Welcome
        [wpv-user field="user_firstname"][/wpv-user] [wpv-user field="user_lastname"][/wpv-user]
      </div>
      <div class="logout">
        [logout_link]
      </div>
    </div>
    
    [/toolset_access]
    
  </div>
</div>

This is placed in a Visual editor cell that covers the top-left half of the page layout, but instead the button appears above the entire Layouts content, full-width.

2. I would like the button to refresh this site instead of navigating to the default WP login, because as you see, if the user is not logged in, a login form appears in the same place. I don't want my users to go into the dashboard at all.

[Beda]

I apologize the delay here

In the Visual Editor Cell you will need to make sure that you use HTML mode, but I'm sure you did that correctly.

Then it depends where you inserted that Cell.

With "on the top" do you mean it displays above your Logo?
I would need to see your Layout setup live, if possible, to see what to change.

It's difficult to reproduce this since I don't know how your Layout is set up and where you use it, additionally what CSS you use.

For that, I would eventually also need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

❌ Please backup your database and website ❌

✙ I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site.
This is also a reason the backup is really important

For the "redirection" (refresh), I would suggest this snippet to your functions.php:

/**
 *Used to redirect after logout 
 */

function logout_page() {
    $login_page  = home_url();
    wp_redirect( $login_page . "" );
    exit;
}
add_action('wp_logout','logout_page');

This redirects to your Home URL after logout.
You can use any URL you want.

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

[Beda]

I apologize the delay here

You seem to have that Button short code included twice but I can't find where.

Even if I remove the Visual Editor Cell content, it still displays, see the screenshot

The code (PHP) i provided you uses some Bootstrap Button Classes, which you might need to change:
hidden link

You can change all classes in the PHP snippet in this line:

            <a href="<?php echo $return; ?>" class="btn btn-primary btn-xs btn-block" role="button" style="margin-bottom: 10px;">Logout</a>

I then suggest to recreate the Layout if it still happens.

Try to set it up step by step, row by row, and check when this happens again.

Also try to avoid Access Rules until you have the position as desired, and try to play with the Button classes hardcoded in the PHP snippet I provided you.

I personally, to delve this, would recreate the Layout (also to troubleshoot it)

It would give me the possibility to narrow down the issue faster.

About the DataBase Dump, this is a copy of your Database File, which is useful to backup your site.
If you loose data or settings, you can simply rebuild your site with this backup:
https://codex.wordpress.org/Backing_Up_Your_Database

Please don't hesitate to inform me in case the issue persists

Thank you for your patience.