Customize Your WordPress Login with a Custom Plugin

AllProWeb 0 Comments

Customize Your WordPress Login with a Custom Plugin

– Add Your Logo, Style Form Fields, and Enhance Branding!

Creating a custom WordPress plugin to personalize the login form allows businesses to reinforce their branding and enhance user experience.

This involves adding a company logo, modifying form field colors, customizing the submit button, and adjusting the background color to match the brand’s identity.

Using PHP, CSS, and WordPress hooks, developers can implement these changes effectively.

This guide provides a step-by-step approach, ensuring seamless integration and easy deployment.

A well-designed login page not only improves aesthetics but also strengthens brand recognition and security, making WordPress authentication more professional and visually appealing.

Step 1: Setup Your Plugin

Create the Plugin Folder
- Navigate to the wp-content/plugins/ directory in your WordPress installation.
- Create a new folder, e.g., custom-login-styler.

Create the Main Plugin File

Inside the custom-login-styler folder, create a PHP file named custom-login-styler.php.
Add the following header to define the plugin:

<?php
/**
 * Plugin Name: All Pro Web Designs Custom Login Styler
 * Description: Customizes the WordPress login page with a company logo, colors, and background styling.
 * Version: 1.0
 * Author: All Pro Web Designs
 */

Step 2: Enqueue Custom Styles

To modify the login form, we need to add custom CSS.

Add a Function to Enqueue the Stylesheet

Append this code to custom-login-styler.php:

function custom_login_styles() {
    wp_enqueue_style('custom-login', plugin_dir_url(__FILE__) . 'custom-login.css');
}
add_action('login_enqueue_scripts', 'custom_login_styles');

Create the Custom CSS File

Inside your plugin folder, create a new file named custom-login.css.
Add the following CSS rules:

/* Change background color */
body.login {
    background-color: #f4f4f4; /* Change this to your desired background color */
}

/* Style the login form */
.login form {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Customize input fields */
.login form input[type="text"],
.login form input[type="password"] {
    background: #fafafa;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
}

/* Customize submit button */
.wp-core-ui .button-primary {
    background: #0073aa; /* WordPress blue - change as needed */
    border-color: #006799;
    color: white;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Hover effect */
.wp-core-ui .button-primary:hover {
    background: #005d88;
    border-color: #004d70;
    transform: scale(1.05);
}

Step 3: Change the Logo

Upload the Logo
- Place the company logo in the plugin folder (e.g., logo.png).

Modify the WordPress Login Logo

Add the following function to custom-login-styler.php:

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a {
            background-image: url(' . plugin_dir_url(__FILE__) . 'logo.png) !important;
            background-size: contain !important;
            width: 100% !important;
            height: 80px !important;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

Step 4: Change the Logo URL and Title

By default, the WordPress logo links to wordpress.org. We can change it to the company’s homepage.

Modify the Logo URL

Add this function in custom-login-styler.php:

function custom_login_url() {
    return home_url(); // Change this to the company website URL if needed
}
add_filter('login_headerurl', 'custom_login_url');

Modify the Logo Title

Add this function:

function custom_login_title() {
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'custom_login_title');

Step 5: Activate the Plugin

Go to WordPress Admin Dashboard → Plugins.
Locate “Custom Login Styler” and click Activate.

Now, your login page will have:

A custom company logo

A customized background color

Styled input fields and submit button

Optional Enhancements

Make the background an image: Modify the .login CSS:

body.login {
    background: url('your-background.jpg') no-repeat center center fixed;
    background-size: cover;
}

Add Google Fonts: Modify custom-login-styler.php to include:

function custom_login_fonts() {
    echo '<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">';
}

Add Placeholder Text for the Login Fields: Modify custom-login-styler.php to include:

function custom_login_placeholders() {
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("user_login").setAttribute("placeholder", "Enter your email");
            document.getElementById("user_pass").setAttribute("placeholder", "Enter your password");
        });
    </script>';
}
add_action('login_footer', 'custom_login_placeholders');

This plugin is lightweight and easy to modify for future enhancements upon request.

How All Pro Web Designs Can Help!

Empower your business with cutting-edge web solutions!

From custom development and responsive design to SEO and e-commerce, our services will enhance performance, security, and user experience.

Don’t fall behind—optimize, scale, and innovate with the most in-demand web development trends today.

Request a quote today!

(817) 382-2320

Customize Your WordPress Login with a Custom Plugin