Hello everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin and I’m excited to be here with you today because we’re going to talk about how to customize our WordPress login page and we’ll get to that in just a second, but I’m really passionate about this topic because it really helps us as WordPress developers in even just our own enthusiast being on our WordPress.

So it makes so much nicer to login when we don’t necessarily have to see the WordPress logo every time, especially if you are building a website for a client and they don’t even know they’re using WordPress, that’s one of the best first steps that you can do is you can replace the WordPress with the logo of the company themselves so that it looks like their logging into their own custom solution, their custom website, but we’ll get to that in just a few minutes.

I wanted to start off this episode by letting you know a couple announcements that are going on here in the Your Website Engineer world. First off, I want to let you know about the webinar that’s happening on Friday, July 3 at 10 AM Eastern. We’ll be talking about how to properly add Java script to WordPress themes and plug ins. We’ll be talking about that and I think that we’ll even have some time to talk about some of the things we discussed today because there will be two different options when we talk about how to make this custom log in.

We’ll talk about a solution by using a plug in and then we’ll talk about creating our own plug to do that, and so either one of those is a – either one will be great solutions, but with the how to build your own plug in, we even throw some of that content in on the webinar this week because adding Java script properly, adding your CSS code properly to themes and plug ins, that really helps to just build things properly and stay right in line with the way that WordPress is designed and how WordPress – the top WordPress developers are doing things and we just want to make sure that we’re copying and we’re mimicking the people that have created WordPress were doing things the right way.

So I wanted to let you know about that. That webinar is on Friday, July 3 at 10 am Eastern. You can register at – you go to yourwebsiteengineer.com/webinar and if you are celebrating the July 4 on that day and you won’t be on your computer, then you can go ahead and still register and you’ll get an email later that day with the webinar replay and you can watch that over your holiday weekend or whenever you have an opportunity to check that out. All right.

The second order of business today is I want to tell you about the jet pack beta program and this is something that’s – it’s recently been reopened. It was something from in the past, but they are opening up and it’s 100 percent open to all the public and it’s basically they want to get the newest version of Jet Pack open in the eyes of the WordPress community. So basically what you can do is if you’re interested in seeing the latest and greatest things with Jet Pack, you can sign up and you can just basically sign up. You can use it and you can give any type of feedback, whether that be this doesn’t work right.

Something’s broken. I think the tech should be changed to this. All of those different things you can suggest in the beta forum and whatnot and so if you’re interested, there is a link in the share notes on how to sign up, but head on over to Jetpack.me/beta is a quick way to go over there and get signed up right away. So you don’t even have to be a developer. As long as you’re using WordPress and you’re an active user of Jet Pack, this is for you. The one thing that they do recommend is not running this on a live server somewhere just in the case that something bad happens like it’s not taking down your website.

So if you’re interested in that, head on over to jetpack.me/beta and the other announcement today is a new website that I heard about and saw online and it’s call subtlewallpapers.wordpress.com and there will be a link to this in the share notes as well, and this is a very cool website that’s using a WordPress.com free theme, but it’s basically just has some very nice subtle WordPress backgrounds that you can use for your computer and it – they’re really kind of neat.

There’s different colors. It’s basically like the WordPress logo in the center and kind of a gradient from a lighter color to a darker color at the bottom. So if you are looking for the new latest and greatest, something cool to jazz up your desktop, I would head on over to subtlewallpapers.wordpress.com. Moving right along to the is there a plug in for that section, this is one that I think this is the first plug in that I’ve recommended in quite some time or ever maybe that is not on the WordPress repository. This one is one that’s hosted on Get Hub Right Now, but it’s created by Tom McFarland and he’s got quite a few plug ins in the repository and I’m guessing that it may go to the repository at some point, but it’s right now kind of new and it’s not there yet, but you can download it over from Get Hub. I

t’s a little bit more complicated to get a gethub plugin into WordPress and it’s very easy to get a plugin that’s hosted on the WordPress repository. Inside your installation, you just go to the plugin section. You type the one that you want. You click the install button and it’s there. The ones on Get Hub, they take just a bit more effort because you have to download the file from Get Hub and then you have that zip file on your computer and then you take that zip file and you upload that zip file to your WordPress dashboard.

