Pretty Logout Permalink Without a Plugin

Learn how to add a tidy /logout permalink to your WordPress website without adding another plugin. In this tutorial we’ll add a URL rewrite rule to create a pretty permalink called “/logout”, and we’ll add just a few of lines of code to your custom child theme’s functions.php file to logout of the site cleanly.

Logout the WordPress Way

Usually, to log out of WordPress you can use something like this as a URL:

https://example.org/wp-login.php?action=logout

There’s nothing wrong with this. It doesn’t look particularly clean. but it does work, and you can create a menu item with this as the menu item’s custom URL.

Create a Pretty “/logout” Permalink

An easy way to create a /logout endpoint for your site is to just create a new Page and set its permalink to “logout”. Then you could maybe create a custom shortcode, put it into a block on your “logout” page and just call the PHP function wp_logout() from within your shortcode. I’ve not tried this approach, but I think it would work just fine, and creating a custom shortcode is pretty easy.

But… we’re going to use this tutorial as an excuse to create a custom endpoint with the add_rewrite_rule() PHP function.

It’s useful to understand a bit of what happens behind-the-scenes when you look at a WordPress post, product or a page…

This actual tutorial post you’re reading right now has the following URL…

https://wp-tutorials.tech/refine-wordpress/add-a-pretty-logout-permalink/

but… behind-the-scenes, the actual nuts-and-bolts URL is something like this…

https://wp-tutorials.tech/index.php?p=2609

A system called URL rewriting translates the URL you’re looking for (the pretty permalink) into this proper/raw format so that WordPress can deal with it. In this case, “p=2609” stands for “post_id” 2609, with “p” being a “query variable”. So what we want to do is create a rewrite rule that converts the pretty URL permalink…

https://example.org/logout

https://example.org/index.php?hwlo_action=logout

Then we can just hook the template_include action to see if the query variable “hwlo_action” has been specified and set to the value “logout“. If it has, then we can just call wp_logout() and let WordPress do what it needs to do regarding cookies and redirects.

Let’s Write some Code

Create a new file in your custom child theme’s folder called functions-logout-url.php and paste the following into it.

<?php

/**
 * Headwall Logout with Pretty Permalink
 *
 * https://wp-tutorials.tech/refine-wordpress/add-a-pretty-logout-permalink/
 *
 * Register the /logout permalink:
 *  * When /logout is is detected, add 'hwlo_action=logout' to the back-end URL.
 *  * When WordPress is figuring out what template to use, detect if
 *    hwlo_action=logout is set, then call wp_logout()
 *
 * To use this, add the following to your custom child theme's functions.php
 *
 *    require_once dirname(__FILE__) . '/functions-logout-url.php';
 *
 * And then go to your site's admin area and flush the rewrite rules.
 *
 *    Settings > Permalinks > Click "Save Changes"
 *
 * You should then be able to logout of your site by going to /logout
 */

// Block direct access.
defined('WPINC') || die();

// Change this if you want something other than /logout as your permalink.
const HWLO_ENDPOINT_LOGOUT = 'logout';
const HWLO_QUERY_VAR = 'hwlo_action';

function hwlo_rewrite_rules() {
	add_rewrite_rule(HWLO_ENDPOINT_LOGOUT, 'index.php?' . HWLO_QUERY_VAR . '=logout', 'top');
}
add_action('init', 'hwlo_rewrite_rules');

function hwlo_query_vars($query_vars) {
	$query_vars[] = HWLO_QUERY_VAR;
	return $query_vars;
}
add_filter('query_vars', 'hwlo_query_vars');

function hwlo_template_include($template) {
	if (empty($action = get_query_var(HWLO_QUERY_VAR))) {
		// hwlo_action hasn't been passed.
	} elseif ($action != 'logout') {
		// Some other action has somehow been passed.
	} else {
		wp_logout();
		wp_redirect(site_url('/'));
		exit;
	}

	return $template;
}
add_filter('template_include', 'hwlo_template_include');

And then just open your child theme’s functions.php file and paste the following into it:

// Pretty /logout URL
require_once dirname(__FILE__) . '/functions-logout-url.php';

Flush Permalinks then Test

importantWhen you’ve saved this file, you need to do one more thing before the /logout URL endpoint will work. You need to flush the URL rewrite rules in WordPress.

In your site’s admin area, go to Settings > Permalinks and then “Save Changes“.

That’s it 👍

If you go to https://your-amazing-website.com/logout you should see that WordPress logs you out. You can also add this URL to a menu item, and you’re all set!

Like This Tutorial?

Upvote this tutorial ---

Downvote this tutorial ---

Let us know