Total Followers 132,503
With more and more people building custom WordPress themes, it only makes sense to want to create it more personal. I have found a few ways that I will share with you on making your WordPress powered site more personal. This tutorial will show you how to create a custom WordPress login, and explain how to fit it to your needs.
We will then take it a step further and create a custom admin panel footer, and also a custom admin header image for our WordPress site.
For this example we are going to modify our functions.php file. If your theme does not have this file you can create a blank file and name it functions.php – Make sure this file is placed in the theme directory of the current activated theme you are using.
Add the following to your functions.php file:
php
function custom_login() {
echo 'wplogin/wplogin.css" />';
}
add_action('login_head', 'custom_login');
?>
We are using the functions.php file to tell WordPress to override the default settings for the .css file used to make up the login screen. By doing this we are directing WordPress to use a specified .css file that we are going to create for our custom login screen. This .css file will be what we modify to design the login page.
Please make note that there are some very specific styles within the .css file that MUST be present, and changed accordingly for this to properly work. I have created the folder and placed the .css file in it to keep it separated from our regular theme files. If you want to the path can be altered as long as it points to the direct location of the CSS file within your theme.
Next we will need to do two things. First, we will need to create a new folder in our theme directory. For this example we are going to use the folder name wplogin.
This folder will be placed within our WordPress theme file folder.
In this folder we will make a new blank file and name it wplogin.css
This is now what you should have. Remember that the location can be changed using the code we placed in our functions.php file – but for this example you should now have the following:
The file structure will be: wp-content\themes\YOUR_THEME_NAME\wplogin
The new folder we named wplogin will go into your theme folder, and the new .css file we created will be held within the new folder.
/* Page Background */
html {
background: #eae2d5 url(bgimage-path);
margin: auto;
font-weight:bold;
}
/* WordPress Logo - MAKE SURE TO MATCH THE WIDTH AND HEIGHT */
h1 a {
background:url(logo-path) 0 0 no-repeat;
width:290px;
height:150px;
margin-left: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* Top Bar Background Color */
body.login {
border-top-color:#dac6ad;
}
.message {
margin-bottom: 0px;
}
/* Login Button */
#wp-submit {
background: #bc3d1d;
border: #f24643;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
color: #443030!important;;
}
/* Top Bar Link */
.login p#backtoblog a:link, .login p#backtoblog a:visited {
color:#443030;
font-weight: bold;
}
.login p#backtoblog a:hover, .login p#backtoblog a:active {
color:#443030;
text-decoration:underline;
}
Now that we have both the functions.php code in place telling WordPress to use our custom .css file, and our .css file in place, we can start to modify it a bit. The comments within the .css example should explain most everything but we will break it down to further understand it.
Make a note that when changing the logo image you MUST match it with the width and height in the CSS file. That is noted up above in the comments within the CSS file but it is VERY important or it will not always work correctly.
I know the .css is commented well but I still want to cover each editable item. Let’s see below to take a look at it:
The Page Background will be the entire page background color and image. The example .css file above shoes a link to the image but there is not one set. You can modify this to create a full-page background image, or change it to a color of your choice.
The WordPress Logo: This is where you will need to be sure to change the width and height to match your image. As long as the dimensions fit your logo you are using it will work correctly.
Top Bar Background Color: This is the bar located at the very top of the page. This can be changed to any color you like.
Message: This is the bottom bar that can be changed to any color you wish as well.
Login Button: This is the submit button on your login page.
Lost Password Link: This is the a:link button to retrieve your password if lost.
Top Bar Link: This is the a:link’s at the very top of the page within the Top Bar area.
Login: This is the writing on the login form of your page.
Take a look at the image below for a diagram of items within the CSS file we can change:
Now to continue making our WordPress install more custom and personal, we will change the footer link on our admin screen. This can personalize our website just a little bit more.
Again using the functions.php file we can force WordPress to change something. We will be telling WordPress what we want in our footer area of our admin screen instead of the generic text that comes standard with a regular install of WordPress.
Here is the code we will be adding, but this can be modified to your needs:
function remove_footer_admin () {
echo 'Anything you want can go right here | Copyright © 2010 My Website name';
}
add_filter('admin_footer_text', 'remove_footer_admin');
This can also be really useful when trying to personalize your WordPress powered site. Even if you are creating the site for a client they will always enjoy seeing their logo on the admin screen. This is easy to do, and can be done by editing the functions.php file. Add the following code and be sure it points to your image that you will be using:
// Custom Admin Top Logo
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom_logo.gif) !important; }';
}
Now we have created a custom WordPress login screen, as well as a custom footer within our admin screen, and a custom image in the header of our admin screen. This should be a good start in personalizing our WordPress powered site. There are still things that can be done to take all of this even further. Using these methods is good for personal sites, multi-user sites, and even sites created for clients that want to see their WordPress site personalized. Playing with the above provided code will allow you many options to customize your WordPress site.
Get The Only Freelancer crash course you will ever need to read!
My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.
Friday, September 9th, 2011 02:53
I will immediately snatch your rss feed as I can not to find your e-mail subscription link or e-newsletter service. Do you have any? Please permit me understand in order that I may subscribe. Thanks.
Thursday, August 18th, 2011 16:27
The tutorial is beyond my expectation. Now it’s become quite easy to modify and customize the wordpress login page. I am looking for some great wordpress login page designs. Will you care to post some beautiful and creative login page designs?
Sunday, July 3rd, 2011 17:57
We’ve been branding the login page for our clients ever since we came across your article! To be honest, clients love the branding touch to it even though it’s just a simple step. Thanks for this mate!
Wednesday, June 29th, 2011 03:13
Some time i really get wonder that how people write something so informative like the above details, i am really thanks full of you guys for sharing.Thanks Alot
Tuesday, October 26th, 2010 09:11
try this:
echo ”;
instead of:
echo ‘wplogin/wplogin.css” />’;
Saturday, September 18th, 2010 22:58
First Off, BIG THANK YOU for this code. And Please correct the code, it looks good but it doesn’t work.
For example:
php
function custom_login() {
echo ‘wplogin/wplogin.css” />’;
}
add_action(‘login_head’, ‘custom_login’);
?>
Specially this line
echo ‘wplogin/wplogin.css” />’;
I tried but the code did not work.
Tuesday, July 27th, 2010 03:15
php
function custom_login() {
echo ‘wplogin/wplogin.css” />’;
}
add_action(‘login_head’, ‘custom_login’);
?>
without the line numbers, of course…
Tuesday, July 27th, 2010 03:07
your code is not working for some reason…everything is red, a tag is not closing or whatever, strange…
‘;
}
add_action(‘login_head’, ‘custom_login’);
?>
Sunday, June 6th, 2010 15:21
nice tricks ;) for wp personalization , thanks
Thursday, June 3rd, 2010 08:04
This is what I’ve been browsing for the last two days. By the way do you have a ready made custom login page for sharing – lol.
Monday, May 31st, 2010 07:27
Love it. Yes have given some of the plugins a go and they have broken our site. Will get our dev to look into this.
Sunday, May 30th, 2010 19:51
Great Article Kevin,
Just a small typo in 2nd paragraph under “Full Breakdown “. ” shoes a link ” should be “shows a link”
Sunday, May 30th, 2010 19:05
i can’t even consider this a hack. you’ve taken steps to maintain the modular nature of the core wp files. well done!
Sunday, May 30th, 2010 10:11
Nice one, good to know. This can be just plus for any theme we do!
Sunday, May 30th, 2010 00:15
Nice hack. It is very useful when you customize wordpress login page with client logo and corporate colors.
Saturday, May 29th, 2010 21:36
very interesting.
the branding plugins I’ve tried don’t always work with child themes and when the WP installation is in a subfolder.
this is much more flexible
Saturday, May 29th, 2010 19:31
Great article, definitely gonna try this out!
Saturday, May 29th, 2010 18:49
Nice and simple!
I will point out for you that the way you impliment this hack is good due to the fact your adding this to the functions file of your template, so core upgrades won’t effect or erase the changes.
A differnt route you can take is using plugins that do this exact thing.
I made one called ‘My Brand Login‘ that customizes your Login/Registration page and Admin panel via a slick options page.
Anyways good work….
Saturday, May 29th, 2010 20:08
Hey Kris, thanks for your comments. We already covered that plugin in our previous article.:)
Saturday, May 29th, 2010 16:09
Great! Although there are some plugins for customizations, it’s really good to know how to customize the back end yourself. Bookmarked. Thanks!
Saturday, May 29th, 2010 17:04
Thanks for the tips, it would be nice to have a customized login page.
Saturday, May 29th, 2010 15:16
Hi, this is really a useful wordpress hack. Thank you for sharing it. I will now use these tips to give a more personalized experience to my clients.
Thanks again! :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Arun Prasad
Saturday, May 29th, 2010 15:16
Hi, this is really a useful wordpress hack. Thank you for sharing it. I will now use these tips to give a more personalized experience to my clients.
Thanks again! :)
paul
Saturday, May 29th, 2010 21:36
very interesting.
the branding plugins I’ve tried don’t always work with child themes and when the WP installation is in a subfolder.
this is much more flexible
Mirko
Sunday, May 30th, 2010 00:15
Nice hack. It is very useful when you customize wordpress login page with client logo and corporate colors.
sin2384
Sunday, May 30th, 2010 10:11
Nice one, good to know. This can be just plus for any theme we do!
matt ryan
Sunday, May 30th, 2010 19:05
i can’t even consider this a hack. you’ve taken steps to maintain the modular nature of the core wp files. well done!
Matthew Schrager
Saturday, May 29th, 2010 19:31
Great article, definitely gonna try this out!
nazcar
Saturday, May 29th, 2010 16:19
cool.. i am going to try this..
Avik
Saturday, May 29th, 2010 17:04
Thanks for the tips, it would be nice to have a customized login page.
dattai
Saturday, May 29th, 2010 15:47
That’s very cool
Thanks a lot
Kris J
Saturday, May 29th, 2010 18:49
Nice and simple!
I will point out for you that the way you impliment this hack is good due to the fact your adding this to the functions file of your template, so core upgrades won’t effect or erase the changes.
A differnt route you can take is using plugins that do this exact thing.
I made one called ‘My Brand Login‘ that customizes your Login/Registration page and Admin panel via a slick options page.
Anyways good work….
Saad Bassi
Saturday, May 29th, 2010 20:08
Hey Kris, thanks for your comments. We already covered that plugin in our previous article.:)
alex
Saturday, May 29th, 2010 16:09
Great! Although there are some plugins for customizations, it’s really good to know how to customize the back end yourself. Bookmarked. Thanks!
Ejaz
Sunday, May 30th, 2010 19:51
Great Article Kevin,
Just a small typo in 2nd paragraph under “Full Breakdown “. ” shoes a link ” should be “shows a link”
Alex Dimos
Monday, May 31st, 2010 07:27
Love it. Yes have given some of the plugins a go and they have broken our site. Will get our dev to look into this.
Aidan
Wednesday, June 29th, 2011 03:13
Some time i really get wonder that how people write something so informative like the above details, i am really thanks full of you guys for sharing.Thanks Alot
Chandler Kwek
Sunday, July 3rd, 2011 17:57
We’ve been branding the login page for our clients ever since we came across your article! To be honest, clients love the branding touch to it even though it’s just a simple step. Thanks for this mate!
Saurav
Thursday, August 18th, 2011 16:27
The tutorial is beyond my expectation. Now it’s become quite easy to modify and customize the wordpress login page. I am looking for some great wordpress login page designs. Will you care to post some beautiful and creative login page designs?
Tina Grimwood
Friday, September 9th, 2011 02:53
I will immediately snatch your rss feed as I can not to find your e-mail subscription link or e-newsletter service. Do you have any? Please permit me understand in order that I may subscribe. Thanks.
Satyabijana
Tuesday, October 26th, 2010 09:11
try this:
echo ”;
instead of:
echo ‘wplogin/wplogin.css” />’;
jkkdism
Saturday, September 18th, 2010 22:58
First Off, BIG THANK YOU for this code. And Please correct the code, it looks good but it doesn’t work.
For example:
php
function custom_login() {
echo ‘wplogin/wplogin.css” />’;
}
add_action(‘login_head’, ‘custom_login’);
?>
Specially this line
echo ‘wplogin/wplogin.css” />’;
I tried but the code did not work.
Mars
Wednesday, June 2nd, 2010 08:24
nice article, this is worth doing
Ample
Thursday, June 3rd, 2010 08:04
This is what I’ve been browsing for the last two days. By the way do you have a ready made custom login page for sharing – lol.
Husien Adel
Sunday, June 6th, 2010 15:21
nice tricks ;) for wp personalization , thanks
ed
Tuesday, July 27th, 2010 03:15
php
function custom_login() {
echo ‘wplogin/wplogin.css” />’;
}
add_action(‘login_head’, ‘custom_login’);
?>
without the line numbers, of course…
ed
Tuesday, July 27th, 2010 03:07
your code is not working for some reason…everything is red, a tag is not closing or whatever, strange…
‘;
}
add_action(‘login_head’, ‘custom_login’);
?>