By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
WPDuneWPDuneWPDune
  • Theme Review
  • Plugins
  • Latest Deals
  • Hosting
  • About
  • Contact
Reading: Customize WordPress Login Page
Share
Font ResizerAa
WPDuneWPDune
Font ResizerAa
Search
  • Theme Review
  • Plugins
  • Latest Deals
  • Hosting
  • About
  • Contact
Follow US
© 2022 Foxiz News Network. Ruby Design Company. All Rights Reserved.

Customize WordPress Login Page

Abhishek Kumbhani
Last updated: August 26, 2014 11:13 am
Abhishek Kumbhani
Share
8 Min Read
Customize WordPress Default Login Page

WordPress default login page is one of the most used pages in most of WordPress based website for admin login. Though simple and clean, it is heavily branded WordPress. However, most of new users do not need to know about the underlying software your website runs on.

Table of Contents
Customize the WordPress Login In Your ThemeChanging the Login LogoAdding a Custom StylesheetHelpful PluginsCustom LoginUber Login LogoSky Login Redirect

It is a good idea to add your own style to the login page to make it more inviting and align it better with your website. But the problem is the many of us don’t know how to customize or change default WordPress login page. You can do this by adding your own logo, changing the typography, color of the form, background, and adding a useful links in the form. When customized properly, the login page can be a useful entry point for your users, welcoming them to your website.

Luckily, WordPress gives you the functionality to customize default login page with just changing a little code. In this post, we will see how to customize the login screen with a few WordPress hooks in your theme file, then we also talk about few plugins that can help with the task.

Customize the WordPress Login In Your Theme

On of the most easiest way to changes to the WordPress login page is to add some code directly to your theme which is currently active. You can see this Code in the functions.php file. This is a most important and required file, so any code used here will work in any theme. I would recommend you to making these changes in a testing mode first before live your website.

The first thing to do is open your theme’s directory, and create a new folder in the root with the name of login. We will use this folder to hold the images and CSS stylesheets for our custom login form.

customize login

Now, open the functions.php file in the editor like Notepad, Dreamweaver etc. The file contains hooks, functions and filters which are necessary for your theme to work. We will adding all of our code to the bottom of this file. Any changes made to this file will only take effect to the theme it belongs to. If you choose to activate another theme, you will have to add this code to the new theme’s functions.php file.

Changing the Login Logo

First of all you need to save your logo image in the login folder you which we created. The default size for this image is 80 pixels x 80 pixels. You can also create your own size logo, but make sure it is square so that it fits the dimensions perfectly. I would recommend you to saving a transparent PNG logo file, so the image works on any background.

Simply just save your logo image as logo.png to the login directory. Then, at the bottom of your functions.php file, add this below code. (Copy and Paste) 🙂

function my_loginlogo() {
echo ‘<style type=”text/css”>
h1 a {
background-image: url(‘ . get_template_directory_uri() . ‘/login/logo.png) !important;
}
</style>’;
}
add_action(‘login_head’, ‘my_loginlogo’);

We using the login_head WordPress action to add a small bit of CSS to the <head> section of the login screen’s HTML. Make sure to include the “!important” flag in your CSS, so that the default logo image is overwritten.

customize login logo

After adding the above code, you will see your own logo appear on the login page, directly above the form. It’s So far so good.

Adding a Custom Stylesheet

The login screen is looking not bad but not so good, there are a few more style changes that still need to be added. For one thing, the logo is still fairly small. I would also suggest you to change the colors of the background and form elements that match your brand a bit more.

In the login directories you need create a new file called login_styles.css. Then, open this file in the editor. You can add any kind of CSS to this file, but you’ll need to confirm to the HTML markup produced by WordPress. For a full list of classes and IDs for you to hook into on the login page, visit the WordPress codex.

For Example :

/* Change background color and font family */
body {
background: #f8fafa;
font-family: Arial,Verdana,sans-serif;
}
/* Change Width and Height of Logo Image + Add Custom Image File */
.login h1 a {
background-image: url(logo.png);
width: 213px;
height: 97px;
background-size: 213px 97px;
}

In the above Example, i added back ground color and font family to change the general typography of the page, and the main background.

Remember : In this section you need to add your own custom Stylesheet as you want.

