How To Use The User Login Widget By Atomic Addons

The User Login widget by Atomic Addons puts a login form for your WordPress site on any page. Visitors sign in with their username or email and password without leaving the page, and signed-in visitors see their avatar, a welcome line and a logout button instead. You can add links to reset a password or register, send people to another page after they sign in or out, and offer Facebook and Google login. This guide covers adding the widget, its settings and social login.

Enable the User Login Widget

User Login is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for User Login. You can also open the Forms / User category.

4. 4

   Turn the User Login widget on.

5. 5

   Click Save Settings.

Add the User Login Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for User Login. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

In the editor the widget always shows the login form, even though you are signed in, so you can design it. On the live page the form is loaded after the page itself, so a page cache never shows one visitor's signed-in panel to another; visitors may see “Loading…” for a moment.

Forms Layout

Open the widget and go to Content → Forms Layout:

1. 1

   Labels: Shows the labels above the fields. On by default. When it is off, the labels are hidden from view but stay in the page for screen readers.

2. 2

   Input Size: The height of the fields: Small, Default or Large.

3. 3

   Button Text: The text of the submit button, “Log In” by default. It accepts dynamic tags.

4. 4

   Button Size: Small, Default or Large.

5. 5

   Alignment: Left, center or right places the form (up to 400px wide) on that side of the column. Justified stretches the button across the form. Use the device icon to set it per screen size.

The form has a Username or Email field and a Password field, both required. A wrong combination shows “Wrong username or password.” above the fields; a correct one signs the visitor in and reloads the page, or opens the redirect page below.

Additional Options

Content → Additional Options sets the links, redirects and what signed-in visitors see:

1. 1

   Redirect After Login: Turn it on and enter a URL to send visitors there after they sign in. Off by default: they stay on the same page.

2. 2

   Redirect After Log Out: Turn it on and enter a URL to send visitors there after they click the logout button. Off by default: they come back to the same page.

3. 3

   Lost Password Link: A “Lost Password?” link under the button, to WordPress's password reset page. On by default. Turn on Custom Lost Password URL to point it at your own page instead.

4. 4

   Register Link: A “Register” link beside the lost password link, to the WordPress registration page. On by default; turn on Custom Register URL to use your own page, such as one with the User Register widget. This setting and the link appear only while registration is open: Settings → General → Membership → Anyone can register.

5. 5

   Remember Me: A “Remember Me” checkbox. Ticked, it keeps the visitor signed in for longer. On by default.

6. 6

   Logout Text: The text of the logout button in the signed-in panel, “Logout” by default.

7. 7

   Logged In Content: What signed-in visitors see: their avatar, a welcome line and the logout button. On by default. Turn it off and the widget shows nothing to signed-in visitors.

8. 8

   Welcome Message: The line under the avatar, “Hi, ” and the visitor's display name, linked to their profile. On by default.

9. 9

   Show Facebook Login / Show Google Login: Adds a Facebook or Google login button under the form. Both need setup first; see Social Login.

10. 10

    Show Separator: With a social button on: an “or” line between the form and the social buttons. On by default.

11. 11

    Toggle Password: An eye button in the password field that shows or hides the password as it is typed. On by default.

12. 12

    Custom Labels: Turn it on to change the built-in wording. See below.

With Custom Labels on, new fields let you rewrite the Username Label and Username Placeholder (both “Username or Email”), the Password Label and Password Placeholder, the Lost Password Text, the Register Text, the Remember Text and the Welcome Message greeting (“Hey,”, shown as “Hey, Name”). The label fields appear only while Labels is on, and each link text only while its link is on. A field you leave empty uses the built-in wording.

Social Login

The Facebook and Google buttons need your own app credentials. Add them in the plugin settings:

1. 1

   For Facebook, create an app in the Facebook Developers console and copy its App ID and App Secret. For Google, create an OAuth client ID in the Google Developer Console for your site's address.

2. 2

   Go to WordPress Dashboard → Atomic Addons → Settings.

3. 3

   In Social Login Access, paste them into Facebook APP ID and Facebook APP Secret, and Google Client ID.

4. 4

   Click Save Settings.

Until its credentials are set, a turned-on button shows a reminder in the editor and stays hidden from visitors. Facebook login checks the visitor's sign-in with both the App ID and the App Secret, so it needs both.

When a visitor signs in with Facebook or Google, the widget looks for an account with the same email address and signs them into it. If there is none, it creates a new account from their name and email and signs them in. They then go to the Redirect After Login page, or the page reloads.

Style the User Login

Everything below is on the Style tab. Sections for features you turned off are hidden.

• Form — the fields' text color, background, border, border radius, padding, typography and hover border color; the label color and typography; the password eye's color and hover color; and the “Remember Me” text color and typography.
• Button — text color, background, hover text, background and border colors, typography, border, border radius and padding.
• Links — the color of the lost password and register links.
• Logged In — the gap in the signed-in panel, the avatar's border radius, and the welcome message's color, typography and name colors.
• Social Login — the separator's text color, line color and typography, and the social buttons' colors, border, radius, padding and typography in Normal and Hover states.