Put a simple login form anywhere on your site

If you are an admin or an author on a WordPress website, you will need to login in order to manage your site or to publish a new post. If you are a subscriber who gets exclusive content on a site, you will also need to log in frequently. The same goes for other user roles and chances are that your users need to login on a daily basis.

In order to that, your user will have to navigate away from your site so that they can log in. Also, you can show a login form in a “Metawidget which comes installed on every WordPress website; but what if you wanted to add a simple login form on a specific part of your site?

Don’t worry; WordPress’ developers took care of that and they prepared a login function. You can pass some parameters into the function or use it in its simplest form. No matter how you use this function, the result will be a very simple form which will allow registered users to log in.

Modify the login form and put it anywhere on your site:

  1. Open a file where you want to show your login form (header.php, footer.php, single.php or any other)
  2. Copy and paste the following:
  3. <?php $args = array(
    'echo'           => true,
    'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
    'form_id'        => 'loginform',
    'label_username' => __( 'Username' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'id_username'    => 'user_login',
    'id_password'    => 'user_pass',
    'id_remember'    => 'rememberme',
    'id_submit'      => 'wp-submit',
    'remember'       => true,
    'value_username' => NULL,
    'value_remember' => false
    ); ?>
    <?php wp_login_form( $args ); ?>
    
  4. Save changes

As you can see from the code, you can easily change labels, IDs and several other values. To learn more about different parameters you can use, please visit WordPress Codex pages dedicated to the login function (https://codex.wordpress.org/Function_Reference/wp_login_form).

Style the login form:

Now that you have those extra parameters passed to the login form, you can easily style it through CSS. All you have to do is use the ID and add some styling to it.

  1. Open styles.css
  2. Copy and paste the code:
  3. #user_login {
    color: green;
    }
    
  4. Style the rest of the form
  5. Save changes

If you want to use the function in its most basic form, instead of passing arguments into a variable, simply use this code in step #2:

<?php wp_login_form( $args ); ?>

That’s all there is. You can now have your login form practically anywhere on your WordPress powered website. Since the form is quite basic, you might want to check out some of the plugins which can give you much more options in setting up your login form.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *