1. Code
  2. Theme Development

Customizing And Styling The Password Protected Form


Recently I had a client want one of their WordPress pages protected, no problem! Then he came back and said, can you change the text and make it look better? Hmm... Sure! Here's how to...

Step 1 Edit Your functions.php File

Alright, let's open up your functions.php file and add this block of code:

Let me dissect this really quick for you. The password-protection code is generated from a file in the wp-includes folder. "Cool", you think, "I'll just go in there and make my changes". Don't do it! Tempting as it may be, editing the core code is a terrible, lowdown, no good idea. For one reason: What happens if you update WordPress? It gets wiped out...sorry. Okay, so putting this block of code in your functions.php file let's you amend it and not worry about losing any changes to the form when you update.

As you can see, I actually added classes to the form itself, the label of the form, the password field as well as the button. Now we have everything we need to style it completely with CSS. Oh, and we're not actually changing anything in the wp-includes folder, so we're not breaking any rules.

Step 2 Change The Default Password Protect Text

The text in capitals above also shows you what I changed... the first set of text:


As you can see this was your intro text... it used to say this:

This post/page is password protected. To view it please enter your password below

Now we're able to change it to whatever text you want up there. You can even delete everything between those quotations and just have nothing display up there at all.

Step 3 Change The Password Input Field Label

The default label that's shown to the left of the input field is Password. Here you can change it to whatever you'd like to say. In my case, I assigned it a class took the label out in css by putting the display to none.

You can also change font size, color, the works to this label

Step 4 Style The Password Input Field

I hate how forms look, but with this addition to the default password input field i'm able to make it look a little more "up to date". Feel free to change it however you see fit.

Step 5 Styling The Submit Button

In the functions code, I added a class to the submit button called "button". I did this because I wanted all the buttons on my client's site to look exactly the same. Uniformity in a site is key. Here's the CSS I used:

For some reason I was getting the arrow when I hovered over the button so I just changed cursor to show pointer and it went back to the hand on hover.

Step 6 Adding Extra Text Below The Form

I actually needed to add a little note to tell people that the password field is case sensitive so to add extra text below the form, I just added a paragraph code and inserted a style tag to it to style the text separately from the rest of the page.

And we're done!

Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.