So one extra step, but this one maybe – it maybe something that you’re looking for and this one is called title capitalization for WordPress and this is a plugin that will automatically put the title of your post in capital case or title case which is a capital letter for the first word of each – in your title and this maybe good for somebody that’s – hates using the shift key for capital letters or somebody that maybe you want to make sure that all are your posts are typed correctly.

Maybe you have – this is a client and the client tends to type everything in capital letters or all lowercase letters, whatever the case may be. They can type it into any case that they like and when they click the publish or the save draft button and your page refreshes, it automatically changes it and fixes it. So this is something if you’re interested in it, there will be a link in the Share Notes for this plugin.

You can head on over the Share Notes for episode number 239 to see that and it’s called title capitalization for WordPress and lastly today before we get to the main section of the show, I do have a question that came in this week that I wanted to ask and just spend a little bit of time on, but basically Jim asked – he says I have a test site that I call my sandbox underneath my main domain. How do I keep Google from searching this site? Is it through Robot.txt file and then he gives an example of what he’s trying to do and basically what you can do is you can go to the reading under settings.

I guess it’s under settings, the readings settings that there is an option called search engine visibility that you can select that will discourage search engines from crawling your site and I do that it does take Google a few weeks and I’ve heard up to like six weeks or so before it actually crawls a brand new site and it’s visible in the search results and then another thing that you can do is there’s an article that I’ll link that specifies some information on how to block search engines from crawling your site via the robot.txt file and that is an article over from In Motion Hosting.

And so I’m not an expert in that in any way, shape or form, but I will link to that so you can have an opportunity to look at that and spend some time just kind of configuring and setting that up, but that’s a great question, Jim. That was just an email question. If you have any questions that you’d like me to answer on an upcoming show, feel free to use the contact form on yourwebsiteengineer.com or you can head on over to your email client and open up an email and send an email to dustin@yourwebsiteengineer.com and if that email can send over a WAV file you can send those to me as well.

So today I wanted to spend a little bit of time talking about how to make a customized WordPress login page and I’m doing this for several reasons. The first reason is the last episode that I did on custom login screens was episode number 46 which happened to be released and published in October 19, 2011. So that was quite a long time ago. There was – there’s been a lot of things that have happened since then. There’s a lot of new plugins that are out there and I was actually just fixing one of my sites yesterday. I was spending a little bit of time.

I had a weird error message at the top and the logo wasn’t loading all the way properly and I was just having some real issues that the way that the login page was looking and I was like, okay, I’m going to spend a little time debugging it and then I got into it and I was like wow, this is really neat. There’s a lot of really cool things that you can do to make your WordPress site that much more personalized when you have the opportunity to login.

You don’t necessarily have to see that WordPress logo every time and you don’t necessarily – there’s a lot of the settings and stuff that you can change and we’re going to talk all about that. So first I wanted to go through there’s two different ways that we can do this. We can actually use a plug in to this and so if you don’t want to mess with any code or do anything along those lines, you can use a WordPress plugin.

I’m going to recommend three of them today or you can do a little bit of time and spend a little bit of time and use some code and we’ll talk through some code examples and then I’ll have some code examples right there on my website so you can go ahead and take a look and spend some time kind of digging into that. So let’s just dive right in and look at a couple plugins. So there’s three plugins that I found. One is called Custom Login and Custom Login is one that looks really, really nice.

It has the ability to basically customize your entire website or your entire login page and it has premium extensions. The premium extensions that are available gives you the ability to have a stealth login. It gives you to redirect or make that login form on any WordPress page. You can redirect where your people go once they’ve logged in. So maybe it’s a membership site and they log in and then they go right to the membership dashboard. It gives you the ability to login without using a password. I’m not sure how that works and it comes with a style pack that has four predefined styles and let’s see if there’s a price on any of these.

So – but the free one is in the WordPress repository and you get started with right away for absolutely nothing and the custom login gives you the ability to change the background color or upload a background image. You can say where you want the background to be positioned. Do you want it in the top left? Do you want to repeat? Do you want the background size? You can specify that. You can specify your logo, what your image size is, your logo height, your logo width, if there’s a background to your logo, things along those lines.

