Depending on the type of WordPress site you’re running, there are several reasons why you might want to create a custom WordPress login form for your wp-admin or wp-login.php screen and you can easily do so by using a dedicated plugin.
Using a customized login form can help you minimize hacking risks and related security issues and improve privacy. And if you’re a design agency, you might need to white-label the default login page or login URL for your clients to give them a better way of accessing their WordPress dashboard.
In this article, we’ll show you how to create a custom WordPress login form and custom login URL using the Profile Builder Pro plugin. We’ll also walk you through a step-by-step process on how you can set up redirects and hide the admin bar.
Let’s put everything into context before we begin.
Why you should create a custom login page
As a WordPress site owner, you’re probably familiar with the default user login page. In terms of design, it’s pretty generic. You can’t customize login with a simple background image.
Users can log in by visiting the /wp-admin or /wp-login.php login URL and entering their username and password. It’s also worth mentioning that, out of the box, it isn’t particularly secure. Anyone who knows about the wp-admin URL or wp-login.php page can try to login to your WordPress site.
Here are a few main reasons why you should create a custom user login page for your WordPress.org website:
- Improved user experience and security. If your customers, clients, or subscribers are logging in to the WordPress Dashboard, then you can dramatically improve the user experience by offering a custom WordPress login page or custom WordPress login form. It’s also more secure, as you change the login page URL from wp-admin or the wp-login.php page, “drive by” attacks won’t be able to find the WP login form.
- Lots of people manage your website. If your WordPress website is managed by multiple people (such as editors, bloggers, and authors), you might consider making the login experience more user-friendly. For example, you could set up custom redirects in the WordPress dashboard based on where users are most likely to go after logging in. Or you could add social media OAuth login options.
- You get a lot of website traffic. WordPress websites that get a lot of traffic regularly are more likely to get spam traffic, as well. This opens the door for hackers, spammers, and bots. Customizing the login page can help you improve security by protecting the WordPress dashboard from malicious scripts. One way to do this is by adding Google reCAPTCHA.
- You want to white-label the login page. If you’re a freelancer, solopreneur, or design agency, you might want to white-label the login form for clients. For example, you could add branding elements (like login logo, background color, and background images) to the login screen or a personalized message to the admin custom login form. This makes it more personalized to your clients than the default WordPress login logo and branding.
Of course, there are many reasons why you might want to customize the WordPress login page. In the following sections, we’ll explain how you can do everything from setting up redirects to hiding the admin bar and admin area and customizing the wp-admin/wp-login.php login screen.
Setting up a redirect from default WordPress login to front-end login
If you’re running a WordPress website that allows users (members, students, or subscribers) to log in from the front-end, you’ll need an easy way to redirect them to a specific page.
For example, you might want to redirect students to your main course page or homepage after a successful login. Or you might want to redirect new users to the Edit Profile page if it’s their first time logging in after user registration.
Redirecting users to a specific page after login also lets you keep them out of the WordPress back-end and the WordPress dashboard. This minimizes any chance of confusion and helps you deliver a more friendly user experience.
Profile Builder Pro’s Custom Redirects module makes it easy for you to control where users should redirect to based on their actions. Plus, you don’t have to mess around with add_action functions, add_filter functions, code snippets, or the functions.php file. Out of the box, the module offers the following redirect types based on user actions, including After Login, After Logout, After Registration, After Edit Profile, Dashboard, After Password Reset, and After Email Confirmation. For example, you can redirect users to your homepage after logout.
With the Custom Redirects module, you can also target specific users using various redirect filters. This is useful for when you need to redirect specific users or specific types of users. You can redirect users based on user roles, their username, or a user ID. The module also lets you set up global WordPress redirects.
How to set up a redirect from default WordPress login to front-end login
Using Profile Builder Pro’s Custom Redirects module, you can easily set up a redirect for the default WordPress login page. So, whenever a user tries to access the default WordPress login URL by going to your WordPress site’s /wp-admin or /wp-login.php pages, they’ll be redirected to your new WordPress front-end login form instead.
Log in to the WordPress admin panel and head over to Custom Redirects from the Profile Builder plugin menu item. Scroll down till you reach the Redirect Default WordPress Forms and Pages section. You’ll be prompted to select a Redirect Type and enter a Redirect URL.
- Redirect Type. Use the dropdown menu to select when you want users to be redirected. Since we want users who’re trying to access the login page to be redirected, we’ll select the Login (wp-login.php) option.
- Redirect URL. Here, you need to enter the redirect URL i.e. the URL of the page you want to redirect users to. If your front-end login page’s URL is com/login, you would enter that here. This field can also contain dynamic tags including home URL for the homepage, siteurl, user id, user nickname, and HTTP referer.
It’s worth mentioning that this is also possible for existing and new WordPress pages. For example, you can redirect new users to the Register page (with a user registration form), Home page, or your Lost Password page based on their actions. You might want to redirect users in case of a login error. Be sure to check out our tutorial on How to Redirect Users after Login & Registration in WordPress to learn how to redirect users from your admin panel after they’ve filled out a registration form.
How to hide the WordPress admin bar after login for certain user roles
With Profile Builder Pro, you can easily hide the WordPress admin bar and admin area after users login without going to the Cpanel admin dashboard through your web hosting provider. This is useful for all sorts of membership sites, online course websites, training programs, as well as SaaS applications. It also lets you hide the admin bar and admin panel for specific user roles such as subscribers, customers, and shop managers and integrates with your WordPress theme.
From the WordPress dashboard, head over to Settings from the Profile Builder plugin menu item. Next, navigate to the Admin Bar tab. Here, you’ll see options for setting the visibility of the admin bar for the different user roles currently active on your WordPress website. All you have to do is choose which user roles can view the admin bar from the front-end of the website after logging in.
For example, if you want to hide the admin bar after login for subscribers, customers, and shop managers, you would simply set their visibility to Hide. Click the Save Changes button to continue.
How to customize the login screen completely
The WordPress login page is just like any other page on your WordPress site. This means you can customize its styling and colors using CSS and WordPress themes. You can also add features to it and play around with the layout using HTML and PHP.
One way to do this is by using the WordPress Customizer (i.e. the login customizer section). However, while you can certainly use the login Customizer to style the new WordPress login screen and WordPress login form manually using CSS, we recommend using a WordPress plugin considering it’s much faster and easier. Plus, you won’t have to mess around with any PHP files or add_action or add_filter functions. It’s especially great for users who aren’t particularly tech-savvy, don’t have the back-end know-how, find the custom login page Customizer to be less intuitive, or want to avoid the coding route.
Customizing the login screen URL
With Profile Builder Pro plugin, you can easily customize the WordPress login URL by creating a new custom page in your WordPress installation and adding the [wppb-login] shortcode to it. This gives you more security than relying on the wp-admin page or the wp-login.php page. Start by going to Pages > All Pages and clicking the Add New button.
For example, if you’re running a membership website and want to create a custom WordPress login form for members, you might call it something like Member Login Page and change it’s URL to www.example.com/member-login from www.example.com/wp-admin. Once that’s done, simply add the [wppb-login] shortcode to the text editor and publish the page. You can also add this login shortcode to a sidebar widget. It will have a Remember me checkbox under the username and password field that match your WordPress theme by default. Your WordPress site’s members can simply bookmark the login page for quick access. You will also be able to easily bookmark the admin login page.
Allowing users to recover their password
Profile Builder Pro can act as a login plugin that lets you add a recover password section to your login page. This is a great way to improve your site’s user experience. This is a great way to improve your site’s user experience. All you have to do is add the [wppb-recover-password] shortcode to the login page.
It will look something like this on the front-end depending on which WordPress theme you’re using:
Your WordPress.com site’s users can simply enter their username or email to receive a link to create a new password. This is a required field.
Adding reCAPTCHA
You can add Google reCAPTCHA to improve your login page’s security. For this, you will need to generate keys (site key and secret key) from the Google reCAPTCHA website. Once you have the keys, go to Form Fields from the Profile Builder menu item. Use the Field dropdown to select reCAPTCHA.
In the Form Field Properties section:
- Enter field details (title and description).
- Select a reCAPTCHA type (either reCAPTCHA V2 or Invisible reCAPTCHA).
- Enter your site key and secret key.
- Make sure the PB Login box is ticked next to the Display on PB forms
Click the Add Field button to proceed. The reCAPTCHA will automatically be added to your WP login form. Your login page will look something like this:
Letting users sign in with social profiles
You can use Profile Builder Pro’s Social Connect add-on/widget to enable social login on your WordPress website. This lets users log in with Facebook, Twitter, Google+, and LinkedIn. Once you have the add-on activated, you can go into its settings by clicking Social Connect under the Profile Builder menu item.
From the General settings section, make sure that the Profile Builder Login checkbox is ticked next to the Display on the Following Forms option. Once that’s done, simply fill out the Application Settings section for the social platforms you want to allow logins through. The add-on also lets you customize Appearance Settings from the same screen.
Using custom login page templates
Profile Builder Pro login plugin comes with the free Custom Login Page Templates add-on that lets you completely change the look and feel of your custom login page.
You can choose one of the available templates and customize it to fit your brand. It lets you:
- Upload your custom logo.
- Add a background image.
- Enable the Picture of The Day
- Tweak the design using custom CSS.
Enabling passwordless login
Profile Builder Pro login plugin lets you use the Passwordless Login add-on to let users log in to your WordPress website without entering a password.
It only asks users for their email or username on the login page. The WordPress plugin automatically creates a temporary authorization token which is valid for 10 minutes. It sends the user a link containing the token via email. The user can then click on the link to log in to their account on your website.
Once you’ve activated the add-on, simply add the [passwordless-login] shortcode to your login page. It will look something like this on the front-end:
Additional benefits of a custom WordPress login form
There are two additional benefits from creating a custom WordPress login form: security and branding.
If you’re running a community-powered website that requires users to login, having a secure login page that hides the admin area after login is essential. This way, users won’t be able to access the WordPress admin area through the wp-admin or wp-login.php page. This is great for membership sites, forums and discussion boards, and niche social network sites.
And if you’re a design agency, you can improve your service offering by white-labeling client login pages. This allows your clients to deliver a more consistent user experience to their site’s users and makes the overall experience more worthwhile and you don’t have to deal with the WordPress codex.
Additionally, customizing your WordPress login page gives you many opportunities to improve user experience. For example, you can offer social logins or passwordless login options.
Now create your custom WordPress login form!
By customizing the WordPress login page, you can create a more welcoming (and secure) environment for users, members, students, and clients.
Let’s quickly recap some of the different ways you can customize the WordPress login page using the premium plugin Profile Builder Pro:
- Set up redirects from the default WordPress login page to a front-end login page.
- Hide the admin bar after successful user login for specific user roles such as customers and subscribers.
- Customize the login screen URL by creating front-end login on a separate page with a Remember me checkbox.
- Allow users to recover their password from the login page by entering their username or email.
- Add Google reCAPTCHA to your login page to protect against spammers and bots.
- Let users login with their social profiles such as Facebook, Twitter, Google+, and LinkedIn.
- Use custom login page templates that come with the Profile Builder Pro plugin out of the box.
- Enable passwordless login options for a more secure login experience.
Profile Builder Pro
Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.
How will you be customizing your WordPress login form? We’d love to hear from you so let us know in the comments section below.
Source: https://www.cozmoslabs.com/177656-custom-wordpress-login-form/
