There is a ready to use code for login page template. You should propably change some classes, add CSS to make it look nice but the essential code should be good.
Create file login.php in your theme root folder and paste the content below.

* Template Name: Login Page



<div id="wpi-content-part">

    <div id="wpi-content-part-in" class="wpi-container">
        <div class="wpi-row">

            <div id="wpi-content">

                <!-- Begin of main content area -->
                <main id="wpi-maincontent">

                    <article <?php post_class(); ?>>

                        <?php if ( has_post_thumbnail() ) {
                            the_post_thumbnail( 'full' );
                        } ?>

                        <header class="page-header">
                                <h2><?php the_title(); ?></h2>

                        <?php if ( is_user_logged_in() ) : // logged-in ?>
                            <div id="wpi-login-register-forgot">
                                <p class="wpi-info"><?php esc_html_e( 'You are already logged in.', 'wpi-lang' ); ?></p>
                                <a class="button" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php esc_html_e( 'Logout', 'wpi-lang' ); ?></a>
                        <?php else : // not logged-in ?>
                            <div id="wpi-login-register-forgot" class="wpi-tabs">
                                <div class="wpi-tabs-content">
                                    <div id="wpi-tab-login" class="wpi-tab active" role="tabpanel">
                                        <?php // login form
                                        $args = array(
                                            'redirect'    => home_url(),
                                            'remember'    => true,
                                            'id_username' => 'user',
                                            'id_password' => 'pass',
                                        wp_login_form( $args );

                                    <div id="wpi-tab-forgot-password" class="wpi-tab" role="tabpanel">
                                        <form action="<?php echo site_url( 'wp-login.php?action=lostpassword', 'login_post' ) ?>" id="forgot-form" method="post">
                                            <p class="wpi-info"><?php esc_html_e( 'Forgot your password? Please enter your username or email address for your account. A verification e-mail will be sent to you and you will be able to reset your password.', 'wpi-lang' ); ?></p>
                                            <p class="forgot-email">
                                                <label class="sr-only" for="user_login"><?php esc_html_e( 'Username or Email', 'wpi-lang' ) ?></label>
                                                <input size="30" type="text" name="user_login" value="" id="user_login" placeholder="<?php esc_html_e( 'Username or Email', 'wpi-lang' ); ?>"/>
                                            <p class="forgot-submit">
                                                <input type="submit" class="button" name="user-submit" value="<?php esc_html_e( 'Submit', 'wpi-lang' ); ?>"/>
                                                <input type="hidden" name="redirect_to" value="<?php get_permalink(); ?>"/>
                                                <input type="hidden" name="user-cookie" value="1"/>



                        $content = apply_filters( 'the_content', $post->post_content );
                        echo $content;



                <!-- End of main content area -->


            <!-- Sidebars -->
            <?php get_sidebar(); ?>







Now go to Pages -> Add New and select Login Page on the right sidebar and publish page.

That’s it. You can add this page to your menu and just use it from frontend.

Share this post

Leave a Reply

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