Developing a custom WordPress login dashboard

Creating a custom login for your WordPress website for most, the default WordPress login page is a bit standard and might not reflect the content of their website.

It has the WordPress logo on it and the WordPress color scheme but this, font, color schemes, and logo are not our own.

Furthermore, the default login page is something studied intensively by people who make malicious scripts and/or bots that crawl the internet looking for vulnerabilities.

It would be better if we had a login page that adequately reflected the layout of our own site. I’ll tell you how to go about doing this.

First off, it’s important to note that if you don’t want to change several things around, you can simply create a folder in the root of your theme folder called “login” where you can put a style.css file and edit the default WordPress login screen.

This will allow you to manipulate the style of the page but not the HTML, the way I’m going to show you allows both.

Here’s a brief overview of the steps we’ll take to achieve this:

1. Download content-page.php and page.php from the TwentyFifteen theme.
2. Rename page.php and content-page.php to page-login.php and content-login.php respectively.
3. Paste a single line into page-login.php to tell it to look for content-login.php instead of content.page.php.
4. Add a single line to content-login.php to tell it where to find our login page.
5. Create (publish) a page in WordPress called “Login” with url “www.yoursite.com/login”. (note that as long as the last path is /login it will work)
6. Finally, add a function in the functions.php to tie it all together.

To start off, we’ll need a few files from the TwentyFifteen theme, you can download it here

Firstly, you’ll want to create copies of page.php and content-page.php from the TwentyFifteen theme. Rename them to “page-login.php” and “content-login.php“. Place it in the root directory of your themes, for instance: /wp-content/themes/themename/page-login.php/ Afterwards, go into page-login.php and change this

get_template_part('content', 'page');

to this

get_template_part( 'content', 'login');

Now you’ll want to edit content-login.php. Add the following PHP:

<?php the_content(); ?>

<?php wp_login_form( array('redirect' => home_url().'/wp-admin') ); ?> // This is the line you want to add

<?php wp_link_pages( array( ...

The line you want to add is the second from the top in this snippet. I included the other two lines so you know where to paste it. Now what you’ll want to do is create a page within WordPress, make the url match http://website.com/login.

Finally, you’ll want to add this to your functions.php at the bottom to tell the server to redirect requests for /wp-admin or /login to your new template.

Tying it all together

/* Main redirection of the default login page */

function redirect_login_page() {

    $login_page  = home_url('/login/');

    $page_viewed = basename($_SERVER['REQUEST_URI']);



    if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {

        wp_redirect($login_page);

        exit;

    }

}

add_action('init','redirect_login_page');



/* Where to go if a login failed */

function custom_login_failed() {

    $login_page  = home_url('/login/');

    wp_redirect($login_page . '?login=failed');

    exit;

}

add_action('wp_login_failed', 'custom_login_failed');



/* Where to go if any of the fields were empty */

function verify_user_pass($user, $username, $password) {

    $login_page  = home_url('/login/');

    if($username == "" || $password == "") {

        wp_redirect($login_page . "?login=empty");

        exit;

    }

}

add_filter('authenticate', 'verify_user_pass', 1, 3);



/* What to do on logout */

function logout_redirect() {

    $login_page  = home_url('/login/');

    wp_redirect($login_page . "?login=false");

    exit;

}

add_action('wp_logout','logout_redirect');

Furthermore, if your site is a blog, you can add a post query to page-login.php to get the url of the most recent post’s thumbnail. Here’s what it should look like after you’re done:

<?php

/**

 * The template for displaying pages

 *

 * This is the template that displays all pages by default.

 * Please note that this is the WordPress construct of pages and that

 * other "pages" on your WordPress site will use a different template.

 *

 * @package WordPress

 * @subpackage DELT

 * @since DELT 1.0

 */



get_header('login');



        $related = get_posts( array( 'category__not_in' => array(316, 314), 'posts_per_page' => 1, 'post__not_in' => $do_not_duplicate  ) );

        if( $related ) foreach( $related as $post ) {

            setup_postdata($post);

            $do_not_duplicate[] = $post->ID;

?>

    <div class="background-image" style='background-image: url("<?php the_post_thumbnail_url();?>")'>

    </div>

    <div id="primary" class="content-area login" >

        <main id="main" class="site-main" role="main">



        <?php

    }

        // Start the loop.

        while ( have_posts() ) : the_post();



            // Include the page content template.

            get_template_part( 'content', 'login' );



            // If comments are open or we have at least one comment, load up the comment template.

            if ( comments_open() || get_comments_number() ) :

                comments_template();

            endif;



        // End the loop.

        endwhile;

        ?>



        </main><!-- .site-main -->

    </div><!-- .content-area -->



<?php

// get_footer(); 

?>

At this point, you’ll be able to customize page-login.php to your liking and even better, it will use the header/footer from your actual site along with their respective stylings. Here’s an example of our partner site “Deltstl.com” login page using just the custom layout without alternating background.

You can download the source files for this demo here.

You can check out some of my other posts on similar topics such as AJAX and how to use it to create seamless page transitions.