Make a login page for WordPress

So, you are using Elementor for WordPress and decided you want something more for your login page. Well, we will show you exactly how you can do just that. With a bit of editing inside Elementor and editing of the functions.php, you will have a beautiful and custom login page for your website.

IMPORTANT: As with any good project, be sure to back up your site before starting any editing to integral files. If you were to accidentally break your site, you will still have all your files to revert back to thanks to the backup files.

As well keep in mind that with this set of instructions you will be editing an integral file to WordPress. So if you are not comfortable with this, please contact Cherry Host for assistance.

When to use the Login widget for Elementor

Maintenance mode pages

The recently added free feature of Elementor maintenance mode feature is very handy, but it gets even better for pro users, since they can also add login forms to their maintenance mode page. This way you can display the maintenance mode page to your visitors, but still allow them to access the under construction or coming soon site by logging in to their account.

Sidebar login forms

The login form doesn’t have to be the only element in the page. You can save your login widget as a global widget, and then quickly embed it in sidebars throughout your site. This way your visitor will have a quick access to login to your site.

Video background login page

Video background helps create a unique page design and adding them to login pages can make for a nice touch.

Holiday / Sale

If you have seasonal sales, holidays or current announcements, you can incorporate them in the design of the login page to get your message across.

Membership site

If you have a membership site, you can create a login page that includes the pricing model of the site. This way unregistered users can choose to sign up and pay for membership right from the login page.

NOTE: You don’t necessarily have to edit the functions.php file to make your login page functional. You could add a login link to your nav bar, and it will work just fine. We take this idea a step further by redirecting to the custom login page from the normal WordPress login to give the site a more professional feel.

So, you are using Elementor for WordPress and decided you want something more for your login page. Well, we will show you exactly how you can do just that. With a bit of editing inside Elementor and editing of the functions.php, you will have a beautiful and custom login page for your website.

  1. Create a new page in WordPress and name it something that deals with logging in. i.e. LoginPage, SiteLogin, etc….
  2. Adjust the settings of the page like you would normally for any other Elementor page so it matches the look you already have for your site.
    • We use ‘Elementor Full Width’ so we have full control of the page. This works great when you have a custom header that is in use with the site.
  3. Drag and drop the ‘Edit Login’ module onto the page.
    • Editing of the options will include redirect after login and redirect after logout.
      • These will give a better functionality to the logging in and logging out process for yourself and your site’s users.
    • Edit the page to make it look as you see fit.
      • Since you are using Elementor Pro, making use of one of the two premade login templates works great and speeds up the process on creating a custom login page.
  4. Edit the page to make it look as you see fit.
    • Since you are using Elementor Pro, making use of one of the two premade login templates works great and speeds up the process on creating a custom login page.
  5. Publish the page.
  6. Go to Appearance >> Theme Editor >> functions.php
    • Using a child theme with this will allow your edits to stay permanent.
  7. // START LOGIN REDIRECT FUNCTION
    function redirect_login_page() {
    $login_page = home_url( '/CHANGEME/' );
    $page_viewed = basename($_SERVER['REQUEST_URI']);
    
    if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
    wp_redirect($login_page);
    exit;
    }
    }
    add_action('init','redirect_login_page');
    
    function login_failed() {
    $login_page = home_url( '/CHANGEME/' );
    wp_redirect( $login_page . '?login=failed' );
    exit;
    }
    add_action( 'wp_login_failed', 'login_failed' );
    
    function verify_username_password( $user, $username, $password ) {
    $login_page = home_url( '/CHANGEME/' );
    if( $username == "" || $password == "" ) {
    wp_redirect( $login_page . "?login=empty" );
    exit;
    }
    }
    add_filter( 'authenticate', 'verify_username_password', 1, 3);
    
    function logout_page() {
    $login_page = home_url( '/CHANGEME/' );
    wp_redirect( $login_page . "?login=false" );
    exit;
    }
    add_action('wp_logout','logout_page');
    // END LOGIN REDIRECT FUNCTION
      • Change CHANGEME with the slug from your login page. You will have four (4) locations in this code that will need to be changed however leave the portion of the code ‘/    /’ in place. You only need to change the text.
      • Click update after copying and pasting into the file.
  8. Enjoy!
  •  

Share this post

Share on facebook
Share on twitter

Business Address

10221 Buena Vista Ave
Suite A
Santee, CA 92071

Customer Service Hours

Monday – Friday: 9:00AM – 5:00PM
Saturday & Sunday: 11:00AM – 3:00PM

Eastern Standard Time

Cherry Host Portal

Return to Customer Portal