One of the great perks of WordPress is the great backend admin functionality. From the UX of the screens to the page builders ease of use. WordPress comes with a great admin login and dashboard out of the box. A stock WordPress installation works and looks great, but what if you want more? What if you want to customize your WordPress login screen?
What if you want to change the login screens logo, change the url of the admin, protect against spam bots and unwanted logins? I’ll cover some basic how-tos so you can brand and personalize your WordPress dashboard login to suit your taste.
I’ll show you how to:
- Change the generic WordPress login logo
- Add additional security to the WordPress login url
Customize the WordPress Logo
The first thing I like to do on a custom WordPress website is to brand and secure the login page. A branded page just looks better and additional security layers add a piece of mind when it comes to WordPress.
I’m assuming if you’re reading this that you already have a WordPress child theme setup. https://developer.wordpress.org/themes/advanced-topics/child-themes/ Any changes you make should be made within your child theme and functions file.
The first step is to get your Logo. The default WordPress circular logo is 64px by 64px. In my case. My Clemson Web Design logo is 450x by 164px. WordPress uses CSS and background-image to place the logo so we’ll need to place our image in the right directory and edit our CSS to display the logo right. Once your logo is ready. Upload it to your WordPress media directory. Save the logo url for later use.
The next step is to edit your functions.php file to call in a custom logo. We create a custom function, call in the css to change and que it up on the login page, see below.
function customloginlogo() { ?>
<style type=”text/css”>
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/wp-content/uploads/2019/12/clemsonlogo-450.png );
}
</style>
<?php }
add_action( ‘login_enqueue_scripts’, ‘customloginlogo’ );
function customloginlogo_url() {
return esc_url( home_url( ‘/’ ) );
}
add_filter( ‘login_headerurl’, ‘customloginlogo_url’ );
function customloginlogo_url_title() {
return ‘Image Title Here’;
}
add_filter( ‘login_headertitle’, ‘customloginlogo_url_title’ );
Now, we could place all the styling inline with our functions php. A better option is go over to your child themes custom styles.css file. Lets overwrite the default WordPress styles. In my case I added the below to my styles.css
.login h1 a {
padding-bottom: 0px;
background-size: 450px;
height: 150px;
width: 450px;
position: relative;
right: 91px;
}
This gives my logo a nice centered layout, removes the padding and positions my logo just above the login form block. Looks great, a lot better the original WordPress logo. You’ll need to tinker with the css to get your positioning and layout right which depends on your logo size.
If you aren’t comfortable with doing this on a code level. There’s quite a few plugins where you can edit the dashboard login page from the WordPress admin. I won’t recommend a specific plugin but a quick Google search brings up quite a few pages of reputable plugins. I’m personally against using plugins for simple task. Every unnecessary plugin adds a layer of complexity to an already complex CMS.
Securing the WordPress Login page
To secure the WordPress login page, I highly recommend the WordFence security plugin. https://www.wordfence.com/ It offers brute force password protection, auto blocking crawlers, blocking countries (paid feature) and ip ranges and two factor auth for your WordPress login. WordFence is a critical plugin that builds onto WordPress and adds security features that should be standard on each and every WordPress website.
I’ll walk you through basic settings for brute force protection, locking out bots and enabling ReCAPTCHA with the WordFence plugin.
After your WordFence Plugin is installed. Follow the instructions to setup the default settings. After everything complete. Go to the Firewall tab. Click “All Firewall Options”
Scroll down and you will see brute force protection. Compare your settings to the settings I use. I lock out invalid login attempts to 2 hours with a 5 minute threshold. I also immediately block anyone that tries to login with specific user names. Add admin and administrator usernames to the immediate block list. These logins should have very strong passwords and shouldnt be used at all. Having these usernames on the block list will ban 90% of brute force bots.
Adding Google ReCAPTCHA
The next step is to enable Google ReCAPTCHA. Google’s pretty good at filtering spam bots with ReCAPTCHA so its awesome that WordFence has included this feature with their free version of WordFence. On your WordFence tab, Go to “Login Security”. Click the “Settings” tab. Scroll down about half way and you’ll see theReCAPTCHA options. Follow the link to Googles ReCAPTCHA site to generate a free code and secret key. Once you have those keys, enter them into WordFence, click “Save” and refresh your Login Page. You should now have a small ReCAPTCHA block showing on your WordPress login page.
