• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Woblogger logo black 5

Woblogger

A Collaborative Space for Content Creators

  • START HERE
  • BLOG
  • SPECIAL OFFERS
    • SEO PowerSuite – 65% OFF
    • Cloudways – Get 3 Months FREE
    • Link Whisper – Get $15 Off
    • WP Engine – Get 3 Months FREE!
    • 10Web Coupon 2025: Get 20% Off Lifetime Discount
    • FatCat Apps – Get 65% Off Discount
  • REVIEWS
    • Cloudways
    • 10Web
    • SEO PowerSuite
    • Link Whisper
    • Fliki AI
    • Long Tail Pro
    • Grammarly
    • Ranktracker
    • Genesis Framework
    • OptinMonster
    • Thrive Leads
    • Penji
    • Ninja Forms
    • Weebly
    • WP Rocket
    • Kimp
    • MarsProxies
  • ABOUT US
  • CONTACT US
  • Show Search
Hide Search

How to Customize WordPress Login Screen

Nilantha Jayawardhana. Last updated on Nov 13, 2020.

WordPress does not offer any native capability of customizing the looks of the theme. In particular, this means that the website administrators do not have any built-in way of adding the brand’s logo or styling to the login area of the website.

In this tutorial, I will show you how to make changes to the functions.php so that the website could have a customized login page.

How to Customize WordPress Login Screen

Table of Contents

Toggle
  • Customizing the WordPress Login Page
  • Add Custom Background
  • Replace the WordPress Logo With a Custom Logo
  • Customize the Looks of the Login Form
  • Change the Login Logo URL
  • Conclusion

Customizing the WordPress Login Page

Customizing the login page involves multiple modifications to the theme files. The steps in the process are:

  • Addition of Custom Background.
  • Replacement of the default WordPress logo with the brand’s custom logo.
  • Customization of the looks of the login form.
  • Change in the login logo URL.
  • Removal of login page shake.

How to Customize WordPress Login Screen

The important thing to understand in this context is that the login page is not really a part of the WordPress theme setup. Thus, whenever, you try to customize the login page, you will discover that WordPress would not load the custom theme’s stylesheet. to overcome this, a custom stylesheet must be created.

In the theme’s folder, create a new folder and name it login. go inside login and create a file named custom-styles.css. Once done, open the theme’s functions.php and add the following code:

[php]
function my_custom_login() {
echo ‘<link rel="stylesheet" type="text/css" href="’ . get_bloginfo(‘stylesheet_directory’) . ‘/login/custom-login-styles.css" />’;
}
add_action(‘login_head’, ‘my_custom_login’);
[/php]

Add Custom Background

To add a custom background, add the following code to custom-login-styles.css:

Cloudways

[css]
body.login {
background-image: url(‘/online.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
[/css]

Replace the WordPress Logo With a Custom Logo

To replace the default WordPress logo with the brand’s log, add the following code to custom-login-styles.css:

[css]
.login h1 a {
background-image: url(‘/hdr-logo.png’);
}
[/css]

Customize the Looks of the Login Form

How to Customize WordPress Login Screen

I’ve been using Cloudways since January 2016 for this blog. I happily recommend Cloudways to my readers because I am a proud customer.

To customize the looks of the login form, add the following code to custom-login-styles.css:

[css]
.login label {
font-size: 12px;
color: #555555;
}

.login input[type="text"]{
background-color: #efefef;
border-color:#000;

}

.login input[type="password"]{
background-color: #efefef;
border-color:#000;

}

.login .button-primary {
width: 120px;
float:right;
background-color:#17a8e3 !important;
color: #ffffff;
border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
background-color:#17a8e3 !important;
color: #fff;
border: 1px solid #0d9ed9;
}

.login .button-primary:active {
background-color:#17a8e3 !important;
color: #fff;
border: 1px solid #0d9ed9;
}
[/css]

Change the Login Logo URL

By default, the logo links to the default WordPress website. this behaviour could be changed and the new logo could point to the website’s homepage. for this, add the following code to the functions.php:

[php]
function my_login_logo_url() {
return get_bloginfo( ‘url’ );
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );

function my_login_logo_url_title() {
return ‘Your Site Name and Info’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );
[/php]

Conclusion

In this article, I discussed several easy ways of customizing the design elements of the WordPress Login page. with these changes, the login page could be customized to conform to the website’s custom styling and logo.

If you have a question or would like to add to the discussion, please leave a comment below.

Cloudways

Related

Cloudways

WordPress customize, login screen, wordpress

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Primary Sidebar

Do you want to start a blog that generates $12,648/month?

Join my FREE 7-Day Email Series to start your blogging career.

Your Privacy and Email is safe with us !!

Latest from the blog:

  • MarsProxies Review: Quality Proxies Without Breaking the Bank
  • Social Media Engagement: Why It Matters and How to Improve It
  • How to Optimize Healthcare Revenue Cycle Management (RCM)?
  • Discover the Benefits of Attending a Vegetarian Culinary School
  • How to Pick a Ring That Goes with Everything
  • How to Future-Proof Your Blog: 7 Strategies for Long-Term Success in 2026
  • The Creative Energy That Makes Dallas a City to Watch
  • SearchAtlas SEO Automation Platform: Is OTTO the Best AI SEO Tool in 2025?
  • The Best Enterprise Payroll Software Features to Streamline Payroll Processing
  • From Finances to First Impressions: Building a Business That Lasts
  • How Web Development in Sydney Can Enhance Your Digital Strategy
  • The Quiet Power of Long-Tail Content in Complex B2B Sales
  • Why Process Excellence Needs Task Mining?
  • Turn Your Text into Videos with AI Voices
  • Cracking the Code: How Competitor Price Monitoring Enhances Market Insight
  • Can Kids Wear Smartwatches to School?
  • Hybrid Cloud for Small Businesses: Is It Right for You?
  • How to Successfully Turn Side Hustles Into Sustainable Businesses Through Better Money Habits
  • Your Path to Success: Essential Strategies to Build a Career You Love
  • The Ultimate Guide to Buying a Laptop in Bangladesh

Awesome Deals for Woblogger Readers

  • 10Web Coupon: Get 20% Lifetime Discount
  • Cloudways Promo Code
  • SEMrush Promo Code
  • DigitalOcean Promo Code – Get $100 FREE Hosting Credit
  • Bluehost Coupon Code – Get 63% Off + Free Domain
  • HostPapa Coupon Code
  • A2 Hosting Coupon Code
  • GoDaddy Coupon Codes
  • Cloudways Coupon Code 2025
  • DreamHost Coupon Code: Maximum Discount
  • Namecheap Promo Codes and Coupons
  • SEO Spyglass Coupon Code – Get 40% Off
  • TeslaThemes Coupon Code

Read my ultimate guide about how to start a blog today. Learn More

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Woblogger

Copyright © 2025 | Proudly hosted on Cloudways | Optimized with WP Rocket.

  • Privacy Policy
  • Advertise
  • Author Guidelines
  • Disclaimer
  • Terms of Use
  • About
  • Contact