Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Wpadmin
  • Overview
  • Transcript

3.2 Customizing the Login Screen

When you want to access the admin interface, the first page you come across is the log-in. And this is a very simple page, but it's also very customizable. So you can style it to match your branding or your admin theme. So let's find out how. Now, the easiest change you can start with is the logo. This is the WordPress logo, it has the Powered by WordPress title. And if you click on it, it will take you to WordPress.org. Now, if you are gonna customize this, you might as well just put in your own logo. So to do that, it's actually very simple. So lets do change the login form logo here. What you need to do is write a function, lets call it change_login_logo and you're going to tie it to login_enqueue_scripts. Now inside you're gonna put a style tag and style the login h1 a tag. If we inspect this element here you're gonna see that the logo is in a div, is an h1, first of all, and that h1 is in a div with an ID of login. So you would do something like this, let's actually close the PHP tag here and open it again here. So we could do style and inside we're gonna put login h1 a and then we're gonna change the background image. We're gonna put URL and we're gonna do a php tag here. And we're gonna put echo get_stylesheet_directory_uri() and then after that we're gonna put /images/loginlogo.png. Now this is an image that I have right here and it looks something like this. It's a big png file. And then to keep the proper distance between the logo and the menu and the form below it, we'll just put padding-bottom around 30 pixels. All right, so let's refresh and there it is. That's our logo and if you want a bigger distance you can increase the padding-bottom. If you want a smaller distance, we can decrease it. Now, when we hover on the logo, it still says Powered by WordPress, and it still sends us to Wordpress.org. So, let's go ahead and change the login logo URL and title. For that we're going to write a function called change_login_logo_url. And we're just gonna say return home_url(), which basically gives us the homepage of our site, and then function change_login_logo_url_title(), which will return anything we want. So we're just gonna say Tuts+ Child Theme. And then we're going to tie these in using filters to login_headerurl and then login_headertitle, change_login_logo_url_title, which is this function here. Now, refresh, when we hover it tells us Tuts+ Child Theme, and when we click on it, it takes us to our home page, which is exactly what we want. Now, how exactly do we style this whole page? Because, this is a regular HTML page with CSS, with JavaScript. So we can actually load custom styles and custom scripts for this very easily. So we're going to create a function that's called change_login_stylesheet, and we're gonna say add_action, login_enqueue_scripts, change_login_stylesheet. Now inside, we're gonna do this, wp_enqueue_style. We're gonna call this custom_login. And we're gonna get the stylesheet_directory_uri. We're gonna say custom-login/custom-login.css. And we're gonna do the same for the JavaScript. Presuming we have JavaScript. So instead of style here we're gonna say script. We're gonna call it the same, custom-login, and it's gonna be custom-login.js. Now, let's go ahead and create those two files. Okay, so now we have our new folder and our new files. Now, what you need to do here basically is find out what kind of classes and IDs there are and style them accordingly. Fortunately the WordPress Codex helps us a bunch here. If you go this page here, Customizing the Login Form, they actually give us all the CSS selectors that we need. So, we would just copy this, we would paste them in our CSS file, and then change it at will. So for example if I want the body.login to be a different color than this gray here, let's say we want to make it white, right. Well I would do just background-color, white. And it should change to white, so let's see if we did something wrong here. custom-login CSS, okay, so we forgot about these two. All right, so now it is white and maybe you wanna add a border to this box so it stands out a bit more. Well you would find that box and in our case, it's the login form here. So I would just do border, 1px solid and a color. Just like that and I would get a different border. So by using these selectors, you can customize this page in any way that you want, really, really simple. And also if you have any kind of scripts you can put them in the custom login CSS. All right, now, there are a few more minor things you can do to the login page that could help you depending on the situation. For example, what if your email address got hacked and you were using that email address to manage this account? Well the person who hacked it might go and say lost password, and reset your password, so you can actually disable this feature. And to do that, you would write a function, let's call it disable_reset_pwd, and you would just return false here, and you would tie that using a filter to allow_password_reset. All right, so now if we refresh and you click on lost password, and you tie in your email address. It says password reset is not allowed for this user. So that's something you can do in case, you know, your email got hacked or something like that. Now if we go back to login and we fill in the form but not completely and we click login, we see this little shake here. That might annoy some people, so we can actually remove this. You would write a function. Let's call it remove_shake, and here you would just say remove_action, login_head, wp_shake_js and this is the priority. 12, like that. And then you would do add_action, login_head, remove_shake. So, right now, if we refresh, the shake is gone. And that's about it for customizing the login page. As you can see, some very simple techniques allow you to create a custom login screen. Now, another big part of the admin UI is the admin bar, which is displayed in both front end and back end, and it's also customizable. So, that's coming up next.

Back to the top