Perspective Basics a Draw Through Technique Spaceship Tuts Tutorial
Customizing the WordPress Admin_ The Login Screen - Tuts+ Code Article
-
Upload
cloude-hollowen -
Category
Documents
-
view
2 -
download
0
description
Transcript of Customizing the WordPress Admin_ The Login Screen - Tuts+ Code Article
-
Learning to code? Skill up faster with our practical video courses. Start your free trial today. Dismiss
Jobs BlogFree Tutorials Courses eBooks Create Account / Sign In
Code Categories Learning Guides
This post is part of a series called Customizing the WordPress Admin.
Customizing the WordPress Admin - The Dashboard
CREATIVE CODING
by Rachel McCollin 18 Sep 2013 22 Comments
1 2 11
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
1 of 11 02/10/2014 10:54
-
The WordPress login screen is well designed - it's clean and simple to interact with
and it works well on all screen sizes. But what if you're building a site for a client who
wants to display their own logo to users logging in? Or if you have a MultiSite
installation and want your users to see your branding when they log in? Luckily, you
can customise the way the login screen looks quite easily.
For this tutorial I've created a plugin to do this; the advantage of using a plugin is
that you can drop it into any WordPress sites you develop and instantly give them
some branding.
The steps I'm going to demonstrate in this tutorial are:
Adding a custom logo1.
Styling the login screen - the logo, links and buttons2.
What You Will Need to Complete This Tutorial
To complete this tutorial you will need:
A WordPress installation
Access to your site's plugins folder to add your plugin
A text editor to create your plugin.
Setting Up the Plugin
At the top of my plugin I'm adding the following lines:
1. Add a Custom Logo
1
2
3
4
5
6
7
8
9
/*
Plugin Name: WPTutsPlus Customize the Admin Part 1 - Login Screen
Plugin URI: http://rachelmccollin.co.uk
Description: This plugin supports the tutorial in wptutsplus. It customizes the Wor
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.com
License: GPLv2
*/
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
2 of 11 02/10/2014 10:54
-
It's easy to add your own or your client's logo to the login page and instantly make
your WordPress installation look more professional.
First, create a folder called media inside your plugin folder, and upload your
logo to it.
1.
In the plugin file (or functions file), add the following function, attaching it to the
login_enqueue_scripts action hook:
2.
This will add your logo to the login screen, as shown the the screenshot.
2. Style the Login Screen
As well as adding a logo you can also resize it to fit and add styling for other
elements in the screen.
01
02
03
04
05
06
07
08
09
10
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url(
-
Styling the Logo
The logo above is slightly squashed in order to fit in the default space given for it. I'm
going to adjust the sizing.
Edit the code in your plugin so it reads as follows:
The height value you use will depend on the aspect ratio of your logo. Using 300px
and auto for the background-size property ensures that your logo is as wide as
the login box and that its aspect ratio is retained, and the height value will provide
enough space for your logo to fit in.
Now my logo looks like this:
Much better! But sizing the logo isn't the only thing I can do with regard to styling.
01
02
03
04
05
06
07
08
09
10
11
12
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url(
-
How about changing some colors?
Styling Links
All of the text displayed on the login page is in the form of links, so it's links you'll
have to style. Edit your code again so it reads as follows:
This gives me links which are in keeping with my logo colors. The link color is cyan
and the hover color is magenta.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url(
-
Note: As my logo's main color is similar to blue, it works well for links. You may not
want to change the color of your links if your logo is a very different color, to avoid
usability problems.
Advertisement
Styling the Button
The final element on the screen is the 'Log In' button, which is still blue. Let's change
that. Edit your code so it reads as follows:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
.login #login h1 a {
background-image: url(
-
Suggested Tuts+ Course
Advertisement
So I now have a completely customized login screen, meaning that when my clients
or users log in, they see something that's consistent with my brand and makes the
site look more professional.
Summary
Customizing the WordPress login screen is straightforward and can make a big
difference to the impression your site gives to users and clients logging in. By
tweaking the code above to meet your needs and reflect your brand you can create
a very professional login screen in very little time.
28
29
30
31
32
33
34
35
36
background: -webkit-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
background: -o-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
background: -ms-linear-gradient(top, #85aaaa 0%,#208e8c 100%);
background: linear-gradient(to bottom, #85aaaa 0%,#208e8c 100%);
}
Categories:
Creative Coding
WordPress
Translations Available:
Tuts+ tutorials are translated by our community
members. If you'd like to translate this post into
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
7 of 11 02/10/2014 10:54
-
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
8 of 11 02/10/2014 10:54
-
22 Comments
Randy Federighi
Also don't forget, the logo url points to Wordpress but it can be changed using the
'login_headerurl' filter very easily.
Austin Passy
Or you can use a simple WordPress login plugin like my Custom Login plugin in the
repo or the premium version Custom Login Pro on Extendd.com.
So much more simple. :)
Ananya Sharma
Wow...I just moved over from Blogger to Wordpress on this http://sscdesk.in
Little naive for the php and wordpress, but with your codes I think I can manage and
make it look gud...thanks, gud share
GTUExam.in
I know it's extremely useful to know how to do this and that using
plugins is not the best solution all the time, but I wanted to mention
our White Label CMS plugin does all this and more. It redirects /login
to /wp-login.php, allows you to rebrand the login page, clean up and
rebrand the dashboard as well as give "Editors" access to "menus" and
"widgets" and a whole lot more.
http://www.gtuexam.co.in/
Rohit Jain
Will implement this on my blog. http://www.aamindia.com/
Nikhil
nice work i would be doing this for my new client....!!
http://goresult.in
Share King
wow great tutorial !!
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
9 of 11 02/10/2014 10:54
-
18,353 Tutorials 411 Video Courses
Custom digital services like logo design, WordPress installation, video
production and more.
Check out Envato Studio
Add more features to your website such as user profiles, payment
gateways, image galleries and more.
Browse WordPress Plugins
Advertisement
Teaching skills to millions worldwide.
Follow Us
Help and Support
FAQ
Terms of Use
Contact Support
About Tuts+
Advertise
Write for Us
Email Newsletters
Subscribe to receive inspiration, ideas,
and news in your inbox.
Subscribe
Privacy Policy
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
10 of 11 02/10/2014 10:54
-
2014 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
Customizing the WordPress Admin: The Login Screen - Tuts+ Code Ar... http://code.tutsplus.com/articles/customizing-the-wordpress-admin-the...
11 of 11 02/10/2014 10:54