As we have been listening for a long time, “the first impression is the last impression”. The best quote that applies here very well. That way, creating a custom login page in WordPress is a great way to make the best first impression. Do you want to add more brand value to your site? Do you want to keep the look of the login page fresh for users who log in to your site regularly? If yes, then just create a WordPress custom login page.

Why Create a Custom Login Page?

If you are running community-driven websites such as forums, membership sites or blogs, top social networks, or any other website, in which users need to register and log in to the account, you should create a custom login page. This allows them to visit, share, and contribute to your site via post, image, video, or comments.

The default WordPress login page looks normal and boring. It does not offer any implicit option to change the feeling of the page to add its own logo and match its subject. This is far behind as a result of an ideal login page. With a custom login page, you can personalize all the elements around the form. So, a WordPress custom login page will play the most important role here. A custom login page is important for adding your branding to the site.
You can add more fields to get more information from users. In addition, it allows you to limit access to the admin panel by specifying user roles. In short, a WordPress custom login page offers several benefits with the user’s experience to please.

There are good reasons to add them since providing many benefits to the custom WordPress login page: Continuous branding, Better User Experience, Advanced Navigation, Better security.

Different ways to create a WordPress Custom Login Page

It’s always better to create a custom login page rather than a boring WordPress login page. Most, you can add your own logo and white label to the admin panel. But what about using the admin panel? Therefore, if you do not want access to the admin panel in every log of the user, you need a custom login page. But how to create a WordPress custom login page? There are two basic ways to create your own custom login page as follows:

  • Manually create the WordPress login page.
  • Create WordPress Login Page with Plugins

1. Manually create the WordPress login page

You can create a WordPress custom login page by using the code. It requires basic skills in HTML, PHP, CSS, etc. You will change the function.php file of your theme. For this, you have to tweak some source file on your theme. This is not a difficult task. However, remember that if you update WordPress you will lose these changes.

Here, A list of some basic things that you want to change your custom login page. For him, the main modifications you can make are as follows:

  • Create a Custom Stylesheet for the Login Page

WordPress does not load your theme stylesheet as part of WordPress theme setup. This can be done through CSS, as you would for the rest of your site inside the style of your theme’s style.css. However, to organize things a bit more, create a custom stylesheet for the login page.

For that, go to your (child) theme folder (under wp-content / themes / yourtheme) via FTP or whatever you use to access your server. Here, set up a new directory called login. This is where we will save all the styles and images that we can use for our page.

After this, create an empty text file and call it login-styles. In fact, this name is not very important as long as you do not use one in the code given below. Upload this file to the new login directory. After that, add the following code to functions.php to load WordPress to its new stylesheet.

function my_custom_login()
{
echo '';
}
add_action('login_head', 'my_custom_login');
  • Adding a Custom background

You can also change everything else on the page, from design to background color to fonts. With a little CSS knowledge, there is no limit to your imagination. You can add any background image to your login page. In the second row of your custom page CSS, specify the correct name. Here’s the code to set background.

Body.login
{
background-image:url("../image/login-page-bg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
  • Add a custom logo

A good idea to make your site branding more consistent is to use your logo on the login page. Save in custom logo image login / image folder This is done by changing the background image of the h1 link at the top of the login page. You will do the following:

#login h1 a {
background-image: url("../image/logo-1.png");
background-size: 75px;
}
  • Customize the look of the login form

Now, you will modify the log-in form to match the presence of your site. You can set the form padding, margins. You would also like to change the background color, label, etc. for this, you can mention the following sample code:

.login form{
box-shadow:none;
padding:20px;
}
#login {
background: #FFF;
margin: 50px auto;
padding: 40px 20px;
width: 400px;
}
.login label {
color: #555;
font-size: 14px;
}
.login form .forgetmenot{
float:none;
}

To modify the submit button look, you can set margins, borders, height, width, its color. So, include these lines in your CSS

#login form p.submit{
margin-top:15px;
}
.login.wp-core-ui .button-primary {
background: #7B417A;
border-color:#7B417A;
box-shadow: 0 1px 0 #7B417A;
color: #FFF;
text-shadow: none;
float: none;
clear: both;
display: block;
width: 100%;
padding: 7px;
height: auto;
font-size: 15px;
}
  • Change Login Logo URL

The logo URL links to WordPress.org by default. You can redirect it to some other URL as follows:

function custom_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

function custom_login_logo_url_title() {
return 'Default Site Title';
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );
  • Remove the lost password link and Remove the “back” link.

