How to Customize and Create a new Login Page for WordPress Powered WebSite
You must have seen WordPress Powered Websites with customized login page. Sometime you have to create new login page for your users and for a client required new and customized wp-admin page for login to the admin panel. There are different ways to customizes WordPress Login page template. If you use WordPress Plugin, there are some limitations, for example activate plugin will not match your installed theme and provide less customization. So there is a need to create your own Custom wordpress login page template as part of you theme.
Creating a New Custom-login Page
First of all create a new php template with “custom-login.php” name and upload it in WordPress Theme folder ( wparena.com/wp-content/themes/your-theme). Add following code before uploading or after uploading you can edit your page and add the codes.
I am not sharing my piece of code because my client have some restriction. Although Oliver Dale have explained how-to-create-a-custom-login-page-for-your-wordpress-theme, but I am sharing Kannan‘s code from his post “Custom WordPress login without using a plugin“. There are few reason to mention Kannan’s work, first of all he use jQuery to show login error messages without page-refresh and redirect to the homepage when he is not login.
Full Code Preview of Custom login Template
< ?php
/*
Template Name: Custom Login
*/
global $user_ID;
if (!$user_ID) {
if($_POST){
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);
if($remember) $remember = “true”;
else $remember = “false”;
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, true );
if ( is_wp_error($user_verify) )
{
echo “<span class=”error”>Invalid username or password. Please try again!</span>”;
exit();
} else
{
echo “<script type=”text/javascript”>window.location=’”. get_bloginfo(‘url’) .”‘</script>”;
exit();
}
} else {
get_header();
?>
<div id=”container”>
<div id=”content”>
<!–?php the_title(); ?–>
<div id=”result”></div>
<!– To hold validation results –>
<form id=”wp_login_form” action=”" method=”post”>
<label>Username</label>
<input type=”text” name=”username” class=”text” value=”">
<label>Password</label>
<input type=”password” name=”password” class=”text” value=”">
<label>
<input name=”rememberme” type=”checkbox” value=”forever”>Remember me</label>
<input type=”submit” id=”submitbtn” name=”submit” value=”Login”>
</form>
<script type=”text/javascript”>
$(“#submitbtn”).click(function() {
$(‘#result’).html(‘<img src=”<?php bloginfo(‘template_url’); ?>/images/loader.gif” class=”loader” />’).fadeIn();
var input_data = $(‘#wp_login_form’).serialize();
$.ajax({
type: “POST”,
url: “<?php echo “http://” . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>”,
data: input_data,
success: function(msg){
$(‘.loader’).remove();
$(‘
<div>’).html(msg).appendTo(‘div#result’).hide().fadeIn(‘slow’);
}
});
return false;
});
</script>
</div>
</div>
<!–?php
get_footer();
}
}
else {
echo “<script type=’text/javascript’–>window.location=’”. get_bloginfo(‘url’) .”‘”;
}
?>
Because we are using jQuery, so never foregt to add jQuery library in your header.php file as follow
jQuery library in header.php file
<script src=”http://code.jquery.com/jquery-1.4.4.js”>< / script>
</pre>
<h2>Step7: Adding jQuery’s ajax function</h2>
<pre name=”code” class=”javascript”>
<script type=”text/javascript”>
$(“#submitbtn”).click(function() {
$(‘#result’).html(‘<img src=”<?php bloginfo(‘template_url’); ?>/images/loader.gif” class=”loader” />’).fadeIn();
var input_data = $(‘#wp_login_form’).serialize();
$.ajax({
type: “POST”,
url: “< ?php echo “http://” . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>”,
data: input_data,
success: function(msg){
$(‘.loader’).remove();
$(‘
<div>’).html(msg).appendTo(‘div#result’).hide().fadeIn(‘slow’);
}
});
return false;
});
</script>
Add New Blank Page
After uploding your new page template, go to “New Page” under pages from the WordPress Deshboard. Name the page as your own choice and select the template type from Template list “Custom Login” and Publish it. Now you can add this page wherever you want for further instruction read this post WordPress Shortcode with loop, meta, category, pagination, Gallery and Plugins
Customize the WordPress Login Screen Logo
You can replace the WordPress logo from WordPress login page by replacing “logo-login.png” image file. Login to hosting via ftp and brows /wp-admin/images/ and replace with your own logo but the name must be same. You have to change the image link as open wp-login.php file and change following line according to your own url.
<div id=”login”><h1><a href=”<?php echo esc_url( apply_filters(‘login_headerurl’, ‘http://wparena.om/’) ); ?>” title=”<?php echo esc_attr( apply_filters(‘login_headertitle’, __( ‘WordPress Arena’ ) ) ); ?>”><?php bloginfo(‘name’); ?></a>
You can customized the WordPress login screen by using the following WordPress Plugins.
White Label Branding for WordPress Multisite
Are you running a WordPress Multisite Network? Are you a WordPress developer or a Web Designer who uses WordPress to develop websites for your clients? Have you ever wished that it was easier to customize the menu’s and logo’s on each sub-site in your WordPress Multisite Network? Would you like to give each sub-site the ability to do their own branding? Look no further! This plugin let you control the branding of the main site and all sub-sites in a network of websites powered by WordPress Multisite.
Pathway – Custom WordPress Login Page
Are you bored default wordpress login page ? Pathway let you customize your wordpress login page, You can customize unlimited design from the admin options, and bring to your clients a new login page design.
Wp Nice Screen Login – Customize Admin Login Page
WP Nice Screen Login is the final solution to customize the “Wordpress Admin Login Page”. You can choose from 5 default themes to redesign the Login Page, and bring to your clients a new professional page to login
Login Logo
This plugin allows you to customize the logo on the WordPress login screen. There is zero configuration. You just drop the logo file into your WordPress content directory, namedlogin-logo.png and this plugin takes over.
Custom Login
Activate this plugin and customize your WordPress login screen. Use the built-in and easy to use settings page to do the work for you. Theres no need to understand CSS at all! Now featureing a HTML & CSS box for advanced users to up the customization!
- Works great for client site installs.
- Comes with a Photoshop template included in the library files (default theme).
- Read more about the Custom Login Plugin & most recent blog post.
WordPress Admin Colors & Branding
Customise the WordPress admin interface with you own color scheme and logos. Perfect for delivering a white label WordPress for clients and customers. This is the only plugin available that allows dynamic color choice for the admin interface, designed specifically for WordPress 3.2 and WordPress 3.3.
Ninety Ajax Login/Register for WordPress
Our Sidebar Login/Register plugin for WordPress does exactly what it says on the tin; Logins and Registrations with a touch of AJAX magic. Simple! It also has a nice ‘logged in’ view, and a lost password form for those forgetful folk.
Single Sign-On For Magento And WordPress
Scenario where you’d want to use this extension:
You are creating a website, or own a website, that is built using a mixture of Magento and WordPress. It may be that WordPress is used to manage pages and a blog, while Magento is used purely for it’s e-commerce functionality. Or perhaps all your pages and e-commerce functionality are managed through Magento, and WordPress is simply there as a blog platform.
Other Resources:
How to Change WordPress Login Page
Create a custom login page in WordPress
How to Create a Custom Page in WordPress
WordPress Tips and Tricks – Custom Login Page
How to Create a Custom Login Experience for WordPress Subscribers
How to Create and use Custom Page Template in WordPress to Create a Sales Page
Nur
