How to Customize a Password Protected Page in WordPress

by | May 5, 2019 | Divi Tutorial, Wordpress Tutorial | 33 comments

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:

Want to level up your CSS game?

Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!