There are two links on the login page. Is there a “Lost Your Password” link? This enables users to reset their password if they are lost. The second is a “back to” link that takes users back to the homepage.

p#nav
{
display: none;
}

And

p#backtoblog
{
display: none;
}

The first piece of code removes the password recovery link, the second link comes back to your homepage. It only removes them from sight and is actually not enough for the page, but enough for our purposes.

  • Hide Login Error Messages

Sometimes users accidentally entered incorrect information, this will result in a login error message. Whatever the reason may be, either the user name is incorrect or the password is incorrect. Unfortunately, this can make your site less secure because it also gives hackers an indication of access to your site. Therefore, some people recommend changing the message. Luckily, this is very easy. Therefore, it is better to change the error message in the function.php like this

function custom_login_error_message()
{
return 'Please enter valid login credentials.';
}
add_filter('login_errors', 'custom_login_error_message');
  • Remove login page shake

When the user submits incorrect login credentials, the login form shakes. But if you do not like this feature, you can remove it.

function custom_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'custom_login_head');
  • Change redirect URL

Typically, anyone who logs into your WordPress website will automatically go to the dashboard. However, they may have more sense to send them to custom greeting pages, membership areas or elsewhere. You can redirect all the homepage as an admin except for the following

function custom_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "custom_login_redirect", 10, 3);
  • Set “remember me” to check

If users check the Remember me checkbox before login, they will be logged on your site for 14 days. Otherwise, they are automatically logged out after two days or when they close their browser.

By default, this box is unchecked, you can change it in the following stages:

add_filter( 'login_footer', 'default_rememberme_checked' );
}
add_action( 'init', 'default_checked_remember_me' );
function default_rememberme_checked() {
echo "document.getElementById('rememberme').checked = true;";
}

2. Create a Custom Login Page WordPress via plugins

Of course, if you can not do all these changes through a plugin, then WordPress will not be WordPress. In fact, users have a whole range of plugin solutions to choose from, and we will talk about some of them now.

1. Theme My Login

theme my login

Do you want to allow users to register on their WordPress site, but they are not allowed to access the admin area? Theme My Login is a popular WordPress plugin that allows you to create a custom WordPress login page. Have you ever thought that your WordPress login page matches the rest of your site? Your wish has come true!

Theme My Login allows you to bypass the default WordPress-branded login page, which does not look like anything else on your site. Instead, your users will be presented with login, registration, and password recovery pages right inside your subject. The best thing? It works out of the right box, in which no configuration is necessary! Take back your login page, WordPress users!

Some of the key features included in the Theme My Login plugin are

  • It allows you to redirect your users to logins, logout, and registration based on their roles.
  • Allows you to restrict posts/pages, widgets, and naval menu items depending on user login status and/or role.
  • this plugin allows your users to edit their profile from the front of your site.
  • It allows you to moderate your users by confirming their email or by requiring administrator approval.
  • Enables Google reCAPTCHA support for your registration and login form.
  • It allows you to log in to your site using your favorite social providers.

2. Custom Login Page Customizer

custom login page customizer

Custom Login Page Customizer is another very easy to use a free plugin. Once installed, navigate to Appearance> Login Customizer, while still being logged in, then launch your login page in the customizer. Customize almost every aspect of the login form, such as setting the login logo as well as width, height, and padding. Add background, choose background color and size. Setting Background for the Form. Form Styling – Adjust the width, height, padding, border, etc. In the live preview, you can see all the changes and modifications made in real-time.

Some of the key features included in the custom login page customizer plugin are:

  • Custom Login Page Customizer Plugin allows you to easily customize your login page directly from your WordPress customizer!
  • You can customize almost anything and see it as you wish.
  • The default WordPress login screen is quite clear. You can change it in different ways, but many of them require you to add codes.
  • It offers you to design your own custom login page using theme customizer.
  • Add your custom logo, choose background color, set background for the form, adjust form style, color picker, and custom CSS.
  • You will not have any problems creating this colorful or unique login screen with this plugin.

3. Custom Login Page Templates

custom login page templates

WordPress custom login page template plugin customizable support for custom CSS along with various 5 templates, logos and background uploads to the default WordPress login page. Use your own website logo, use a beautiful background image and choose between 5 custom login page templates (more to come).

Each template is custom designed so that you can get a beautiful login UI to spend time without modifying each small color, shadow or font. And when you need more control over the interface, it’s easy to add custom CSS and provides full control over the look and feel without going through hundreds of settings and color pickers.