You can also specify the background color for your form, the position of your form, the border radius, any types of label colors that you’re having, what color is your button. You can have custom HTML, custom CSS and custom J-query all kind of built in. This is all stuff that you can add via the plugin. The plugin looks really, really simple, that you just go in and it’s basically like any other WordPress dashboard. You just go in and if you want to pick a color, you can click the box and you can actually pick from the color wheel.

You can pick what color that you want or if you have a customized color, you can put the hexadecimal code right in there and if you’re doing an image, you can upload those and you can add them directly to your WordPress site. Let’s see about the pricing here. It looks like the professional license for the stealth login, oh wow, it is – I’m trying to see here. It looks like all of them, the professional license allows for unlimited domain. For a personal site, it’s $35 to add that plugin.

So it looks like they have a few different – each one is different and each one costs a little bit and so the style – a couple style packs are $10. You can do custom login. 3.0 is free. That’s the plugin that’s on the repository. You can do redirects is priced from $35 to $195. It looks like – they’re $35 for a single site and then up to the $195 if you’re going to use these on multiple sites. So that is for the plugin called custom login. It’s just called custom login and you can find that in the WordPress repository.

The next one that I want to highlight is called custom login page customizer and that one also is in the repository. This one has over 30,000 downloads and active installs I guess and so this is all done through the WordPress customizer. So we’ve been talking a little bit about the customizer in past episodes and that’s basically when you go to appearance and customize, it’s that panel that comes out on the left hand side and I believe last week we talked about how menus were coming to this area.

Well, now, you can customize your entire login page with – inside the customizer. You can upload a – your image. You can say how wide it is, what is the height and the width, and you can say how much padding there is. We can pick a background whether it be a static color or change the styles. We can format the styles, the fields, the buttons in other – like the other information and if you want to add more custom CSS and whatnot. This one is really cool. I love the way that this is built right into WordPress.

It feels like it’s a piece of WordPress itself and so that one is one that I recommend as well and that one’s called custom login page customizer, and they do have a pro version as well. It looks like the pro version will prevent you – prevent robot and brute force attacks using your website using Captcha integration and limit login features. So that is available. Let’s see what that one runs in price if you’re interested in that.

That runs for $20, $19.99 and there is a demo that you can see. The $19.99 is for one personal site and you can go up to developer for $50 for that. So that is the custom login customizer. I think it has that customizer name because it’s found in the customizer. The last one I want to share is called BM custom login and this is – gives you the ability to customize that login box quickly, easily and they have a Flicker section where people can actually upload images to the group so you can see exactly what other people are doing. Some of these look pretty neat.

There’s some cool login pages that have been created so I really like – that they’re kind of doing that community share type thing and it basically does the same thing. There’s no – I haven’t actually tried this one. This was one that I recommend back, way back in 2011 when I created that first podcast about creating a custom login and so – but it has more than 30,000 active installs as well and so people are interested in using and using it a lot. So that is the third option, BM custom login.

So suppose using a plugin from the WordPress repository isn’t for you. Maybe you want to have something – you want to use a plugin that allows it to be more customizable or maybe this is something that would be perfect for you as well. If you’re developing many of these sites, but you create your own custom plugin then all you have to do is change small, little things if most of your websites are very similar or your clients, maybe you put your logo as the website developer at the top instead of their logo.

Whatever it is, building a custom plugin is – it takes a little bit, but then it gives you the ability that if you wanted to easily make all of your websites have the same login, you can just copy and paste that plugin from site to site. So I’m going to talk about 10 things to do that we can customize within the WordPress plugin that we’ll create and I’ll put code links or sections of the code will be available on the show news for this page so you can see this and then again like I said I’ll probably talk through some of this on the webinar that is happening on July 3 as well.

So the first thing that we can customize is we call add a custom background to our website whether that be an image of some sort or it can be a color, a solid color or a gradient color or anything along those lines. As long as you can customize it with it with CSS, you can change it for the background of your login page and so we want to go ahead and do that. We can pick an image or we can pick some sort of color or gradient. So we can do that.

