How to Customize a Password Protected Page in WordPress
In this tutorial I show you How to Customize a Password Protected Page in WordPress. By default and depending on what theme you’re using, the front end of the password protected page usually looks terrible. Luckily, with just a few lines of CSS and some creativity, you can customize this page in no time to make for a much more pleasing experience for your users!
Here’s a before and after of the look we’ll achieve:
I wanted to mention that the code below is not Divi specific and can be used for any WordPress theme. Though the button style class might be different. If you’re new to WordPress and don’t already know, you can set a page as “Public,” “Password Protected” or “Private” in the visibility settings of the page or post.
By checking the password protected option, you can assign a password and the page (on the front end) will show a field for entering the password then a submit button. That’s what we’ll customize with the code below!
Here’s the CSS I wrote in the video:
Just change your padding, width and button colors accordingly. One thing I neglected to mention in the video but added below is a media query with the padding adjusted for mobile. You’re welcome to play around with that or use % instead to adjust the padding across all devices.
.et_password_protected_form {
min-height: initial;
padding: 100px;
max-width: 700px;
margin: auto;
}
.et_password_protected_form .et_submit_button {
background: #8dc63f;
color: white!important;
border: 2px solid #8dc63f;
}
.et_password_protected_form .et_submit_button:hover {
background: white;
color: #8dc63f!important;
}
@media (max-width: 479px) {
.et_password_protected_form {
padding: 40px;
}
}
Links mentioned in the video:
Additional options:
Similar Tutorials:
- For more advanced customizations, check out Aspen Grove Studio’s post.
Want to level up your CSS game?
Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
OMG you have no idea how many times I have seen this asked in FB Groups! Nice one Josh, works like a charm.
Awesome. Thanks, Amy!
Thank you Josh !
It is perfect for me too.
Only one thing. Is there a way to change the message : “to view this protected post…” ?
Is it possible with CSS ?
Thank you again
Just updated the post with some additional resources on that! Can’t do it with CSS as it has to be done with php but there’s a free plugin that looks like a good option: https://wordpress.org/plugins/change-password-protected-message/
Thank you so much Josh. All the informations you give us are very precious.
I am very excited to test this plugin, since the message translation in my language (French) contains an error !
Thanks so much for this CSS code. I placed it on our corporate site yesterday and only changed the button color. You probably saved me an hour of work. I know enough CSS to be dangerous. You can see it in action at https://remason.com/beprepared/ and no I can’t tell you the password. 🙂
Looks great, Charlie! Glad to hear it worked out and saved you some time. If you want to get even more dangerous with CSS, I’m currently running a promo on my CSS Course. Code CSS30 for $30 OFF if interested! Would love to have you in the course.
Josh, this was very helpful. I use divi for my client websites and this is the first time I have needed to setup a password protected page. I spent hours scrounging the internet boards and your solution was the best and most sustainable. My one remaining problem is that even though I was able to use the plugin you recommended to change the password request text, and I was able to style the button, the new text from the plugin is still very small and not the font that fits with the rest of the site. Is there a way to style the text font, color and size? I have not been able to find a solution.
Hey Jose, great to hear. Yeah you can do that with a little custom CSS. I’m sure how advanced you are but you can use inspect element to find the right class or ID and adjust the font size, color, etc from there! If you’d like some more guidance on that, I have a CSS course that will be right up your alley. If interested use promo code CSS30 for a discount to join!
This is by far the best tutorial for Divi on password protected pages. It is the only one I found that has clean CSS and made sense. THANK YOU!
Awesome!! Thanks for the comment, Frank.
You’re a legend! Thanks so much Josh. I love that you have a video and then a very simplified text explanation so I could come in, copy-paste your css and get on with something else (no fluff)! Much appreciated.
Awesome! Thanks for the note, Jo 🙂
I use Elementor but this worked on that too. Great solution. Thank You
Good to know it worked for that theme as well!
Josh, this is awesome! What if I want to add images and more customization to this page? A welcome message, image etc? Thank you!
mmm honestly not sure. Let me look into that. I may do a 2.0 on this tutorial with some more advanced options 🙂
Ah, I’d love that! I have a big audience – and they want to know how to do this, as do I – you’re a bit better on the CSS than I am – well, a lot 🙂 and I’d be happy to let them know you taught me! 🙂 If you can shoot me an email that would be amazing 🙂
I would probably have to be done with some php but I do have that on my tutorial list.
Let me know when it comes out! 🙂 Thank you Josh!
Just make sure you’re on my email list, Suzi and I’ll notify you when it’s up!
We want to change text (This content is password protected. To view it please enter your password below:) without using a plugin! In which .php file is this text located and would you just go in there and simply edit the text?
Thanks for your post. I’ve searched around and found another password protection plugin whose password page can be customized. You can take a lot at it here: https://passwordprotectwp.com/docs/customize-password-protected-form/.
Thanks so much, Josh. This was extremely helpful!
Wow! Awesome Thanks so much for this CSS code. I placed it on our corporate site yesterday and only changed the button color. You probably saved me an hour of work. I know enough CSS to be dangerous. You can see it in action at https://eduwapaz.com/answer and https://sureloaded.net no I can’t tell you the password. 🙂
Wow thanks so much josh, i love this
Hey Josh, I just discovered your site and am thrilled for the tutorials you have. I am also interested in some courses since I use Divi exclusively and don’t know so much about CSS.
I did exactly as your video and code suggested and I see the changes reflected in my Theme Editor but not live when I try to refresh the page that the form is on. You can see the form here – https://www.swanmichelle.com/swan-dharma-deluxe-dashboard/
And this is my code –
/***edit password pages***/
.et_password_protected_form {
min-height: initial;
padding: 100px;
max-width: 700px;
margin: auto;
}
.et_password_protected_form .et_submit_button {
background: #0a2daa;
color: white!important;
border: 2px solid #0a2daa;
}
.et_password_protected_form .et_submit_button:hover {
background: white;
color: #0a2daa!important;
}
@media (max-width: 479px) {
.et_password_protected_form {
padding: 40px;
}
}
Any suggestions would be very helpful!
Hey Angela, usually if it works via the editor but not live, you just need to clear your cache (if you have a caching plugin) and do a hard browser refresh. That should do it!
I’d love to help you more with your CSS game. I have a promo out right now for $30 OFF my Divi/CSS Course. Use code css30 at checkout if interested! You’re always welcome to contact me with any questions.
Cheers!
Thank you so much! This was just what I needed. And thank you for making the video short and simple.
Awesome tutorial Josh! This is exactly what I was looking for. FINALLY no more ugly login pages!
I would greatly appreciate an updated version which removes the arrow on the button and allows the message above the login box to be custom.
Noted! Thanks, Britt 🙂
I tried adding this and nothing changes..
Kayleigh be sure to clear your cache and do a hard browser refresh to show the CSS changes.