Some of the key features included in the custom login page template plugin are:

  • Quick Response to Your Changes Using the Customizer
  • Upload your logo and upload a full-width background image
  • Light and dark templates
  • Style your WordPress custom login page with your CSS
  • Installing WordPress for white label customers
  • When managing multiple WordPress sites, having different logos makes it easy to differentiate between sites

4. Admin Custom Login

admin custom login

This Admin Custom Login plugin for WordPress has been packed with a powerful setting panel, through which you can fully control this plugin, which in turn gives you full control over the aesthetics of your site’s login page. . Feature-wise, you get the option of adding background slideshows, adding animation effects, and many customization trips. There is also a social media integration thrown into the mix.

The Admin Custom Login plugin is available directly in the WordPress repository and receives regular updates. It gives you the ability to customize your WordPress Admin login page accordingly. Create a unique login design or admin login design with the admin custom login plugin, almost every element on the login page is custom-enabled with the admin custom login plugin.

Some of the key features included in the Admin Custom Login plugin are:

  • Customizable Login Form – You can modify many fields in the form such as login form status, login form color, color opacity, font color, size, the color of the button and more.
  • Background slideshow – One person can customize the login background without any difficulty in any type of slide show.
  • Social Link Connectivity – A person can add social icons through social networking logins such as Twitter, Linkedin, Pinterest, Flickr, YouTube, Tumbler, Digg and many more.

5. Erident Custom Login and Dashboard

erident custom login and dashboard

If you are in heavy customization, then Erident Custom Login and Dashboard WordPress Plugin will not ask you any questions. Despite being a free plugin, it comes with a boatload of features with which you can fully customize the look of your login page as well as your WordPress dashboard completely.

Top-rated PLUGIN for login page customization !!! Easily customize your WordPress login screen and dashboard easily. The general options include CSS options for changing the background, uploading custom logos and designing forms. Add your company’s logo to the login screen, change background images, colors, styles, etc. Customize your dashboard footer for your branding too.

Some of the key features included in the Erident Custom Login and Dashboard WordPress Plugin are:

  • Replace footers on admin dashboard or keep it as default
  • Add image/color background to the login screen.
  • Add image/color background in the login form with ambiguity.
  • Choose a color using awesome jQuery color picker
  • Change Text / Link Color and Size on Login Form
  • Change the WordPress logo on the login Form with your own
  • Enable / Disable Shadow for a link on the login form

6. Absolutely Glamorous Custom Admin

absolutely glamorous custom admin

Fully glamorous custom admin allows you to customize WordPress admin panel, admin menu, admin bar and easy to most interested us – login page. This is a free plugin, and as you do not need many customizations as a whole. In addition, many settings are limited to optimizing the admin area. However, the requirements of all basic login page optimization are met by the plugin.

The features you get for login page customization include the option to hide/change the text “Back to Blog”, change the login image, include/delete custom hyperlinks in the login image, including the removal of the login image completely Options are also included. You can also display login boxes with rounded corners. And finally, the plugin gives you the option to hide/change the “register” button and the “lost password” button.

Some of the key features included in the Absolutely Glamorous Custom Admin Plugin are:

  • Hide or change admin bar items. Remove WordPress marks from the admin bar. A brand with custom color
    Change and delete existing and add custom admin menu items.
  • This tool is absolutely integrated with the glamorous custom admin panel and its use can be used to change the default WordPress admin panel colors, admin bar, admin menu, login page, background, and text.
  • Brand your admin panel page with custom content, colors, images, and text.
  • There are many admin panel options used to improve WordPress UX and login pages like Dashboard Widget, Help and Screen Options, WordPress Logo, Link, Menu, etc.

Wrapping Up

We hope this guide helped you to create a custom login page in WordPress. A custom login page plays a very good role in social media engagement and email marketing. Your site should look like a part of the layout. Attempts to optimize your site’s WordPress login page are proportional to building your brand. This will give users a personalized online experience.

Customizing the WordPress login page offers many benefits like persistent branding, which will especially appreciate your visitors and customers. However, a custom login page can also help improve site navigation, user experience, and site security.

I would love to hear about your optimization experiences. Do you customize your WordPress login pages? How do you do this? Any plugins or tips to add? Please do this in the comments section below!

However, if you are looking for a WordPress Website then you must go for Ready-Made WordPress Website powered by Delegate Studio. ReadyMade Website includes Top-level Domain, Managed Hosting, SSL certificate, Elementor Website Builder, SEO Optimization, and 24/7 Support.