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.

Want to level up your CSS game?

Want more free tutorials and layouts?

I'd love to do more. But as you can imagine, it takes a lot of time and effort to put these together. In order for me to do these, I need to take time away from my business which is what's currently paying the bills. If you'd like to leave a tip and show your appreciation, it would show me that the time I invest in these is worth it and will help keep more coming!

Follow me on Facebook!

Like and Follow Me on Facebook to connect with me, see exclusive Facebook-only webinars, Q&A’s and to get exclusive deals and offers I only provide to my FB followers!

Join my Divi Facebook Group!

Join my Divi Web Designers Facebook group to get free support and to be automatically plugged into an awesome, supportive community of fellow Divi/WordPress web designers!

Join the Cool Club (aka my email list)

Leave this field empty if you’re human:

I offer exclusive discounts and deals to my email list and promise not to abuse the privilege to email you directly. No spam. Just special deals, important announcements and a notification when a new tutorial or video goes live!