Add placeholder text to MemberPress login form fields

Introduction 

Overview

MemberPress is one of the most popular WordPress membership plugins on the market right now. And like many membership plugins, it uses a shortcode to generate the login form for members.

While shortcodes often let you define various parameters (e.g. post login redirect URL, colors, etc) there are often aspects of the shortcode output that you cannot control.

In today's example, I'm going to show you how to add placeholder text to both the username and password input text fields on your MemberPress login form.

This is something you can't control via shortcode paramaters so I'm going to demonstrate a slick little workaround instead. 🙂

Video tutorial

MemberPress login form shortcode

The shortcode for the login form is this one: . And the generated result will look like this:

When we examine the code generated by the shortcode using the “inspect” function of Chrome or Safari, we will see that both the username and password fields have an ID attributed to them: 

Looking at the screenshot above, you can see that the ID for the Username input text field is “user_login” and the ID for the Password field is “user_pass”. It is important to know these IDs because to add the placeholder text we will use a bit of jQuery code.

The jQuery code

IMPORTANT: I highly recommend that you first create a child theme, or use the My Custom Functions WordPress plugin whenever you add custom code to your theme files. Otherwise, any time you update your theme your changes will get wiped out.

***

First of all, we will need to add the below jQuery code right before the </header> closing tag in your header.php file from your theme folder:

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#user_login').attr(‘placeholder', ‘Username or e-mail address');
jQuery(‘#user_pass').attr(‘placeholder', ‘Password');
});
</script>

You can edit the file by connecting to SFTP or FTP or by going to Appearance > Theme Editor in WordPress Dashboard.

The CSS code

After the jQuery code is added, you will need to add the below CSS code to your styles.css file which can also be found in your theme folder:

form label, form label {

    display: none !important;

}

This CSS code can be also added by going to Appearance > Customise > Additional CSS or, if you are using Divi theme (our preferred WordPress theme), by going to Divi > Theme Options > General > Custom CSS in your WordPress Dashboard.

Why do we need the CSS code…?

Because that code hides the labels above the input text fields. We won't need those labels since the placeholder text will appear in the Username and Password fields via the jQuery code.

That is all! You have a more elegant MemberPress login form now!

Do you use MemberPress?

What do you like best about it…?

Leave your answer in the comments below!