Hey everybody its How20 here. In this quick tutorial, I’m gonna show you how to customize and style a password-protected page in WordPress .Now before we dive into this, I am using Divi but this tutorial is not based or geared around just Divi itself.
you can actually apply the method. I show you here to any WordPress theme and I’ve been doing this for years as I’ve been developing WordPress websites and I did it just recently on a site and I was like you know what let’s make this a tutorial because I’m sure it would help out a lot of folks and again this is not applied to just Divi this will work across any WordPress theme you use.
So with WordPress, you have the ability to create a password protected page which is all great but usually, it looks atrocious. Depending on what theme you’re using or depending on what you have in regards to styling often it’ll look like this in this case. I’m using the Divi builder on this page and the password protected post is full width it just is not pleasing to the eye it looks kind of atrocious. I would love to be able to style this to be a little more pleasing for the users and maybe to give the button of styling, so that’s what we’re gonna do. we’re gonna create this look to where there’s some padding. it’s not as wide and I’m gonna show you how to edit and customize this button as well.
So again on this page you can see that I’ve got it’s set to password protected. if you’re not aware of how to do that all you need to go is to go to your WordPress page because visibility and click password protect it.
I’ve got a super secure password of one two three four and now we’re ready to customize this. Now before we dive into this and I’ll show you how to do this one thing. I do want to say is we are going to be writing just a little bit of CSS. just a few lines and this is why I find it. So important to know, at least the fundamental elements of CSS. Alright with that said let’s go ahead and dive in first things. first I’m gonna right-click around the password protected form
and I’m gonna use inspect element and what we’re gonna do is we’re gonna search for a class or an ID that we can customize. The important thing is here is we don’t want to customize the entire page container or anything like that we just want to focus on the form, the password form. so I go into much more detail in this in my CSS course but we’re gonna search until we find something that tells us that hey we can target the entire password protected the form and in that case, I’m seeing a class right here of ET password protected form. so let’s click that and this is the class that we’re going to use now this gives us two classes right offhand it says post password required and then password protected the form.
we’re actually just going to use this but what I’m going to do is write the code in here and I’ll show you how we’re gonna tweak this to put it in our site. so first things first let’s add some padding I’m just gonna do padding and let’s try 100 pixels. By doing that you can see that this added padding to the top right bottom and left if I were to do a hundred pixels and then 20 here, that’s gonna do 100 on the top and 20 on the right and again I explained this more in my CSS course. But for right now I think a hundred looked good all around. So let’s do that yep that looks good however I think that it’s still really long. most passwords are not gonna be very long. so let’s set a max width we’re gonna do max width and let’s try 600 pixels let’s see how that looks. let’s do a little more because you can see the text jump let’s try 700 ( yeah that looks good 700 looks good) however it’s scooted over to the left we want to Center this and the way you can do that is by adding a margin and we’re gonna save margin auto which means that this is going to automatically place it in the center of the page and check that out guys just a couple lines of CSS and we have ourself an already much better looking password-protected page.
so here’s what I’m gonna do I’m gonna take all this and actually I’m just gonna take it up to this class because I don’t want to just there was some situation where this class right here wasn’t in there I just want to make sure this just applies to the form and what we’re gonna do is normally you’d want to put this in your child theme stylesheet but for right now just gonna drop this in my theme customizer since I’m using Divi and I’m going to go into Mike custom.css and cool thing about this is we’re actually gonna be able to see this live.
so watch this I paste this in here and there we go we can see it live. so if I were to take out the padding you can see the padding is adjusted. so we’ve got the padding back in there that’s all looking good the last thing I want to do just to wrap this up is to customize the button. so same thing we’re going to inspect just the button and we’ll keep our CSS sheet open here. So we can look at all this and you can see that this button is pulling from the styling of this class right here ET password protected form buttons. so let’s take this entire thing and let’s drop it under the code in our style sheet and now we can start having some fun let’s take this color first of all because I think I do like that green since it matches my brand but what I want to do is let’s add our brackets and now we can customize this button instead of it being outlined of green let’s make the background green check this out let’s say hey let’s make that background that green that looks good but we can’t see the text. now have no fear we can do color white and that white looks like it’s being overwritten by the original styling. so as I show in my course and as many of you know you can just do important which says hey this is more important than the theme styling let’s do that. That’s all looking good however when you hover over it we don’t want to neglect the complete UX -the user experience. So let’s make a hover class real quick and we are gonna be done here guys. Let’s copy this whole thing. Let’s drop that in there and I’m going to add hover over this and now I want to do is flip-flop. I want to take this color here and let’s put this as the color I’m gonna make sure we add the whole hex there and let’s do a background of white it could be anything though and now when I hover over that button we should see the colors flip-flop and check that out very very cool. the other thing you could do is maybe add like a border just to see kind of the more of the button border let’s do like two pixels solid that green but let’s add that hex that pound sign there and there we go now when I hover over it we should see a border button and check it out very cool.
so you could make some adjustments and again since I’m using Divi it’s pulling the little arrow I’m not gonna worry about it in this tutorial but if you’re using Divi you can target that arrow and delete that or you can use some other custom styling but yeah guys that’s it just these few lines of CSS are targeting all password protected page forms and then this coding right here you can change the actual button and you can add as much styling or as little styling as you want. so you can do some really really cool things. we’re not gonna worry about changing the text because that’s going to get in some PHP and we’re not gonna just worry about that but in any case knowing how style this is really really beneficial and again this is not applied to just dippy this will work with whatever theme you’re using. so guys I hope this has helped check out the code the post below because this code is going to be available for you and then again if you want to know how to customize pages like this and feel comfortable with CSS check out my course use the promo code below you can get access to that with a discount and I can’t wait to help you learn CSS to help you make you a more dangerous web designer alright guys hope this has helped see you on the next tutorial.