How to Hide or Change Password Protected Message and Form in WordPress

In this tutorial, we are going to show you how you can change password-protected message and the form in WordPress. WordPress allows you to have password-protected posts or pages. This basically means that only people who have the defined password will be able to access the content of that page/post.

The default, the message for this page will read “This content is password protected. To view it please enter your password below:”.

But sometimes, you might want to change the default password-protected message in WordPress.

First of all, to create a password-protected page, we simply edit the page/post, we click the ‘Edit’ link next to ‘Visibility’ on the right sidebar, select the ‘Password protected’ radio button and we can define a password as shown below:

Then when someone visits the page is will look something like this:

How to Change the Default Message on the Password Protected post/page in WordPress

To do this, we can simply add the following code to our functions.php file:


/**
 * Password Protected Message
 */

function my_custom_password_form() {
  
    global $post;

    // Custom logic for the message
    $password_form_message = 
    __( '<p id="private-area-message">This is my new message for the protected area. If you would like access to this page, please send an email to <strong><a href="[email protected]">[email protected]</a></strong></p>' );

    // Put together the custom form using the dynamic message
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
    $form = '<div class="container"><form class="protected-post-form" action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" method="post">
    ' . $password_form_message . '
    <label id="password-label" for="' . $label . '">' . __( "Password:" ) . ' </label><input name="post_password" id="' . $label . '" class="pw-window" type="password" size="20" /><input type="submit" class="btn btn-large" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
    </form></div>
    ';
    return $form;

}
add_filter( 'the_password_form', 'my_custom_password_form' );

After you have added this, your password-protected page will look as follows:

We also included the form as well so we can make changes to the form label and submit input value.

Hiding the Password Protected Message

To do this, we can use the same code that we used above, the only thing we need to change is the $password_form_message value by simply setting this to '' (empty) as shown below:


      $password_form_message = 
        __( '' );

And that’s basically it, pretty simple, right? We hope this has helped – if you need any assistance, feel free to drop a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add A Toggle For Password Visibility

In today’s tutorial, we’re going to show you how to add a toggle icon next to your password to show/hide the value.

The way in which we will be adding this is using jQuery, Bootstrap 4 with Font Awesome. This can be done without Bootstrap and Font Awesome, but these days, these are often used for a lot of websites.

If you prefer, you can check this out on CodePen.

Let’s dive right into it and start with your HTML markup:


<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
      <form>
        <div class="form-group">
          <label>Password</label>
          <div class="input-group" id="show_hide_password">
            <input class="form-control" type="password" value="mypassword">
            <div class="input-group-addon">
              <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

And here’s the jQuery code to go along with it:


$(document).ready(function () {
  $("#show_hide_password a").on("click", function (event) {
    event.preventDefault();
    $("#show_hide_password i").toggleClass('fa-eye fa-eye-slash');
    if ($("#show_hide_password input").attr("type") == "text") {
      $("#show_hide_password input").attr("type", "password");
    } else if ($("#show_hide_password input").attr("type") == "password") {
      $("#show_hide_password input").attr("type", "text");
    }
  });
});

And there you have it. There are other ways to do this, we can use an icon instead of integrating Font Awesome, we could even add a checkbox to reveal the password but I think it’s quite commonly used to have the eye icon with password reveals these days. Do you have another way you like to add this? Let us know in the comments below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Decrease or Disable the Strength Required for your WooCommerce Passwords

Today we are going to show you an easy way to decrease or disable the strength required for your WooCommerce Passwords without the use of a plugin.

Disable the Password Strength

The first thing I will point out here is that this method is not necessarily advised but it’s one of those requests you might come across from time to time. Forcing strong passwords on your WooCommerce store can sometimes deter customers from processing their order which is one of the main reasons you are probably reading this post. For the average person, the strength at which WooCommerce/Wordpress require their passwords to be is above and beyond anything the customer will remember. Personally, I use LastPass to generate and store all of my passwords, so this is not an issue for me, but your customers may not be as tech-savvy.

Disabling strong passwords should be done at your own discretion, but until WordPress make the password strength parameters editable, I imagine many people will want to do it. You can add the following code to your theme’s functions.php file to completely remove the password strength check:


/**
 * Remove password strength check.
 */
function iconic_remove_password_strength() {
    wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );

Decrease the Password Strength

It is actually possible to just decrease the strength required for your customer’s passwords. This is a much better option than disabling it completely, in most scenarios anyway.

The default strength is 3, and can range from 0 (non-existent) to 5 (ridiculously strong). You can change this by adding the following filter in your functions.php file:


/**
 * Change min password strength.
 */
function iconic_min_password_strength( $strength ) {
    return 2;
}
 
add_filter( 'woocommerce_min_password_strength', 'iconic_min_password_strength', 10, 1 );

Pretty simple right? If this has helped, leave a comment below, we’d love to hear from you.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share