Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
The login page in WordPress is not only our gateway to the administration area of the website, it is also the password recovery page.
And the truth, considering that you always have to go through it, its appearance is the most basic that could be had.
Why Customize WordPress Login Layout
Perhaps if you only manage your website you have never considered change page layout to but it is becoming more and more frequent that in those WordPress on which several employees work, such as a company website or online store, you want to get access with a more corporate aspect.
But if we also have a plugin installed that involves user management, it may be that said plugin also uses that page for access and recovery of passwords for non-administrator users, and giving it a design in accordance with the web is also a good option.
If you have decided to modify the design of the login, in this article I will show you how to do it through code, but I will also tell you how to change the design of your access page with a plugin.
Change WordPress login layout with code
Modifying the design of the access page through code is not complicated but we will need and in it, a css style file and edit the functions.php file for .
To change the logo we can upload the images we want to use in the child theme or upload them through WordPress Media and then use the absolute path of the image.
The first step is create the styles file. You can create it in the root of the template and create a folder to have it better organized. I am going to create the file login.css in the root.
Before you edit it we need to load it on the WP Login page To make it work. To do so we edit the functions.php file of the template. We need to add the following function and action:
add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );
function my_login_logo() {
wp_enqueue_style( ‘login-custom-style’, get_bloginfo(‘stylesheet_directory’). ‘/login.css’, array(‘login’) );
}
with this code add the style sheet in the header of the access page next to the rest of the style sheets.
Now we can modify the entire appearance of the page by editing the login.css file. Let’s change the Logothe background and the form aspect.
Change the logo. To change the logo we have to add the following style:
.login h1 to {
background-image: url(‘https://domain.com/wp-content/uploads/2021/03/wp-easy.png’);
background-size: 100%;
width: 310px;
height: 90px;
}
We have to change the width (width) and height (height) to adjust the size of our logo. By default the width and height of the WordPress logo of 84px.
Change the background. To give it a touch of color we are going to change the color of the background of the page.
body.login {
background: #e6e7b6;
}
If we wanted to place a background image to occupy the entire screen the code would be:
body.login {
background-image: url(‘https://domain.com/wp-content/uploads/2021/03/wp-easy.png’);
background-size: cover;
background-position: center;
}
Form. Now we are going to modify the appearance of the form and align the links at the bottom.
.login form {
border:none;
box-shadow: 1px 1px 13px -2px rgba(0, 0, 0, 0.3);
}
.login form .input, .login input, .login input {
border-radius: 0;
background: #ebebeb;
border: 1px solid #d9d9d9;
}
.wp-core-ui .button-primary {
border-radius: 0;
background: #cc0000;
border-color: #cc0000;
}
.wp-core-ui .button-secondary {
colour: #6e6e6e;
}
#nav, #backtoblog {
text-align: center;
}
.login #backtoblog to, .login #nav to {
colour: #cc0000;
}
Summarizing the styles, what I have done has been modify the form border For a shadow, I have removed the rounding of the fields and the button and I have changed the background and the border. I also have changed the color of the eye in the password field.
Finally I have centered and changed the color of the links at the bottom.
Combining it with a background image the result would be this:
Working a little styles we can get a much nicer page and adapted to our website.
. Changing the WordPress login url is a recommended security measure to prevent attempted login attacks.
The easiest and most recommended way to do it is by using a plugin, although now I am going to explain how to do it by code. But don’t worry, at the end I also include how to do it using a plugin.
To do it through code We will need FTP access to the root of our WordPress installation.
Before making any changes to a file, download a backup so that you can recover what you had at any time.
The method consists of editing the wp-login.php file. The first step is to rename it to the access name we want. I will rename it as wp-access.php.
Next we open the file to edit it. We have to replace all references to wp-login.php with wp-login.php. If you use an editor like Sublime Text you can do it faster.
Now the WordPress path will be: https://yourdomain.com/wp-access.php.
Change WordPress Login Layout with a Plugin (3 Best Plugins to Change WordPress Layout)
If your thing is not to play with the CSS and enter code in the function.php I will describe it to you three plugins to be able to change the design of the WordPress login in a very simple way with very professional results.
1-
Although practically the three plugins that I am going to describe have the same characteristics, each one of them has some peculiarity that the others do not have.
In this case, I would point out that apart from obviously being able to change the design of the login page, this allows you to add your social networks to the access page, it also allows you to add Google CAPTCHA.
This would be the most complete of the three in terms of customization options, which is what interests us.
BACKGROUND DESIGN
Admin Custom Login allows you three options for the background of the page, a color, a static image or a slideshow.
Perhaps being able to use a background slider is one of the features that stands out the most compared to the other plugins described in this article.
It allows us to choose the number of slides and the transition effect. There are not many options but there is a paid version that complements it.
CONFIGURATION OF THE LOGIN FORM
In this case we have three options, the one that comes by default in WordPress, floating and floating with customization.
Be careful here, if we choose Floating with customization we can put the form in the position we want by configuring the left and right margin and the top and bottom margin. But this form will not be responsive.
The Floating option allows us to put it on the left, center or right of the screen.
And from here it offers us many aspects to configure, such as the background of the form, allowing not to put, put a color or put an image, and also determine the opacity of the chosen background,
As well as the color, style and thickness of the border, rounding the corners and of course the size of the form and styles can be added to generate a shadow.
In this section we will have to add the texts that we want to display in the “Username” and “Password” part, both in the upper part of the field and inside the form (Placeholder Text). And finally the text of the Login button.
SOURCE CONFIGURATION
In this section we can configure the color, size and font type of all the texts of the form and the Login button.
It also allows us to select which texts to display.
LOGO SETTINGS
This plugin allows you to add your logo next to the login form. From this section we can activate this function, give it size and put a link.
SOCIAL SETTINGS
The configuration options for the networks range from the size of the icon, the type of icon, rectangular or circular, color, background color, color when you hover over it and the networks that we want to show.
Finally, this plugin has two more options that differentiate it from the rest. On the one hand it allows us to put a to improve access security and on the other hand it allows us to export and import settings from the login page.
two-
This plugin does not have its own configuration area, but the developers have used the visual customization section of WordPress itself. So in order to change the design you must access Appearance > Customize > Colorlib Login Customizer.
At first glance from the customization area we see the two advantages that this plugin has. On the one hand, by using the visual customizer, this allows us to more easily see the changes made and, on the other hand, it offers us a series of predefined templates that will allow us to create elaborate designs with a single click.
The rest of the options are already very similar to the previous plugin:
LOGO OPTIONS
From here we choose if we want to show it or not, the URL of the link and the size. It also allows us to add a title below the logo.
DESIGN OPTIONS
In this section we configure the structure of the page. We choose one or two columns and the vertical and horizontal position of the form. Quite elaborate designs can be achieved by playing with the possible combinations.
GENERAL FORM OPTIONS
When designing the form, we must resort to this section that allows us to size it, insert a background image or a flat color, give it interior padding to separate the border from the content, add a border and round the corners, add shadow, modify the size and layout of the form fields and the texts associated with this part.
We see that this section is more complete than the previous plugin.
And with the remaining options we can change texts and design the login button.
It is undoubtedly the simplest of the three. The settings page is found in Settings> Custom Login.
With a single configuration page, in this case in English, we can create our login page through the simple options it offers us.
It allows us to add a color or image background and give the form styles. And although visually this configuration area is the most basic, we will be able to do practically the same as in the other plugins.
One of the features that I miss in the three plugins described is the ability to change the URL of the WordPress login page. As I have already mentioned, it is a highly recommended security action and we should not do it by code.
That is why I leave you this last plugin for it:
It is a very simple plugin that will allow us just what we need.
The new one…
Facebook Comments
Disqus