I often come across people and clients who would like to build their custom login, registration, and lost password form in WordPress instead of using the default wp-login.php page. It's probably because it's too wordpress-y.
\nIn this tutorial, I will demonstrate how to build a custom login form using the default functionality that wordpress gives us.
\n\nThis is what WordPress gives us out of the box.
\nI am going to show you all of this tutorial using the page-theme method because it is probably the easiest to implement for beginners. This will also give you an intro into page themes, if your not familiar with it. To start our theme, you will need to do the following: To initialize this page template, make sure to activate the theme you've selected in \"Appearance/Themes\" in your admin dashboard and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template under \"Page Attributes\". Change your template to \"Login\" or to the name that you specified in \"Template Name:\" and that will attach that page theme to this page/post. Now we're ready to start editing this page-login.php template file. So first open this file in your favorite editor and Let's get a login page started. To quickly show you how to get this login on the page Let's paste the following code between the div with id of content. Look at what that small piece of code do Now we need to set some arguments that we can provide to this form to customize it. Let's take a look at the documentation for wploginform() In that document, it explains all the uses and arguments of wploginform(). Let's use those arguments section and see what happens. Paste the $args section shown in the wordpress doc right above our login form. It will look the same as the one we did earlier but, by customizing the arguments above, you can customize elements of the login form. To handle the Login Form response we need to grab the $_POST parameters and login the user. You can create this as complex as you like, but I will demonstrate a simpler but effective method. For this action, we'll be using the aftersetuptheme and wp_authenticate. I have added the following two functions within the functions.php file. The first function optionalemailaddress_login searches for a users email address based on their username, with this functionality you can log in using your email address or the username. The second function, login_user, handles the actual functionality of the login by receiving the $POST parameters and passing them into the wpsignon method. In this example I have used the default WordPress login form that you could customize and style to your desire. In the next blog, I will be demonstrating how to build a login form that is fully customized. We won’t be using the provided wordpress functions!\n
\n
\n<?php\n/*\nTemplate Name: Login\n*/\n \nget_header(); ?>\n \n<div id="primary" class="content-area">\n<div id="content" class="site-content" role="main">\n \n</div><!-- #content -->\n</div><!-- #primary -->\n \n<?php get_sidebar(); ?>\n<?php get_footer(); ?>
\n<div id="primary" class="content-area">\n<div id="content" class="site-content" role="main">\n<?php wp_login_form(); ?>\n</div><!-- #content -->\n</div><!-- #primary -->
\n<?php $args = array(\n'echo' => true,\n'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],\n'form_id' => 'loginform',\n'label_username' => __( 'Username' ),\n'label_password' => __( 'Password' ),\n'label_remember' => __( 'Remember Me' ),\n'label_log_in' => __( 'Log In' ),\n'id_username' => 'user_login',\n'id_password' => 'user_pass',\n'id_remember' => 'rememberme',\n'id_submit' => 'wp-submit',\n'remember' => true,\n'value_username' => '',\n'value_remember' => false\n); ?>\n<?php wp_login_form( $args ); ?>Handling the login form response (Custom)
\n
\n/**\n* optional_email_address_login allows the user\n* to log in with a email address as well as a username\n* @param string &$username username or email\n* @param string &$password password\n*/\nfunction optional_email_address_login( &$username, &$password ) {\n$user = get_user_by( 'email', $username );\nif ( ! empty( $user->user_login ) )\n{\n$username = $user->user_login;\n}\n}\n// Allows the use of email logins\nadd_action( 'wp_authenticate', 'optional_email_address_login', 1, 2 );\n \n/**\n* login_user handles the $_POST array and logs in users\n*/\nfunction login_user() {\nif ( ! is_user_logged_in() ) {\n$creds = array();\n$creds['user_login'] = isset( $_POST['log'] ) ? $_POST['log'] : '';\n$creds['user_password'] = isset( $_POST['pwd'] ) ? $_POST['pwd'] : '';\n$creds['remember'] = isset( $_POST['rememberme'] ) ? true : false;\n$user = wp_signon( $creds, false );\n \nif ( is_wp_error( $user ) ) {\nerror_log( $user->get_error_message() );\n}\n}\n}\n// Run login_user before headers and cookies are sent\nadd_action( 'after_setup_theme', 'login_user' );