In order to changes take effect, you will need to enqueue this stylesheet using the login_enqueue_scripts action. Go back to your functions.php file and add this small block.

function my_logincustomCSSfile() {
wp_enqueue_style(‘login-styles’, get_template_directory_uri() . ‘/login/login_styles.css’);
}
add_action(‘login_enqueue_scripts’, ‘my_logincustomCSSfile’);

You can also remove the my_loginlogo function from the first step, as this code has now been incorporated into the stylesheet.


Helpful Plugins

A few advance WordPress developers have created plugins that can do the heavy lifting for you, if you would prefer to stay away from coding it yourself. The following plugins are helps you to customize different element of the login page, and they might be exactly what you need.

Custom Login

Custom-Login

Download Custom Login

Custom Login plugin allow you style every element on the login form. You can upload custom background images for the body and login form, or custom logo to replace the default WordPress logo. You can also modify the color of backgrounds, text and links. The plugin also let you to add custom CSS, HTML and Javascript into the page.

Uber Login Logo

Uber Login Logo

Download Uber Login Logo

If you are looking to change the logo on the login screen in a simple way, you can use Uber Login Logo plugin. It offers you to upload any image through it’s settings page, which it swaps in for the default WordPress logo. Keep in mind that only the logo is replaced, and that you have to confirm to the default dimensions.

Sky Login Redirect

Sky-Login-Redirect

Download Sky Login Redirect

Sky Login Redirect takes an interesting approach to customize your custom logo screen. It will simply be brought back to the page they were browsing before login. So if a user is reading a post of yours, then logs in, they will be brought immediately back to that article. If you have a membership website, i would recommend you to Sky Login Redirect is perfect for your.

You Might Also Like

Add Facebook Reactions to Your WordPress Website

Black Friday – WordPress Deals and Discounts Offers 2014

Top 10 Places To Find WordPress News In 2014

How to Fix Broken Links on WordPress Sites

10 Best WordPress Theme Frameworks

TAGGED:Changing Login Logocustomize login pageLogin PageWordPress Login PageWordPress Plugins

Sign Up For Daily Newsletter

Be keep up! Get the latest breaking news delivered straight to your inbox.
By signing up, you agree to our Terms of Use and acknowledge the data practices in our Privacy Policy. You may unsubscribe at any time.
Share This Article
Facebook Twitter Copy Link Print
Share
Elementor

Recent Posts

Apache-vs-LiteSpeed-Servers-Comparison-for-WordPress
Apache vs LiteSpeed: Servers Comparison for WordPress
Digital-Marketing-Trends-You-Cantt-Ignore-In-2022
Digital Marketing Trends You Can’t Ignore In 2022
cloudways-bfcm-deal
Cloudways Black Friday Deals 2021 (40% OFF For 4 Months)
5 Best Google Analytics Plugins for WordPress websites
5-Free-Tools-to-Quickly-Grow-Your-Online-Presence
5 Free Tools to Quickly Grow Your Online Presence

THEMES BY CATEGORIES

App WordPress Theme
Blog WordPress Theme
Business WordPress Theme
eCommerce WordPress Theme
Hotel WordPress Theme
Magazine WordPress Theme
Music WordPress Theme
Portfolio WordPress Theme
Restaurant WordPress Theme
Travel WordPress Theme

Best in Market

divi-theme
creative-market
mythemshop
tesla-themes
Cloudways

About WPDune

WPDune is resource providing website for WordPress products including themes & plugins. We reviews only best WordPress themes, plugins, tutorials mainly aimed to provide high quality WordPress resources for all WordPress users.

Founded by Abhishek Kumbhani, in 2014 and growing rapidly, come and join us in our journey.

Quick Links

  • About Us
  • Contact us
  • Contribute
  • Disclaimer
  • Privacy Policy
  • Terms & Condition

Most Viewed Posts

  • Cloudways Hosting Review – A managed cloud hosting service worth your time and money
  • NewsTimes WordPress Theme – Magazine WordPress Theme
  • WP Subscribe Pro Plugin – Turn Visitors Into Paying Customers
  • Qubely: An Incredible Plugin Solution for All WordPress Users
  • News – WordPress 4.0 Beta 1 Available
© Copyright 2025 WPDune | All Rights Reserved.
logo-dark
Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?