Back to Community
Home / Community / Plugin → Members – membership & user role editor plugin

How to Add a Logout Button to Your WordPress Site with the Members Plugin

16 threads Sep 16, 2025 Plugin → Members – membership & user role editor plugin

Content

Many users of the 'Members – Membership & User Role Editor Plugin' find its login form widget incredibly useful for front-end user access. However, a common question arises: how do you provide a way for those logged-in users to log out again without directing them to the WordPress admin area?

This is a frequent point of confusion because the plugin's primary widget is designed for logging in. By default, it does not include a logout button. Users looking for a seamless, front-end experience often need to create this functionality themselves.

Solution: Using a Custom Shortcode for a Logout Link

The most effective method, as referenced in the plugin's support community, is to create a custom shortcode that generates a logout link. You can then place this shortcode in the widget's "Logged in text" field.

Here is the step-by-step guide:

  1. Add the Code to Your Theme's functions.php File: Access your theme's files (always use a child theme to prevent your changes from being overwritten by updates). Open the functions.php file and add the following code snippet at the end:

    add_shortcode('members_logout_link', function() {
      return '<a href="' . wp_logout_url( home_url() ) . '">Log Out</a>';
    });

    This code creates a new shortcode [members_logout_link] that outputs a simple "Log Out" link.
  2. Use the Shortcode in the Login Widget:
    1. Go to Appearance > Widgets in your WordPress dashboard.
    2. Locate the "Members: Login Form" widget you have placed on your site.
    3. In the widget's settings, find the field labeled "Logged in text".
    4. In this field, type your custom message and place the shortcode. For example: Welcome! [members_logout_link]
    5. Save the widget changes.

Now, when a user is logged in, they will see your welcome message followed by a "Log Out" link. Clicking this link will log them out and redirect them to your site's homepage.

Customizing the Logout Link

The basic example above creates a simple text link. You can easily customize this to fit your site's design.

  • Change the Link Text: Modify the text inside the <a> tag in the code. For example, change Log Out to Sign Out.
  • Style it as a Button: Add a CSS class to the link so you can style it with your theme's stylesheet. Modify the code to include a class:

    add_shortcode('members_logout_link', function() {
      return '<a class="my-logout-button" href="' . wp_logout_url( home_url() ) . '">Log Out</a>';
    });

    You can then add CSS rules for .my-logout-button in your theme's customizer or CSS file to make it look like a button.
  • Change the Redirect URL: The function wp_logout_url( home_url() ) redirects users to the homepage after logout. You can change home_url() to any other URL on your site, for example: wp_logout_url( get_permalink() ) to redirect them back to the current page.

This approach provides a clean, built-in method for adding logout functionality directly through the Members plugin's widget, enhancing the user experience on your membership site.

Related Support Threads Support