login-customizer

Login Customizer

Beautiful, branded login pages for WordPress

Login Customizer replaces the default WordPress login page with something that matches your brand. Choose a template, add your logo, pick your colors, and you're done. Perfect for client sites where that generic WordPress login feels out of place.

Getting Started

What you need:

  • WordPress 5.8 or newer
  • PHP 7.4 or newer
  • Admin access to your site

To install:

  1. Download the plugin from your CraftedPath account
  2. In WordPress, go to Plugins → Add New → Upload Plugin
  3. Upload the zip file and click Activate
  4. Go to CraftedPath → License and enter your license key
  5. Go to CraftedPath → Login Customizer to start customizing

Changes apply immediately—no need to clear cache.

Templates

The plugin comes with two templates:

Template Layout
Minimal Clean, centered form on a solid or image background
Modern Split-screen layout with bold typography

To change templates:

  1. Go to CraftedPath → Login Customizer
  2. Click on a template in the preview area
  3. The preview updates instantly
  4. Click Save when happy

Both templates are fully customizable—the template just sets the starting layout.

Add your logo to replace the WordPress logo on the login page.

To add a logo:

  1. In the editor, find the Logo section
  2. Click Upload and select an image from your media library
  3. Adjust the width (default: 200px)
  4. Adjust the max height (default: 100px)
  5. Optionally set a custom link (defaults to your homepage)

Tips:

  • Use a transparent PNG for best results
  • The logo scales proportionally within your width/height limits
  • Test on both light and dark backgrounds if using a background image

Background

Customize the page background with a color, image, or both.

Background color: Pick any color using the color picker. This shows if you don't use an image, or through transparent parts of your image.

Background image:

  1. Click Upload in the Background section
  2. Select an image from your media library
  3. Adjust position (center, top, bottom, etc.)
  4. Choose size (cover, contain, or custom)

Overlay: Add a color overlay on top of your background image to ensure the login form stays readable.

  1. Pick an overlay color (usually black or your brand color)
  2. Adjust opacity (0-100%)—higher means darker

This is especially useful with busy background images where text might be hard to read.

Button Styling

Customize the login button to match your brand.

What you can change:

  • Background color — the button fill
  • Text color — the button label
  • Hover background — fill when mouse hovers
  • Hover text color — label when hovering
  • Border radius — rounded corners (0 = square, higher = rounder)
  • Button text — replace "Log In" with custom text

Typography

Choose fonts for headings and body text.

Font options:

  • System — uses the visitor's device fonts (fastest loading)
  • Google Fonts — select from popular web fonts

To change fonts:

  1. Find the Typography section
  2. Choose a heading font
  3. Choose a body font
  4. Adjust font sizes if needed

Google Fonts load from Google's CDN. If you prefer not to load external fonts, stick with "System."

Set colors for the "Lost your password?" and other links below the form.

  • Link color — normal state
  • Link hover color — when mouse hovers

Custom Login URL

Hide your login page from bots by changing the URL from wp-login.php to something custom.

To set a custom login URL:

  1. Find the Security section
  2. Enter a slug (e.g., my-login or client-access)
  3. Save your settings

Your login page now lives at yoursite.com/my-login/ instead of yoursite.com/wp-login.php.

What happens to the old URL:

  • Visitors to wp-login.php get redirected to your custom URL
  • Visitors to wp-admin (when not logged in) get redirected to your custom URL
  • Logout, password reset, and special actions still work normally

Reserved slugs: These can't be used as they'd break WordPress: wp-admin, wp-login, admin, login, dashboard, wp-content, wp-includes.

Important: Make sure you remember your custom URL. If you forget it, you can still access /wp-login.php?action=logout to log out, or disable the plugin via FTP/file manager.

Custom Redirect

Control where users go after logging in.

Options:

  • Default — WordPress decides (usually the dashboard or the page they tried to access)
  • Custom URL — always redirect to a specific page

To set a custom redirect:

  1. Find the Redirect section
  2. Choose "Custom URL"
  3. Enter the full URL (e.g., https://yoursite.com/welcome/)

This affects all users. For role-based redirects, you'd need a separate plugin.

Additional Pages

The plugin can also style the password reset and registration pages.

To enable:

  1. Find the Apply To section
  2. Check Password Reset to style the "Lost your password?" page
  3. Check Registration to style the registration page (if you allow registration)

When enabled, these pages use the same template and styling as your login page.

Custom CSS and JavaScript

For advanced customization, add your own CSS or JavaScript.

Custom CSS: Add CSS that loads on the login page. Use this for tweaks the visual editor doesn't support.

/* Example: Make the form wider */
#login {
    max-width: 450px;
}

Custom JavaScript: Add JavaScript that runs on the login page. Use sparingly—login pages should be fast.

// Example: Add a custom message
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('loginform');
    var notice = document.createElement('p');
    notice.textContent = 'Welcome to the client portal';
    form.parentNode.insertBefore(notice, form);
});

Toggle the "← Back to [Site Name]" link below the login form.

  • Show — displays the link (default)
  • Hide — removes the link for a cleaner look

Troubleshooting

"My logo isn't showing"

  • Make sure the image URL is correct in your media library
  • Check that the file hasn't been deleted
  • Try a different image format (PNG or JPG work best)

"Custom login URL isn't working"

  • Go to Settings → Permalinks and click Save (flushes rewrite rules)
  • Make sure you're not using a reserved slug
  • Check for conflicts with other security plugins

"I forgot my custom login URL"

  • You can still access yoursite.com/wp-login.php?action=logout
  • Or access via FTP and rename the plugin folder temporarily
  • The setting is stored in wp_options as cplc_settings

"Styles aren't applying"

  • Clear any caching plugins
  • Check browser developer tools for CSS errors
  • Make sure "Apply to Password Reset" is checked if styling that page

"Google Font isn't loading"

  • Check if your site blocks external resources
  • Some privacy plugins block Google Fonts—check their settings
  • Switch to "System" fonts as a fallback

Technical Details

Settings stored in: wp_options table, key cplc_settings

Templates available:

  • minimal — Centered form layout
  • modern — Split-screen layout

CSS Variables: The plugin uses CSS custom properties (variables) for styling. Advanced users can override these in the Custom CSS field.

Key variables include:

  • --cplc-bg-color, --cplc-bg-image
  • --cplc-button-bg-color, --cplc-button-text-color
  • --cplc-heading-font, --cplc-body-font
  • --cplc-link-color, --cplc-link-hover-color

To uninstall completely:

  1. Deactivate and delete the plugin
  2. Settings remain in the database by default
  3. To remove everything: delete the cplc_settings option from wp_options
  4. If using a custom login URL, rewrite rules will clear automatically after the next permalink flush