Customizing and Styling the Password-Protected Form in WordPress

A recent customer needs to add password protection to their WordPress pages, which is not complicated in itself. However, they later asked to modify the text and improve the appearance of the page. I readily accepted this challenge, and here is my implementation.

How to customize password-protected pages in WordPress

Step 1: Edit the functions.php file

Open your functions.php file and add the following code block:

<code class="language-php"><?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '
' . __( "这是您新的密码提示文本，显示在密码表单上方" ) . '
<label for="' . $label . '">' . __( "密码：" ) . ' </label>
<input class="input password-input" id="' . $label . '" name="pwd" type="password" size="20">
<input type="submit" name="Submit" class="button" value="' . esc_attr__( " .>
<p class="extra-text">额外文本可以放在这里……这将显示在表单下方</p>

';

    return $o;
}
?></code>

Let me explain it quickly. The password protection code is generated from a file in the wp-includes folder, and you may want to edit it directly. However, this is not recommended because modifying the core code is a bad idea. Why? If you update WordPress, all changes will be cleared. Therefore, it is best to avoid this approach to prevent any potential problems. Put the above code in a file and you can modify it using the WordPress hook system so you don't have to worry about losing any changes to the form when updating WordPress. functions.phpAs you can see, I actually added a CSS class to the form itself, the form tags, password fields, and buttons. Once all the necessary elements are in place, we can now fully style them using CSS. The best part is that we won't make any changes to the

folder, so we won't violate any standard WordPress coding rules.

wp-includes

Step 2: Change the default password protected text

The above capitalized text also shows what I changed, the first set of text:

As you can see, this is your introduction text, which used to be like this:

<code>这是您新的密码提示文本，显示在密码表单上方</code>

Now we can change it to whatever text you want. You can even remove everything between quotes without showing anything at all.

<code>此内容受密码保护。要查看它，请在下方输入您的密码：</code>

Step 3: Change password input field label

The default label displayed on the left side of the input field is

Password

. You can change it to whatever you want. In my case, I assigned it a CSS class and removed the tag using the following CSS rules.

The same CSS class can also be used if you wish to change other properties.

<code class="language-css">.pass-label { display: none; }</code>

Step 4: Set the password input field style

I don't like the default appearance of this form, but I can make it look more modern due to the addition of this password input field. You can further customize it according to your preferences.

Step 5: Set the Submit Button Style

In the function code, I added the

CSS class to the submit button. This is done because I want all the buttons on the client website to look the same. Consistency of the website is key. This is the CSS I use:

button

<code class="language-css">.button {
    background-color: #000;
    color: #fff;
    border: 0;
    font-family: Impact, Arial, sans-serif;
    margin: 0;
    height: 33px;
    padding: 0px 6px 6px 6px;
    font-size: 15px;
}</code>

Step 6: Add extra text under the form

I also want to add a description that tells the user that the password field is case sensitive. To do this, I just added a paragraph code below the form and inserted a style tag to apply a custom style to the text to distinguish it from the rest of the page.

Additional options

In the previous section, we discussed how to customize password protection pages from a developer's perspective. However, if you are not used to editing your code, you can also use other tools to achieve the same result.

The following are some plugins or add-ons that you can customize password-protected forms in WordPress.

YellowPencil

YellowPencil plugin is a WordPress plugin that provides a feature-rich visual CSS editor that allows you to customize the look of your website without writing any code. It offers a user-friendly interface and extensive customization options.

SiteOrigin CSS

SiteOrigin CSS Plugin is a free WordPress plugin that allows you to easily customize the look of your website with a simple visual editor. It provides a user-friendly interface that allows you to change the CSS (cascading stylesheet) of your website without writing any code.

With these plugins, you can easily implement the style and text of a custom password-protected page without directly modifying the code.

The above is the detailed content of Customizing and Styling the Password-Protected Form in WordPress. For more information, please follow other related articles on the PHP Chinese website!