By default, WordPress sends everyone to the generic wp-login.php screen to sign in. Restrict for WordPress lets you place a login form on any of your pages or posts instead — using an automatically generated WordPress login form shortcode or a ready-made Gutenberg block — so your visitors can log in without ever leaving your site. In this guide you will learn how to add the form, customize its labels, set a redirect URL and assign custom HTML IDs for styling.
Why put a login form on your own page?
If you restrict content, logging in is something your visitors will do all the time — so it should be as frictionless as possible. A login form embedded in a normal page keeps users inside your branded design instead of bouncing them to the default WordPress login page, and it gives you a natural destination to link to from restriction messages, menus and emails.
Two ways to add the form
There are two ways of placing a login form on your pages or posts: with the automatically generated shortcode, or by using the built-in Gutenberg block. Depending on whether you are using the classic WordPress editor or the Gutenberg (block) editor, opt for one of these two options — both offer exactly the same customization options.
Using the WordPress login form shortcode
If you are using WordPress’ classic editor, you will be using the shortcode. The customization options, as well as the automatically generated shortcode, are available within Restrict’s Login Form area.
- Custom labels – if you want to add that extra "personal touch" for your users, you can easily change all the labels of the login form (username label, password label, "remember me" label and log in button label).
- Redirect URL – the Redirect URL field allows you to enter a custom URL to which the user should be redirected after they have successfully logged in. If the field is left blank, the user will remain on the same page where they logged in.
- Custom HTML IDs – you can declare custom HTML IDs for each element of the login form, as well as the HTML ID of the login form itself. This is useful for many things — for example, if you want to style these elements differently than how WordPress displays the login form by default.
Right at the bottom of this area you will find the automatically generated shortcode. Click the Copy button, then paste the shortcode into any page or post where you want your login form to appear. You can, of course, paste it on multiple pages if there is a need for that.
Using the Gutenberg block
If you are using WordPress’ Gutenberg editor, all you need to do is place the Login Form block on whichever page or post you want it to appear:
- Edit the page or post and click the "plus" symbol to add a new block.
- Type restrict into the search bar — the Login Form block will appear immediately.
- Click the block to add it to the content of your page or post.
Once the block is added, all of the available options for the login form appear on the right-hand side, as properties of the block.
The available options for the Gutenberg block are completely the same as for the shortcode:
- Custom field labels – to change the labels for username, password, the "remember me" checkbox and the log in button
- Redirect URL – to set a custom redirect URL if you want to send the user to a specific URL after they have logged in
- Custom HTML IDs – to define custom HTML IDs
Tips for a smoother login experience
- Send users somewhere useful. Set the Redirect URL to your members area, course page or account dashboard so people land on something valuable right after signing in. Leave it blank if you want them to stay on the current page.
- Match your design. Use the custom HTML IDs to target the form and its fields with your own CSS and blend the form into your theme.
- Point restricted visitors to it. Link your login page from restriction messages and from a menu item shown only to logged-out users, so locked-out visitors always know where to go.