[How to] Get WordPress Login Form in Front End

Sometime admin decides the posts under certain category eg. “Subscriber Posts” must be  visible only for the subscribed users. For this he have to provide a login form at the front end, so that user can register them self and after login they can see those posts.
There are 2 ways to provide a login form.

1. Create a custom menu from admin and give a URL of wp-login eg. http://www.example.com/wp-login.php

User can log in to this url, however this will not be a good practice as user may distract his mind from your site.

2. Provide a login form on front-end so user will be on your site only. To create the custom login form follow the steps given below.

Step 1:

Create a simple page template.

<?php
/*
Template Name: Login Form
*/
?>
<?php get_header();?>
<?php get_sidebar(); ?>

    <div id="content" >
<!-- If user is not logged in the show the login form  -->
    <?php if(!is_user_logged_in ()) { ?>
        <div class="login-box" >
<!-- Login form start  -->
            <form method="post" action="<?php echo site_url(); ?>/wp-login.php" id="loginform_custom" name="loginform_custom">
                <table>
                    <tr>
                        <td>Username</td>
                        <td><input type="text" class="u-name" name="log" /></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" class="u-pass" name="pwd" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit"  name="submit" value="Login" /><a href="<?php echo site_url();?>/wp-login.php?action=register">Register</a><a href="<?php echo wp_lostpassword_url(); ?>" title="Lost Password">Lost your password?</a></td>
                    </tr>
                </table>     
            </form>
<!-- End  of login form -->
            </div>
            <?php } else { ?>
        <?php
                 wp_get_current_user();
// Retrive the current user object. to check the user logged in or not.
                if ( 0 != $current_user->ID ) {
                        $subscriber_posts_cat = get_cat_ID('Subscriber Posts');
                        query_posts('cat=' . $subscriber_posts_cat.'&showposts=-1');
// Get all posts under Subscriber Posts category.
                        while ( have_posts() ) : the_post(); ?>
                        <div <?php post_class('post-box') ?>>
                                     <div class="post-date">
                <ul>
                <li><?php the_time('j'); ?></li>
                <li class="month"><?php the_time('M'); ?></li>
                </ul>
                </div>
                        <div class="post-title">
                            <?php
                            if (is_singular ()) {
                                ?><h1><?php the_title(); ?></h1><?php
                            }
                            else {
                                ?><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><?php
                            }
                           ?>
                            <div class="clear"></div>
                        </div><!-- .post-title -->
                            <div class="post-content clearp">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                        <?php endwhile; } } ?>
    </div>

<?php get_footer(); ?>

In the above template first we have checked weather user is logged in or not. If user is logged in then he is able to see the posts under category “Subscriber Posts”. Otherwise user can see login form with the Register and Lost Password links.
In the above login form “action” of form and the “name” of input fields of Username and Password is very important.

Step 2:

To handle the redirection of admin login and subscriber login we have to write the redirection function in themes function.php file. That is if user role is admin then show him the dashboard and if the user role is subscriber then he will directly redirected to “Subscriber Posts” category page.

 

/* check the role of current loged in user for redirection */
add_action('admin_init','rt_checkRole');
function rt_checkRole() {

    global $wp_roles;
    $currentrole ='';
    foreach ( $wp_roles->role_names as $role => $name ) {
        if ( current_user_can( $role ) ){
                    $currentrole = $role;
                }
        }
        if($currentrole == 'subscriber')
            wp_redirect (site_url().'/front-end-login/');
}

/* redirect the user  depending on role */
add_action('template_redirect', 'rt_redirectuser');
function rt_redirectuser() {
    if (!is_user_logged_in() && (is_category(get_cat_ID('Subscriber Posts')) || rt_is_subscriber_post_cat()))  {  //user check if
           wp_redirect(site_url().'/front-end-login/');
           exit ();
    }
}
/* check the current category is  Subscriber Posts */
function rt_is_subscriber_post_cat(){
    if(is_single()){
        global $post;
        $cats = wp_get_post_categories($post->ID);
        $cat_id = get_cat_ID('Subscriber Posts');
        foreach($cats as $cat)
        {
            if($cat==$cat_id)
                return TRUE;
        }
            return FALSE;
    }
}
/* redirect the user to front end login form when he is loged out */
add_action('wp_logout', 'rt_logoutRedirect');
function rt_logoutRedirect()
{
        wp_redirect(site_url().'/front-end-login/');
        exit();
}

Step 3:

Once user logged in to your site, “Log Out” menu will automaticlly get added in your menubar by adding the below function in your themes header.php file. Now add a filter on wp_nav_menu if the user is logged in.

/* filter function */
function rt_menus($param)
 { return $param.'<li><a href="'.wp_logout_url().'" title="Logout">Logout</a></li>'; }
/* menu code on header.php */
if( function_exists('wp_nav_menu') && has_nav_menu('primary') )
 { add_filter('wp_nav_menu_items','rt_menus');
wp_nav_menu(array('container' => '', 'menu_id' => 'rt-nav-menu', 'theme_location' => 'primary', 'depth' => '3'));
remove_filter('wp_nav_menu_items', 'rt_menus'); }

Add and tweak CSS as per your sites requirement, as the form will look in the screenshot image above. 🙂