1. Home
  2. Knowledge Base
  3. Uncanny LearnDash Toolkit
  4. Front End Login

Overview

The Front End Login module lets you put a login form anywhere on your WordPress site, freeing you from the constraints of WordPress’ built-in login page.  Use this module to create a login page that works with your organization’s branding and provides users with additional information or support.  You can even place it side-by-side with a registration form to have a combined login + registration page, reducing the steps necessary for new users to create an account on your site.

The Front End Login module includes extensive customization options in its settings pane.  Most are self-explanatory and won’t be covered here, but these are the most important options:

  • Select Template: Choose the design template for the login form.  Both templates support the same options.
  • Login Page: Select the page you want to use as the login page for your site.  This page must have the Front End Login Gutenberg block or [uo_login_ui] shortcode on it.  When users attempt to access the default WordPress login page (/wp-login.php), they will automatically be redirected to this page instead.
  • Manual User Verification: If enabled, users that register from the front end MUST be manually approved by an administrator before they can sign in.  A “Verified” column will be added to the list of users in WordPress and any users listed as “Not Verified” cannot sign in. To verify a user, navigate to the user’s profile and look for the “Verify User” label. By selecting this field and saving the page, the users will be able to sign in. On verification, users will also be notified by email that the account has been verified and access has been granted. The Login Page setting (above) must set for user verification to work.
  • Show Register Link: If enabled, a text link will appear below the form using the text in the Register Link Text field and linking to the URL in the Register Link field.  This link can be to any page you want; even an external CRM (for example).
  • Hide All For Logged In Users: If enabled, logged in users will see nothing where the login form was previously displayed.
  • Message For Logged In Users: This content is displayed to logged in users (as long as Hide All For Logged In Users is not enabled).
  • Google reCAPTCHA Settings: When the Site Key and Secret Key fields are populated with valid reCAPTCHA keys, a reCAPTCHA anti-bot widget will be displayed on the Login and Forgot Password forms.  Users will be required to validate that they are not bots to enable form submission.

Important: Make sure that your login page is not cached. If you see password reset errors, redirect errors or users can’t sign in properly, check this first. Your host may also have server-side caching enabled for your login page (WP Engine and Siteground are known to do this, as are many others), so check with them if you’re not sure.

Shortcodes

The Front End Login module includes two shortcodes.

[uo_login_ui]

This shortcode displays the Front End Login form with the template and options selected in the Front End Login module settings.

[uo_login]

This shortcode displays a default WordPress login form with no styling or settings applied, and also supports content for logged-in users with the syntax:

[uo_login sample='sample']content if logged in [/uo_login]

Overriding the login template

For advanced developers, there’s a filter available to override the login template file with a file of your own. Here’s how you could replace the default template file with one in your child theme folder:

add_filter( 'uo_login_ui_template', get_template_directory() . '/my_template_file.php' )

Was this article helpful?

24 replies
  1. Ryan
    Ryan says:

    The Front End Login module doesn’t include any type of registration form, and currently we don’t plan to add one. Our other plugins do include registration options if something is required for use of the plugin, but for this module, the registration link just defers to whatever has been set up already in WordPress (and if nothing exists for registration, it uses the standard WordPress registration).

    Reply
    • Amy
      Amy says:

      Is there a way to not have the register link under the forgot password link? The register link sends my users to make a seperate wordpress account, and that is confusing since they have already made an account to access my course during woocommerce checkout.

      Reply
      • Ryan
        Ryan says:

        It’s because you have “Anyone can register” turned on in WordPress settings under Settings > General. If you uncheck that box the link will go away.

        Reply
    • Ryan
      Ryan says:

      The link and registration behaviours not part of the Toolkit; the link will just be shown automatically if you allow anyone to register. If you don’t want it displayed, make sure you navigate to Settings > General as an admin and uncheck “Anyone can register”.

      Reply
  2. Corinne
    Corinne says:

    I’m not sure what I’m doing wrong. I have the Front End Login set up and I want a particular page to only be available to people who are logged in. If I put the URL of that page right into the browser, I can access the page without having to login. Is there a way to block people from just using the direct URL?

    Reply
    • Ryan
      Ryan says:

      I’m afraid the Front End Login module can’t help there. With LearnDash you can protect pages if they’re inside closed courses, or more generally you can use a membership plugin or other tool that restricts page-level access.

      Reply
  3. Boris
    Boris says:

    I was wondering if there is any option in the shortcode to avoid redirection to the homepage ? I was hoping the log-in on my sidebar would redirect to the same page it was validated from (the course page where the sidebar appears) as it is a bit confusing for users to have to go back to the page they were before manually.

    Reply
    • Ryan
      Ryan says:

      I’m afraid there is no such option. Typically we would override the redirect behaviour anyway (as it can’t be set in this module) to a specific page, either with the Log In/Log Out Redirect module also in the plugin, or with another tool so we can use role-based redirect. Those solutions can unfortunately only take users to a specific page though, not back to where they were originally. I’m afraid that for the behaviour described another login solution may be a better fit.

      Reply
  4. mai
    mai says:

    hi
    i want to ask please

    1) now when i click on register, it takes me to wordpress registration page? is there a way to change this?

    2) can i use this plugin, but add my own login and own registration pages? using a custom form plugin

    3) how to change how the form CSS looks? design wise (login form)

    4) how to trasnalte: login, username, … etc strings? i found on ur plugin translation page in WP, these are nott here?

    thank u!! i am new here so kindly bear with me

    Reply
    • Ryan
      Ryan says:

      1. Where the Register link takes you depends on what WordPress recognizes as your registration page. It’s not something you set in our Toolkit. So if you use another plugin for a registration page and have that plugin tell WordPress that that’s the registration page, our link will then take the user to that page.
      2. You can certainly turn off any modules you’re not using. It’s very common for this module to be turned off while others are left enabled and used.
      3. Yes, the login form includes CSS classes that you can target. You will need to know how to work with CSS to style the login form.
      4. All strings are definitely translatable, but it’s certainly possible that someone hasn’t translated all or any of the strings to your language. Use a plugin like Loco Translate to find untranslated strings and translate them; the labels you cited above can definitely be translated.

      Reply
    • Ryan
      Ryan says:

      This suggests that the plugin wasn’t able to properly send an email through WordPress. Try testing that other emails are sending properly through WordPress and that a plugin isn’t being used to block emails. If you’re using a plugin that routes mail through a third party, try disabling that temporarily as well to see if it could be conflicting.

      Reply
  5. Simon
    Simon says:

    I have my login page working perfectly thanks to the Uncanny plugin, but I wonder if you can help? When a user logs in, they are taken to the WordPress dashboard. I have Hide Admin/Bar turned on, wchih works when they eventually navigate to the site, but how do I stop the landing page once users are logged in from being the WP Dashboard?

    Reply
    • Ryan
      Ryan says:

      You can set up a login redirect for this. The Toolkit also has a module for that, or try a plugin like Peter’s Login Redirect.

      Reply
    • Ryan
      Ryan says:

      It’s unfortunately not possible to put both the login form and reset form on the same page. Only the link can be included. Sorry about that!

      Reply
    • Ryan
      Ryan says:

      Please note that this plugin does not include any registration functions. The link to register is added automatically if “Anyone can register” is turned on in your WordPress General Settings. The destination of that link is whatever page WordPress recognizes as the registration page.

      (This applies to the current version of the plugin, in the upcoming 3.0 release you can control the destination page and whether or not to show the link inside the plugin instead.)

      Reply
    • Ken Young
      Ken Young says:

      When you add the login form to a page with the shortcode or Gutenberg block, you can simply add the button above or below the form on the page. However, if you want the button to appear between form elements, you may need to override the login page template by copying it to your child theme folder, adding your button to the template, and then hooking into the appropriate login template filter:
      add_filter( 'uo-front-login-lost-pwd-template', array( __CLASS__, 'set_ult_login_theme' ), 9, 1 );
      add_filter( 'uo-front-login-register-template', array( __CLASS__, 'set_ult_login_theme' ), 9, 1 );
      add_filter( 'uo-front-login-reset-template', array( __CLASS__, 'set_ult_login_theme' ), 9, 1 );
      add_filter( 'uo-front-login-login-template', array( __CLASS__, 'set_ult_login_theme' ), 9, 1 );

      Reply
    • Ken Young
      Ken Young says:

      Try this for the button:

      #ult-login-form input#ult-login-submit {
      background-color: #000000;
      }

      And this for the links:

      div.ult-form__footer a {
      color: #000000;
      }

      Reply

Comments/Questions

Please note that this is not an official support channel and questions/comments may go unanswered.
To request support, log in to your account and click Submit a Request.

Leave a Reply

Your email address will not be published. Required fields are marked *