In older versions of WordPress, creating a login form on a page was a complex process for the average site owner. One had to rely on page templates and know how to properly handle forms with PHP. It wasn’t a lot of fun.

Fortunately, WordPress eventually introduced the wp_login_form() function, which allows you to easily display a login form anywhere on your site. Couple that with a custom shortcode and you have a recipe for some awesomeness.

This tutorial will walk you through the steps required for creating a login form shortcode to use in any shortcode-ready area (e.g., your post/page editor).

Creating a login form shortcode

The first step is opening either your theme’s functions.php file or, preferrably, a custom plugin file. You’ll want to use the following PHP code to create a function that registers shortcodes.

add_action( 'init', 'my_add_shortcodes' );

function my_add_shortcodes() {

	add_shortcode( 'my-login-form', 'my_login_form_shortcode' );
}

What the above code does is add your shortcodes registration function to the init hook. It then calls the WordPress function add_shortcode(), which creates a new shortcode called [my-login-form].

Before the [my-login-form] shortcode will work, you need to create the callback function that outputs the login form. The following code does this.

function my_login_form_shortcode() {

	if ( is_user_logged_in() )
		return '';

	return wp_login_form( array( 'echo' => false ) );
}

The above code checks if the current user is logged into the site. If not, it calls wp_login_form(), which returns the WordPress login form for display on the page.

As far as most shortcodes go, this one is actually fairly simple. That’s all you have to do to create a login form shortcode.

Using the login form shortcode

You would use the shortcode just like you’d use any other shortcode. You can put it within your post or page editor. Or, if you have any other shortcode-aware areas, feel free to add it to one of those.

Add the following code to your page editor and save.

[my-login-form]

Advanced tips and tricks

The following part of the tutorial is only for people who want to take their login form shortcode to the next level. None of these tips are required.

Displaying a message for logged in users

The shortcode function from earlier in this tutorial doesn’t display anything for users who are logged into the site. To display a message such as “You are already logged in!”, you only need to tweak a single line. Your shortcode function code would look like:

function my_login_form_shortcode() {

	if ( is_user_logged_in() )
		return '<p>You are already logged in!</p>';

	return wp_login_form( array( 'echo' => false ) );
}

Creating shortcode parameters

Shortcode parameters are outside the scope of this tutorial, so I won’t cover them in complete detail. This subject is covered in the shortcode API documentation. However, I will show you an example of adding in customizable “Username” and “Password” labels.

Your shortcode function would look like the following code.

function my_login_form_shortcode( $attr ) {

	if ( is_user_logged_in() )
		return '';

	/* Set up some defaults. */
	$defaults = array(
		'label_username' => 'Username',
		'label_password' => 'Password'
	);

	/* Merge the user input arguments with the defaults. */
	$attr = shortcode_atts( $defaults, $attr );

	/* Set 'echo' to 'false' because we want it to always return instead of print for shortcodes. */
	$attr['echo'] = false;

	return wp_login_form( $attr );
}

Suppose you wanted to change the “Username” text to read “Enter Username” and the “Password” text to read “Enter Password.” You’d use the following in your post editor.

[my-login-form label_username="Enter Username" label_password="Enter Password"]

CSS classes

In the screenshot of the shortcode in action earlier in the tutorial, you’ll notice that it doesn’t look too fancy. WordPress generates a few CSS classes that you can use to customize the design of your login form.

/* Username wrapper paragraph. */
.login-username {}

/* Username label. */
.login-username label {}

/* Username input. */
.login-username .input {}

/* Password wrapper paragraph. */
.login-password {}

/* Password label. */
.login-password label {}

/* Password input. */
.login-password .input {}

/* Remember me wrapper paragraph. */
.login-remember {}

/* Remember me label. */
.login-remember label {}

/* Remember me checkbox. */
.login-remember input[type="checkbox"] {}

/* Submit button wrapper paragraph. */
.login-submit {}

/* Submit button. */
.login-submit .button-primary {}

You can also define custom IDs for use in your CSS. These can be defined as arguments for the wp_login_form() function.