After enabling user registration, login and submission in WordPress, the design of login, registration and forgot password pages are quite different from the site’s current theme. It uses the default WordPress admin and login forms so it might look quite dull for many. What would look great is that if the login, registration and forgot password forms were placed in pages that matched with the design of the current theme. Those pages should look like another page that uses the site template.
It is quite easy to make this change to those forms and pages. The only thing that we have to do is install a plugin called Theme My Login. After installing the plugin, there isn’t any additional configuration needed. This plugin does not have any settings. The only thing that it does is instruct the login/registration pages to use the site’s current theme and not what was designed by default for WordPress administration. It works with any theme and integrates automatically.
When installed with the default WordPress theme Twenty Fifteen, here’s how some of the frontend pages look like
User Registration Page
User Login Page
Forgot Password Page
Configuring the Plugin
In WordPress admin, visit the new link or tab titled TML to customize the plugin. There you will see options to enable different modules.
- Enable Ajax: Only necessary parts of the webpage will re-load after they are updated.
- Enable Custom Emails: Allows us to configure emails that are sent from the website when users register (welcome emails), forgot/reset password emails and even a user denial email.
- Enable Custom Passwords: Will allow the use of custom passwords instead of the one that is generated automatically after signing up.
- Enable Custom Redirection: Allows you to choose the page that a user is redirected to after logging in or logging out successfully. You can choose different pages based on member levels.
- Enable User Links: Allows to configure the links to dashboard and profile based on membership levels.
- Enable reCAPTCHA: Use this powerful spam fighting tool in the registration and login forms.
- Enable Security: Tell the plugin to block malicious login attempts based on failed tries. Additional options to make the website completely private and disable wp-login.php also available.
- Enable Themed Profiles: It is enabled to all the member levels by default. Disable it for certain membership levels like subscribers by un-checking them. It is also possible to restrict admin access.
- Moderation: Configure to enable email address verification or admin approval after a user signs up.
Note: New admin links or tabs are added under TML after each individual module with configuration options is added.
Changing the Design of Forms
While there are many configuration options available, none of them allow us to configure the look and feel of the forms. You cannot add additional messages to the forms or use a different CSS style for them. To do it, we have to edit the pages created by the plugin or manually upload files in the theme’s folder and Theme My Login will use those instead.
After installing the plugin, it will automatically create the necessary pages. They can be found it Pages>All Pages. While editing those pages, you will find the plugin tags. Keep them intact and add additional text around them.
An advanced way to change the look of the forms:
- Using FTP or File Manager, browse to /wp-content/plugins/theme-my-login/templates/.
- You will see the files:
- login-form.php
- losspassword-form.php
- ms-signup-another-blog-form.php
- ms-signup-blog-form.php
- ms-signup-user-form.php
- profile-form.php
- register-form.php
- resetpass-form.php
- user-panel.phpThe file names give the idea on what forms they are.
- Copy those forms to /wp-content/themes/<current-theme>/ and modify them. The plugin will always look for forms first in the theme’s folder before its own folder. Customize the copied file in the theme directory. Otherwise, after upgrading the plugin, the modifications will not stay. You will have to know basic HTML and some PHP to be able to edit the content of those forms.
Editing the CSS
Making sure that Enable “theme-my-login.css” option is checked in TML > General, you can make changes to the CSS file. It is located in /wp-content/plugins/theme-my-login/. Change the CSS styles and it will reflect on the forms.
Overall, this is a great plugin with some detailed options for user registration pages on any WordPress powered website. It works on any theme and keeps the theme’s original design. It works best for a membership based website.