Do you want to create a custom login page in WordPress for your site?
If you run a site that has many members or an online store, then many users will access the login page. For this reason, customizing the default login page will be very important to make it look better and more attractive.
In this article, we will show you how to create a custom login page in WordPress. This guide is also very useful for those of you who are going to create a custom WooCommerce login page.
Why Create a Custom Login Page in WordPress?
WordPress comes with a powerful user management system. It allows users to create online stores, membership sites, or blogs with multiple authors.
By default, the login page will display the WordPress logo at the top. This is not a problem when you only run a small blog and have only one user.
However, if the website you manage allows general users to register and log in, then creating a custom login page will provide a better user experience.
You can use your own logo, in order to improve the performance of the company that you have and will be better known by many people.
Later, this custom login page will not only display a form to login, but you can also promote other pages.
How to Create a Custom Login Page in WordPress
To create a custom login page, you can use a plugin that can be downloaded for free. Like Theme My Login is a plugin that can change the WordPress login page according to the theme you are using.
Although this plugin doesn’t have many features to customize, simply changing the appearance of the default WordPress login page will make your site a bit more professional.
The first thing you have to do is install and activate the Theme My Login plugin. For more details, you can see our guide on how to install a WordPress plugin.
After activation, Theme My Login will automatically create a new link for login, logout, registration, forgot password, and password reset.
You can customize the links by visiting the plugin settings page. In the left side menu, click Theme My Login > General.
Not only that, Theme My Login also lets you use shortcodes to create custom login and registration pages.
You simply create a new page for each action and then add the page slug. The plugin will automatically find and redirect users properly.
Here’s an example you can use to create a new action page.
Go to Pages > All Pages to create a new page. Enter a title according to the form that you will create. Then type the following shortcode [theme-my-login].
You can now publish the page and preview it to see the custom login page you have created.
Use the following code to create any other page you want.
- [theme-my-login action=”register”] = For the registration form.
- [theme-my-login action=”lostpassword”] = Lost password page.
- [theme-my-login action=”resetpass”] = Reset password.
Create a Custom WordPress Login Page With LoginPress
LoginPress supports various options that you can use to change the default WordPress login view.
This plugin has a free and paid premium version. The free version has fairly complete features, supports multiple languages and is responsive.
The premium version, this plugin offers a useful reCAPTCHA feature to secure sites from spam.
To use this plugin, you can download and activate it directly from the dashboard. Then on the left WordPress admin panel, click LoginPress > Customizer.
Now you can change the appearance of the WordPress login page such as background, logo, and so on on this page.
Using this plugin, you can also display error messages such as forgot password, login error, wrong password, and so on.
Change WordPress Logo and Login URL Without Plugin
This method allows you to manually replace the WordPress logo on the login page with your own logo.
First, you must upload the logo that will be used to the site via the Media > Add New menu.
After uploading successfully, click and copy the image link into a text editor to save temporarily.
Next, you need to add the following code to the functions.php file of the theme you are using.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wp_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(http://path/to/your/custom-logo.png); height:100px; width:300px; background-size: 300px 100px; background-repeat: no-repeat; padding-bottom: 10px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wp_login_logo' ); |
Don’t forget to replace ‘background-image’ with the logo URL that you copied earlier.
You can now visit the WordPress login page to see if the logo has changed.
The code above only changes the appearance of the logo and does not change the link that goes to the WordPress.org website when the logo is clicked.
Use the following code into the functions.php file just below the code you added earlier to replace.
|
1 2 3 4 5 6 7 8 9 |
function my_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url_title() { return 'Your Site Name'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' ); |
Don’t forget to replace ‘Your Site Name’ with the name of the site you manage. When the logo is clicked, it will redirect to the homepage of the site instead of WordPress.org.
We hope this article helped you learn how to create a custom login page in WordPress. You may also want to see our guide on how to remove footer credits in WordPress themes.
You are my breathing in, I have few blogs and often run out from to post .