The next thing that we can customize is we can replace the WordPress logo with a custom logo and you can do that by picking your logo as a client or as the developer for a client. You can put the client’s logo. You can put your brand’s logo. You can put a network logo, whatever you want. You can add that as well. If you don’t want to do that, you can just hide the WordPress logo as well. You can maybe if you don’t need a logo, maybe a background image that has the logo on it somewhere. You can completely hide that WordPress logo as well.

The next thing that we can customize is the look of the login form and this customizes the label, like the text of the label that says user name and password. It customizes the ability to change what the background of the form field looks like and you can do all kinds of things with CSS there. The third or fourth thing, the next one that you can do is you can change the login logo URL. So right now if you click on the WordPress logo that’s on your login page, it will take you to Wordpress.org.

You probably want it to just redirect you back to that page or take you to your site’s home page or something. So you can go ahead and you can change that and you can set that to whatever URL that you’d like. The next thing that you can do is you can actually remove the lost password link and so that link is helpful if you’ve lost your passwords, but if somebody’s hacked your email, they’ll be able to get ahold of your WordPress password and take over your site.

So just a little bit of CSS and you can do a display none so that link is not there so people can’t click the lost password link and get access to your site. Another thing that you can do is you can remove the back to link and this allows users to return to the homepage of your site and so if you’re going for the clean look of a site and you’re going to have your logo at the top to take people back to your home page, you don’t need the back to link there as well so that’s another display none when it comes to the custom CSS.

The next thing that you can do is you can hide the error message, the login error message or you can actually change it if you like and so right now I believe if it says that if you type in a bad user name, it says invalid user name which is helpful or not helpful depending on if you’re a hacker or not.

So maybe you just want to change that to say incorrect login details instead of invalid user name because if you say an invalid user name, invalid user name and then someone tries another user name and it doesn’t say invalid user name then they know they have the user name right and then they’ll start hacking on passwords and so that’s helpful as well. Another thing that you can do if you’re interested in it is you can remove the login page shape.

So if you ever try to put in a password and it’s wrong, the little login box kind of shakes back and forth really, really quick a couple times. You can get rid of that as well and that’s another custom function that you can add to your plugin. You can – let’s see. You can change your redirect URL. This one is really neat. So this is really helpful if you’re running a membership site of some kind or if you want people to log in and then go somewhere immediately.

Right now you login and it goes right to your dashboard. Well, maybe for me, most of the time when I log in, I want to go straight to a new post and so I can set that as a redirect URL so that’s going to be the place that I’m taken every time that I log in instead of going to the dashboard. It takes me right to a login or to start editing or adding a new post. So you can do that as well. That’s pretty cool.

One of my favorite features and the last one that we’ll talk about is you can actually set the remember me to be checked and so it is a check box that is unchecked by default and so many times I try to put in my user name and password real quick and I forget – and hit enter and I log into my site without checking the remember me check box and so if you wanted to do that, there’s another few lines of code that you can say that you can add to your plugin that says hey, remember to keep me logged in always which is really, really nice and so those are some things that you can do when you’re customizing this page.

Again, there’ll be links in the share notes that you can see some of this code and you can kind of implement this onto a page yourself, into your own plugin and I believe, I’m checking my webinar replays, I might have done this as a webinar at one time. Okay. So I thought I did a webinar on this, but it doesn’t look like I have.

So you can go on over just to this episode, the show notes for episode number 239 and you can see the different – the ways that you can add this stuff or you can hide it and things along those lines and I guess I will do the – I’ll show the code exactly for what my website looks like with my login page and whatnot so you can get an idea. You can see what that image looks like immediately, what my login page looks like and then you can work through okay, this is how you do this.

This is how you do this and this is how you do this. All right. That is going to wrap up this episode. Thanks so much for tuning in and thanks for sticking with me as I try to explain some coding type things. I know there’s been a lot of people that said, can you get a little but more depth? Can you do a little bit more detail? But it’s really hard to talk about these functions, add function, logged underscore, checked underscore, remember underscore me.

It’s really hard to talk about that on a podcast. So you can reference that in the show notes and go build a custom login page for your WordPress site and we’ll talk to you next week. Take care. Bye, bye.