Are You Stuck with the standard WordPress Design?
By Stephanie Wetzel
I’ve always loved the ease of use and flexibility that WordPress offers for building websites. It’s why I’ve been using it since the early days of version 1.1.
But for all its glory, there is one limitation that has always plagued me—the login page.
WordPress will even tell you that this is the most underdeveloped portion of their code. But does that mean you’re stuck with this?
Creating a Custom WordPress Login Page
Nope! You’ve got a couple options when it comes to launching a customized login page, the easiest of which would be use of a plugin. A couple that I ran across, which seem to offer some flexibility without a lot of coding knowledge are Custom Admin Branding and BM Admin.
A simple plug-in search for ‘custom login page’ will turn up about 400+ other options for you to try out. My issue with utilizing a plugin was that it didn’t give me enough control over the entire login experience.
I’m building a portal for participants in an upcoming program I’m launching next month. I not only wanted to brand my login page, I wanted to control where they landed once logged in. And I wanted it to be fully integrated into the site experience, which meant making it work within my theme.
I got a bit closer to the answer I was seeking when I stumbled across WPLift.com’s great tutorial on coding the login page as a new template within your theme.
His step-by-step tutorial is quite thorough for creating, coding, and testing a custom login placed right within your theme design.
It was a great start, but not exactly what I was looking for. I mention it here because it is a quick and easy solution for a custom login page. And I owe thanks to WPLift because it did inspire my final implementation for a complete customized WordPress login.
Custom Login Start to Finish
I ended up combining a plugin and a little coding on a page template to create my own custom login solution. Here I’ll walk you through the steps of how I did it, and provide you the code for implementing something similar on your own site.
My goal was to create a custom login screen, control the redirect once logged in (to keep users off the WP-Admin screen), and control the redirect once they logged out (to override the redirect back to the default login screen).
There are a few advantages to this implementation. First, I get the custom branded look I want start to finish. Secondly, I don’t risk losing what I built in future WordPress updates because it is all controlled within my theme. So everything in the wp-login has been left completely intact.
Lastly, my login links are all customized to my site domain, which enhances my professional image with customers. Instead of www.yoursite.com/wp-admin, my URL is now www.yoursite.com/login. It only serves to heighten the user experience that I am creating here, adding perceived value to my brand.
Let’s dive into exactly how I did it.
#1) Start With Copying Your Page.php Template
Create a copy of your page.php (or other theme page template such as full width) and open it using a basic text editing program. Save it as page-login.php. If your file saves as a .txt, simply rename it and change the extension to .php before uploading.
For purposes of this tutorial, I’ll be using the default Twenty Eleven WordPress theme. Everything above the opening <div> tags is telling information about your page.
#2) Identify Your Template
In order to identify this new page template, we need to add in the template name. We’ll change the first line to Template Name: Login Page. Then, we’ll change the description that falls below it. If your theme file doesn’t have a description as part of its page.php file, you can skip this second part of the step.
<?php
/**
* Template Name: Login Page
*
* This is the template for a custom login page.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?><div id="primary">
<div id="content" role="main">
#3) Add the Login Code
Next, we are going to remove all the code between the opening and closing <div> tags.
And then paste in our login code.
<div id="login"><img src="[FULL URL TO YOUR IMAGE FILE]"><br><br>
<h2><?php the_title(); ?></h2>
<form name="loginform" id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="admin" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="<?php echo get_option('home'); ?>" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_pass');
d.value = '';
d.focus();
d.select();
} catch(e){}
}, 200);
}
wp_attempt_focus();
if(typeof wpOnload=='function')wpOnload();
</script>
</div>#4) Customize the Appearance
For my own purposes, I’ve included an image above the login. You can remove it if you don’t want to use a graphical element above the username and password boxes. Simply delete this line from the code below:
<img src=”[FULL URL TO YOUR IMAGE FILE]“><br><br>
The next line pulls in the title of your page. You change the style to match one of your other theme styles by changing the number after the h. Most themes are built with at least a few styles in place. To test yours, type some text into a page or post in your WordPress Admin. Save the draft and select preview. Change the tag to the style you prefer (such as h3 or h4).
<h2><?php the_title(); ?></h2>
You can also add content on this page by adding in the code below above or below the login code. Otherwise, any text you enter in the WP-Admin panel will not appear on this page.
<?php the_content(); ?>
#5) Set the Landing Page Redirect
I created the code to land back on your site’s home page by default. In order to set a custom landing page for your user after they login, you need to update the redirect link with the full URL. Copy your desired link, and then paste it within the code where indicated below.
<input type=”hidden” name=”redirect_to” value=”[THIS IS WHERE YOU ENTER YOUR FULL URL]” />
#6) Remove the Sidebar
Building the login code in this manner tends to mess with the placement of the sidebar on your page. In order to avoid this, simply remove the following line of code from your page file. It’s typically found below the two closing </div> tags.
<?php get_sidebar(); ?>
#7) Save and Upload Your New File
Once you’ve made your desired changes, save your template file and upload it to your theme’s folder in . . . /wp-content/themes/[theme name]. Then log in to your WP-Admin to finish the setup of your new custom WordPress login page. And no worries, the hard part is over now!
#8) Create Your Page
Add a new page and enter your title. Then select the Login Page from the ‘Template’ drop-down under ‘Page Attributes’. If you gave your template an alternate name during the setup process, select the appropriate template from the drop-down. Save your draft and preview the page to make sure everything looks OK, and then publish your new login page.
#9) Test the Login
Be sure to test that your new login page is working properly by logging out and back into your WordPress account. You should be redirected to your desired landing page (or the home page if you did not change the code) upon logging in.
#10) Set the Logout Landing page
By default, WordPress is going to send users who logout back to the standard login page. To ensure that users land on the new login page, I am utilizing the Peter’s Login Redirect plugin to control where all users land when they log out of the site.
Simply install the plugin, and then set the Logout URL under ‘All Other Users’. Update and your done!
#11) Take It One Step Further
There are a few ways to take this customized implementation further, but I’ll save that for another day since this post is already pretty lengthy. I’d love to hear about ways you’ve customized the user experience on your own blog to help enhance your branding and strengthen your marketing message.
Share your own ideas with me and other A-List Blog Marketing readers in the comments section below. Happy coding!
{ 2 comments… read them below or add one }
Awesome Stephanie! I have been looking for something like this for a while now. I know what is high up my list in the holidays now
Sarah Arrow recently posted..Two types of SEO a blogger should know #blogging
HAHA! Glad I could help with your holiday plans Sarah. Enjoy and let me know if you run into any issues in implementation. I would be happy to help where I can.
Best ~ Steph
Stephanie Wetzel recently posted..4 Tactics for Changing Your Eating Habits
{ 1 trackback }