Have you ever wondered how to customize your WP login screen? Well, in today’s tutorial, that is exactly what I’m going to show you how to do.
(Music) Welcome to WPCliffNotes. This is where we teach tips, tricks, and hacks about WordPress. If you are new to this channel, slap that subscribe button, and if you like this video at the end, hit that like button as well. So guys, if you’re ready to customize your WP login screen with plugins, let’s jump to the computer.
Welcome to the computer, guys. In today’s tutorial, I am going to show you how to customize the login screen of WordPress and we’re going to do this with two plugins. The first one is, WP Hide Login and then the second one is, Login Customizer. So guys, with that said, let’s jump into the tutorial.
And also, if you guys haven’t heard, I am creating a class all about advanced custom fields. So, if you’re interested in something about learning the Advanced Custom Fields plugin, go to ACFClass.com and you will see that in the left-hand corner of the screen now. ACFClass.com. All right. So, let’s jump into this tutorial.
We’re going to go into the back of WordPress and we’re going to go to plugins. But one of them is called Custom Login. We’re going to install WP Hide Login. We’re going to go activate the WP Hide Login. So with the WP Hide Login, after you hit the settings icon, it’ll bring you to the settings area, general, and it’ll bring you all the way down to the bottom of the general area, and you’ll see login URL. So, you can change this to pretty much anything you want to. So, I’m going to change it to Cliff Notes and hit save. And now when I’ll log out, you can go to Cliff Notes and there’s your login screen. And if you go to WP-admin, it gives you a 404, because it doesn’t exist. That’s how you customize the URL of your login screen.
Now we’re going to customize that whole area. So, to activate the Custom Login Customizer, we’re going to go to plugins, plugins, customize a login, and I’ve actually already activated it. So now, we’re going to go to appearance and then Login Customizer. And we’re going to say, “Start customizing.” And there’s all types of different things. The first thing is the logo. You can customize the width, the height. You can customize the login background, the background color, the background size. You can customize the form styling, so you can do that. And then you can customize the fields, you know, what color they are, the width, the border, the input, and different things like that. You can customize the button color. You can do that. And then there’s other stuff too. And then you can write custom CSS. So, it’s a really cool plugin.
And so now we’re going to add the logo and we’re going to s-, do that. And then for some reason, it’s not loading in the customizer, which is kind of weird. So, I am going to open up an incognito window, pull it over like so, and load up this website. And so, there we go. It’s 84 by 84. There’s my logo. So, we’re going to make this 250 and then we’re going to make the height, uh, 150, and publish it, and then refresh this screen. And there you go. And we have the logo. So next, we’re going to do the background. So, I’ve actually already created a background. So, we’re going to go here. We’re going to double select it, click open, let it load up in here, and then hit that. And we’re going to create a background color and hit publish. And so, then we’ll hit refresh. And there we go. Our little guy’s right here. And we will say, “Center, center.” Refresh. How about cover? Let’s try that.
And then we will hit refresh. There we go. So, we will go next to the … We did the background, the form styling. We can make this 420 if we want it. And we’re going to … I’m going to leave it like that and we’re going to hit publish, refresh. So, this should get wider. We can make it higher if we want to. Next is the form styling. So, the background, we can make this … Put it there. Hit save. Refresh. And there we go. These fields are orange, so we can do that if we wanted to. And we’re going to go to next. We want to see button style, button background. I’m going to make it orange and then the border I’m going to make orange. The background hover I’m going to make this darker orange and the border cover, color I’m going to make this darker orange. And we’re going to make this shadow button color, we’re going to leave that at white, and then hit publish.
So now, when we hit refresh the button should turn … There we go. So, we’ll make this orange. How about that? And then save. And then next we can go to other. We can make the text color white so it shows up better. And there we go. That’s it, guys. Um, that’s how you customize the login screen of WordPress with two plugins. So guys, again, these two plugins are WP Hide Login and you can find it at this URL. And again, if you’re wanting to customize the login, you can go here and the URL is right here. So guys, again, my name’s Cliff Canady and this is WP Cliff Notes. And if you loved this tutorial and you got a lot out of it, please subscribe, and hit that like button, and comment below. Thanks a lot, guys, and have an awesome day.
Guys, that’s how easy it is to customize your WP login screen with plugins. Guys, again, if you’re new to this channel, hit that subscribe button and if you loved this video, or even liked this video, slap that like button. Again guys, my name’s Cliff Canady and this is WPCliffNotes. Until further videos, I will see you later.