Add a custom login to your WordPress theme

One area that is integral to a WordPress powered site but is currently a bit difficult to stylize is the login area. Moreover, it’s not something move around to place on sidebars or the site header. In this tutorial we will see how to create a shortcode that you can use everywhere, from your Text widget to post/pages content or the template files.

Overview

We basically don’t need any special CSS or JS, since we will write a simple HTML that will inherit the overall styles of your theme. We will create a plugin that will add a shortcode [[login]] that you’ll type in your posts, pages or the built-in Text widget.

Writing the plugin

So without further ado, here’s the code. You can paste this code snippet in your functions.php file in your WordPress theme.

<?php
/**
* Plugin Name: Inline Login
* Plugin URI: https://atomic-temporary-176953424.wpcomstaging.com
* Description: Creates a shortcode to display a login box.
* Author: Elio Rivero
* Author URI: https://atomic-temporary-176953424.wpcomstaging.com
* Version: 1.0.0
*/

class StartFunctionLogin {

    function __construct() {
        add_filter( 'widget_text', 'shortcode_unautop' );
        add_filter( 'widget_text', 'do_shortcode' );
        add_shortcode( 'login', array( &$this, 'shortcode' ) );
    }

    function shortcode() {
        global $user_login;
        $html = '<div class="login_box">';
        if ( ! is_user_logged_in() ) {
            $html .= '<form action="' . esc_url( wp_login_url() ) . '" method="post">';
            $html .= '<p>';
            $html .= '<input type="text" name="log" id="log" size="20" placeholder="Username" />';
            $html .= '<input type="password" name="pwd" id="pwd" size="20" placeholder="Password" />';
            $html .= '<input type="submit" name="submit" value="' . esc_attr__( 'Log In', 'startfunction' ) . '" class="button" />';
            $html .= '<p>';
            $html .= '<p>';
            $html .= '<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> ' . esc_html__('Remember me', 'startfunction') . '</label>';
            $html .= '<input type="hidden" name="redirect_to" value="' . admin_url() . '" />';
            $html .= '</p>';
            $html .= '</form> ';
            $html .= '<a href="' . esc_url( site_url( '/wp-login.php?action=lostpassword' ) ) .  '">' . esc_html__('Recover password', 'startfunction') . '</a>';
        } else {
            $html .= '<p class="isloggedin">' . esc_html__('You are already logged in.', 'startfunction') . ' ';
            $html .= '<a href="' . esc_url( wp_logout_url($_SERVER['REQUEST_URI']) ) . '">' . esc_html__( 'Log Out?', 'startfunction' ) . '</a>';
            $html .= '</p>';
        }
        $html .= '</div><!-- .login_box end -->';
        return $html;
    }
}

new StartFunctionLogin();

After pasting the code, remember to save your file.

Usage

Now create a post or a page and in the editor, type

[login]

Save your content and view it on the front end. Since you might be logged in, it will show a message “You are already logged in. Logout?” so you can log out of the system. After you’ve done so, the page will reload and you’ll see the login fields.

You can also use this shortcode in the Text widget bundled with WordPress, since we added the two filters necessary to make it work in the class constructor.

To use it in a PHP template, you need to use the do_shortcode function, like this

<?php echo do_shortcode( '[login]' ); ?>

All you need to do now is to polish the user interface and you’ll have a nice login box properly integrated in your theme design.