How to add WordPress logout link to navigation menu – Learn WordPress from a to z

Tutorials 0 lượt xem
How to add WordPress logout link to navigation menu - Learn Wordpress from a to z thumbnail

Do you want to add a WordPress logout link to your site?

If you run a membership site, bbPress forum, ecommerce store, or learning management system (LMS) using WordPress, it would be helpful to have a logout link. your use.

In this article, I will show you how to add a WordPress logout link to the navigation menu, as well as to other sections of your website.

How to Add a WordPress Logout Link

Logout Link for WordPress

Normally, you can log out of your WordPress site by clicking on the logout link. This link is located under your profile picture at the top right of the WordPress admin bar.

You need to hover your mouse over your username and it will appear in the drop-down menu.

logout bar

In case you or the site admin has disabled the WordPress admin bar, then you will not be able to see the WordPress logout link.

The logout link for your WordPress site looks like this:

http://example.com/wp-login.php?action=logout Don’t forget to replace example.com with your own domain name.

You can directly visit this link in your browser window to log out of your WordPress site.

When you visit the WordPress logout link, it will take you to the warning page. You’ll need to click the sign out link to confirm that you really want to sign out.

logout warning

Add WordPress logout link to navigation menu

Adding a WordPress logout link to your site’s navigation menu will make it easily accessible from any page on your site.

Just go to Appearance » Menus in your WordPress admin. Then click on the custom links tab to expand and add a logout link in the URL field.

navigation logout menu

Once done, click on the ” Add to menu ” button and you will notice the link appear in the right column. You can adjust its position by dragging it up or down.

Don’t forget to click the ” Save menu ” button to store your changes.

You can now visit your website to see the logout link in the navigation menu.

logout example

The problem with this is that it is visible to all users (both logged in or logged out). It doesn’t make sense to show the logout link to the user who is actually logged in.

You can improve that by following my tutorial on how to show different menus to logged in users.

Add WordPress Logout Link on Sidebar Widget

WordPress comes with a default widget called Meta. This widget displays a series of useful links including a logout or login link for the user.

meta widget

Some people find the other links in the Meta Widget not quite as helpful.

Alternatively, you can also add a logout link using HTML code. Here is the HTML code you will need to add: 

<a href="http://example.com/wp-login.php?action=logout">Đăng xuất</a>

html logout widget

Add Flexible Login/Logout Links in WordPress

If you manually add the logout link in WordPress, the problem is that it doesn’t change based on the user’s login status. For example, if the user is still not logged in, the logout button should be displayed as logged in or hidden.

To overcome that, you can use a plugin to dynamically display the login or logout link based on the user’s login status.

First, you will need to install the Login or Logout Menu Item plugin .

After installing and activating the plugin, you will go to Appearance » Menus in your WordPress admin and add a Login/Logout link to your menu.

login logout plugin

After you hit “Save Menu” and check your WordPress site, you will see the link in the menu.

login page

It will take you to a page to log in, or log out if you are already logged in.

This method also works with WooCommerce, MemberPress, and other WordPress membership platforms.

Epilogue

I hope you have mastered how to add a WordPress logout link to the navigation menu.

If you find it interesting, you can follow the  basic WordPress section  to know more new knowledge.

Follow fanpage to receive the latest posts:  Group

Bài viết liên quan