A Proper Welcome & The Custom Login Page

Welcome Pilgrim,

After months of developing this website I have finally sent it live. Yes there is a little more to do on the site but for me it’s finished enough to finally launch as I mentioned in my first Hello world post.

This website is not only going to show off my portfolio and a way for any potential client’s to Contact me regarding website projects but this weblog is going to become an outlet for me to share my tips and tricks as well as news to do with Website development, design and security. Let me know in the comments what you would like to see and if you want to see a post on a certain feature.

The Custom Login Page.

Starting as I mean to go on. I have decided to share with you my process to create a custom built WordPress login page for your own blog. The process took me approximately 45 mins to complete and this timelapse video shows the process from start to finish. enjoy..

The WordPress login page can be pretty boring right? Over the years I have seen a lot of login pages and the WordPress one is always the most boring. As a website developer I like to change this, modify and improve on what a lot of people consider perfection. This is something I do a lot for my own clients as it just shows that I go that little extra mile for them. If like me you are also a developer then this is something you should do for your clients. It will make you stand out from the pack and the feed back you get may sometimes mean the difference to getting that new client.

[clickToTweet tweet=”Create a Custom Login page for your #WordPress website. quick and easy to do.  ” quote=”Create a Custom Login page for your #WordPress website. quick and easy to do.”]

A small word of warning though, This is not for the novice blogger and a bit of knowledge in HTML, CSS and PHP is needed. Ready to begin? Then lets start.

Step 1. CREATE A FOLDER.

The simplest thing to do is to create a folder called ‘login’ that will be placed within your themes directory. I like to use Codeanywhere to connect to my server using ftp as it allows me to edit and build my sites live on the server and it’s a much better than using filezilla having to upload everything you make changes.

You will notice in the screengrab to the left that within the login folder is an assets folder containing my custom background image and my logo image. Remember that you Logo needs to have a transparent background for this to look good and finally your custom-login.css file needs to be in the login folder not the assets folder. I hope all of that makes sense.

Step 2. Get an Image.

Naturally you will have your logo to hand for this project in png format with a transparent background but the main background image can be anything and in any format. I like to use Pixabay as it offers a wide variety of free to use royalty free images all free of charge to download. Once you have your image I suggest renaming it (something like my-loginbg.jpg works well) and quickly running the image through the free kraken.io web interface to shrink down the file size. After that you then upload the images to your assets folder.

Step 3. Create a function.

This next step will enable your theme to use the new login directory, the 2 assets and the custom-login.css file. For this you will have to open up your functions.php file and at the top but after opening <?php enter this code…


/*---==== My Custom Login function ====---*/
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" 
href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login.css">';
}
add_action('login_head', 'my_custom_login');
function my_login_logo_url(){
return get_bloginfo('url');
}
add_filter('login_headerurl', 'my_login_url_logo');
function my_login_logo_url_title(){
return 'The Web Engineer';
}
add_filter ('login_headertitle', 'my_login_logo_url_title');

The first function as you can see relates to the custom login stylesheet and will use this one instead of the default WordPress one that comes packaged with WordPress. Time to work on the styling of the page.

[clickToTweet tweet=”The default #WordPress login page is a little boring. Lets smarten it up and make it Fresh and Exciting with this. #CustomizingWordPress” quote=”The default #WordPress login page is a little boring. Lets smarten it up and make it Fresh and Exciting with this. #CustomizingWordPress”]

Step 4. Style it up.

We now have everything in place for this to work. You have the login folder that contains the assets and the mycustom-login.css file and you have edited the functions.php file to use the new stylesheet which we have to build now.


body.login {
  background:url('assets/my-loginbg.jpg')no-repeat;
  background-attachment:fixed;
  background-position:center;
  background-size:cover
}
#loginform {
  background:rgba(255,255,255,.75);
  border-radius:18px
}
.login h1 a {
  background-image:url('assets/mainlogo.png');
  width:320px;
  height:84px;
  background-size:100%
}
.login label {
  font-size:13px;
  color:#555555;
  font-weight:800;
  font-family:sans-serif
}
.login input[type="text"], .login input[type="password"]{
  background-color:#268FD0;
  border-color:#dddddd;
  border-radius:6px;
  box-shadow:inset 1px 1px 3px rgb(0,0,0)
}
.login .button-primary {
  width:120px;
  height:40px !important;
  float:right;
  background-color:#268FD0;
  color:#fff;
  border-radius:6px;
  border-bottom:6px solid #0F4D53
}
p#nav {display:none}
p#backtoblog {display:none}

And that as they say is that. Hopefully you won’t have any errors in the theme but if you do and it’s not working then do please leave me a comment below with the error you have and I will try by best to rectify it for you. It’s also always worth making a backup of your functions.php file in the first place in case anything awry happens.

Your Turn.

Did it work for you? Are you happy with it? leave me a link in the comments below to show it off. Finally please spread the knowledge by sharing this post. Until next time pilgrim.

 

 

 

 

Phillip Dews

Phillip Dews

Phillip Dews is primarily a website developer and designer specalising in bespoke and custom built websites for clients across the globe.

Phillip has been designing and developing exciting and dynamic websites since 2006.

Phillip can help you with any website project you may have. contact Phillip via Email HERE

  1. Do you have any questions or comments for me? Would you like me to explain what some piece of code here does? Let me know in this comments section. Looking forward to it.
    Phillip

  2. hey Phillip, its amazing, very well developed website. thanks

Would you like to share your thoughs?

Your email address will not be published. Required fields are marked *