Timothy's Dev Stuff

A collection of code snippets and other developer things.

Custom Login Page with Elementor Pro

If you are building a website using Elementor, why not customize the login page? I like to reduce the amount of plugins I use as much as possible, so instead of installing one that edits the actual login page, I changed a few things on my own.

My security plugin allows me to change the backend login URL – so I did so. I used something I wouldn’t forget, but also something different than what I want to use for my custom login page. After changing the backend login, I created a new page in Elementor and named its URL appropriately. Think wp-admin except you can you whatever you want here. I’m sure there is a way to change the backend URL via functions or some other means (without a security plugin), but it is outside the scope of how I did it here.

Elementor Pro has a “Login” element which you can drop onto the page and style to match the website. You can also tweak some of the settings on it. One of those settings is the “Redirect after login” setting – which we would enable, and send that to /wp-admin/ which is the WordPress dashboard URL.

If you logout from the WordPress dashboard, you will still be sent to the original WordPress login page. To circumvent this, you can add the following code to your functions and tweak it as needed to go where you want. In this example, it will go to the homepage but you can enter a string for any page you want.

<?php

/**
 * Redirect to homepage after logging out.
 */
add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
  wp_safe_redirect( home_url() );
  exit;
}

?>

For security/privacy reasons, I won’t show this in action beyond what I have already shared. But, if you would like to learn more, here are some of the resources I used: