This guide shows you how to dramatically customize your WordPress login screen with a few simple steps, using custom CSS and a small PHP function. We'll go beyond a simple logo change and create a fully branded login experience.
(Click to see the full version)
Download the background image used in this tutorial here:
This tutorial is broken down into sections, allowing you to customize only the aspects you need. Whether you want subtle tweaks or a complete overhaul, this guide has you covered.
Step 1: Modify functions.php
First, you need to add code to your theme's functions.php
file to tell WordPress to use a custom stylesheet for the login screen. Paste the following code into your functions.php
file:
function stylized_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>'; } add_action('login_head', 'stylized_login');
This code hooks into the login_head
action and includes your stylized-login.css
file. Ensure both the function and the add_action
are included. The path to your CSS file is relative to your theme's directory. Adjust if necessary.
Step 2: Create stylized-login.css
Create a file named stylized-login.css
in your theme's directory (the same folder as your style.css
). This is where you'll add all your custom CSS.
Step 3: Customize Your Login Screen (CSS)
Now, let's add the CSS to your stylized-login.css
file. The following code provides a comprehensive customization, but you can selectively use only the parts you need.
/* Logo above login form */ .login h1 a { background-image: url('logo.png'); /* Replace 'logo.png' with your logo */ } /* Background image */ body.login { background-image: url('bg.png'); /* Replace 'bg.png' with your background image */ } /* Background of form */ .login form { background: rgba(0, 0, 0, .6); /* Adjust transparency as needed */ } /* Border for the form */ #loginform { border-color: #33d42a; /* Change border color */ } /* Labels for the form */ .login label { font-family: "Courier New", Courier, monospace; font-size: 28px; color: #33d42a; /* Change label color */ } /* Username text box */ .login input[type="text"] { font-family: "Courier New", Courier, monospace; font-size: 24px; background-color: rgba(0, 0, 0, .6); /* Adjust transparency */ border-color: #33d42a; /* Change border color */ } /* Password text box */ .login input[type="password"] { background-color: rgba(0, 0, 0, .6); /* Adjust transparency */ border-color: #33d42a; /* Change border color */ } /* Login button */ .wp-core-ui .button-primary { background-color: #000; background-image: none; border-color: #33d42a; border-bottom-color: #13f278; color: #33d42a; /* Change button text color */ } /* Login button hover */ .wp-core-ui .button-primary:hover { background-color: #33d42a; background-image: none; border-color: #33d42a; color: #000; /* Change hover text color */ } /* Lost password and 'Back to' links */ .login #nav a, .login #backtoblog a { color: #33d42a !important; text-shadow: none; } /* Lost password and 'Back to' hover links */ .login #nav a:hover, .login #backtoblog a:hover { color: #33d42a !important; text-shadow: 0 1px 0 #33d42a; }
Remember to replace placeholders like 'logo.png'
and 'bg.png'
with the actual filenames of your images. Your logo should ideally be 247x63 pixels for optimal fit.
Step 4: Change the Logo Link (Optional)
To change the link associated with the logo, add this to your functions.php
file:
function stylized_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/stylized-login.css"></link>'; } add_action('login_head', 'stylized_login');
This redirects the logo click to your site's home page.
After making these changes, clear your browser cache and test your customized login screen. Remember to always back up your website before making any code changes.
The above is the detailed content of Design a Stylized Custom WordPress Login Screen. For more information, please follow other related articles on the PHP Chinese website!

WordPressisadvantageousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment,2)flexibilityandscalability,3)strongcommunitysupport,4)built-inSEOandmarketingtools,5)cost-effectiveness,and6)regularsecurityupdates.Thesefeaturesallowforquicke

WordPressisaCMSduetoitseaseofuse,customization,usermanagement,SEO,andcommunitysupport.1)Itsimplifiescontentmanagementwithanintuitiveinterface.2)Offersextensivecustomizationthroughthemesandplugins.3)Providesrobustuserrolesandpermissions.4)EnhancesSEOa

Enable comments on your WordPress website to provide visitors with a platform to participate in discussions and share feedback. To do this, follow these steps: Enable Comments: In the dashboard, navigate to Settings > Discussions, and select the Allow Comments check box. Create a comment form: In the editor, click Add Block and search for the Comments block to add it to the content. Custom Comment Form: Customize comment blocks by setting titles, labels, placeholders, and button text. Save changes: Click Update to save the comment box and add it to the page or article.

How to copy WordPress subsites? Steps: Create a sub-site in the main site. Cloning the sub-site in the main site. Import the clone into the target location. Update the domain name (optional). Separate plugins and themes.

The steps to create a custom header in WordPress are as follows: Edit the theme file "header.php". Add your website name and description. Create a navigation menu. Add a search bar. Save changes and view your custom header.

Enable comments in WordPress website: 1. Log in to the admin panel, go to "Settings" - "Discussions", and check "Allow comments"; 2. Select a location to display comments; 3. Customize comments; 4. Manage comments, approve, reject or delete; 5. Use <?php comments_template(); ?> tags to display comments; 6. Enable nested comments; 7. Adjust comment shape; 8. Use plugins and verification codes to prevent spam comments; 9. Encourage users to use Gravatar avatar; 10. Create comments to refer to

You can install the FTP plug-in through WordPress, configure the FTP connection, and then upload the source code using the file manager. The steps include: installing the FTP plug-in, configuring the connection, browsing the upload location, uploading files, and checking that the upload is successful.

How to copy WordPress code? Copy from the admin interface: Log in to the WordPress website, navigate to the destination, select the code and press Ctrl C (Windows)/Command C (Mac) to copy the code. Copy from a file: Connect to the server using SSH or FTP, navigate to the theme or plug-in file, select the code and press Ctrl C (Windows)/Command C (Mac) to copy the code.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Chinese version
Chinese version, very easy to use

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download
The most popular open source editor
