PHPwordpressbeginner

Customize WordPress Login Page

Replace WordPress logo on login page with your custom logo

#branding#login#wp-login#customization#white-label
Share this snippet:

Code

php
1// Replace login logo
2function custom_login_logo() {
3    ?>
4    <style type="text/css">
5        #login h1 a, .login h1 a {
6            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png');
7            height: 80px;
8            width: 320px;
9            background-size: contain;
10            background-repeat: no-repeat;
11            padding-bottom: 10px;
12        }
13

14        /* Optional: Customize login form colors */
15        .wp-core-ui .button-primary {
16            background: #0073aa;
17            border-color: #0073aa;
18            box-shadow: none;
19            text-shadow: none;
20        }
21

22        .wp-core-ui .button-primary:hover {
23            background: #005a87;
24            border-color: #005a87;
25        }
26

27        /* Optional: Customize background */
28        body.login {
29            background: #f0f0f1;
30        }
31

32        /* Optional: Customize form styling */
33        .login form {
34            border-radius: 8px;
35            box-shadow: 0 1px 3px rgba(0,0,0,0.13);
36        }
37    </style>
38    <?php
39}
40add_action('login_enqueue_scripts', 'custom_login_logo');
41

42// Change logo URL (link to your homepage instead of WordPress.org)
43function custom_login_logo_url() {
44    return home_url();
45}
46add_filter('login_headerurl', 'custom_login_logo_url');
47

48// Change logo title
49function custom_login_logo_title() {
50    return get_bloginfo('name') . ' - ' . get_bloginfo('description');
51}
52add_filter('login_headertext', 'custom_login_logo_title');
53

54// Optional: Add custom message above login form
55function custom_login_message($message) {
56    if (empty($message)) {
57        return '<p class="message">Welcome! Please log in to access the dashboard.</p>' . $message;
58    }
59    return $message;
60}
61add_filter('login_message', 'custom_login_message');
62

63// Optional: Customize login page footer
64function custom_login_footer() {
65    echo '<style>.login #backtoblog, .login #nav { display: none; }</style>';
66}
67add_action('login_footer', 'custom_login_footer');

Customize WordPress Login Page

This snippet allows you to replace the default WordPress logo on the login page with your own custom logo, and customize the link URL and title.

// Replace login logo
function custom_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png');
            height: 80px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 10px;
        }

        /* Optional: Customize login form colors */
        .wp-core-ui .button-primary {
            background: #0073aa;
            border-color: #0073aa;
            box-shadow: none;
            text-shadow: none;
        }

        .wp-core-ui .button-primary:hover {
            background: #005a87;
            border-color: #005a87;
        }

        /* Optional: Customize background */
        body.login {
            background: #f0f0f1;
        }

        /* Optional: Customize form styling */
        .login form {
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.13);
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'custom_login_logo');

// Change logo URL (link to your homepage instead of WordPress.org)
function custom_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');

// Change logo title
function custom_login_logo_title() {
    return get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
add_filter('login_headertext', 'custom_login_logo_title');

// Optional: Add custom message above login form
function custom_login_message($message) {
    if (empty($message)) {
        return '<p class="message">Welcome! Please log in to access the dashboard.</p>' . $message;
    }
    return $message;
}
add_filter('login_message', 'custom_login_message');

// Optional: Customize login page footer
function custom_login_footer() {
    echo '<style>.login #backtoblog, .login #nav { display: none; }</style>';
}
add_action('login_footer', 'custom_login_footer');

Implementation Steps

  1. Upload Your Logo: Place your logo image in your theme directory (e.g., /wp-content/themes/your-theme/images/custom-logo.png)

  2. Adjust Logo Dimensions: Update the height and width values to match your logo's dimensions

  3. Customize Colors: Change the color values to match your brand colors

  4. Test: Log out and visit /wp-admin to see your custom login page

Logo Requirements

  • Recommended Size: 320px × 80px or similar aspect ratio
  • Format: PNG with transparent background works best
  • Max Width: 320px (to fit within the login container)
  • Retina Support: Use a 2x size image (640px × 160px) for sharp display on high-DPI screens

Complete White Label

For complete white labeling, combine this with:

  • Hiding the WordPress version
  • Customizing the admin footer
  • Removing WordPress branding from emails
  • Custom admin color scheme
Back to All Snippets

Related Snippets

Add Custom Admin Column

Add custom columns to the WordPress admin posts list with sortable functionality

PHPwordpressintermediate
phpPreview
// Add the custom column header
function add_featured_image_column($columns) {
    // Insert after title column
    $new_columns = array();
...
#admin#custom-column#wordpress+2
1/9/2025
View

Disable Gutenberg Block Editor

Disable the Gutenberg editor and use the Classic Editor instead

PHPwordpressbeginner
phpPreview
// Method 1: Disable Gutenberg completely
add_filter('use_block_editor_for_post', '__return_false', 10);

// Method 2: Disable for specific post types only
...
#gutenberg#classic-editor#wordpress+1
1/9/2025
View

Register Custom Post Type

Complete example of registering a custom post type with all common options

PHPwordpressintermediate
phpPreview
function register_portfolio_post_type() {
    $labels = array(
        'name'                  => _x('Portfolio Items', 'Post type general name', 'textdomain'),
        'singular_name'         => _x('Portfolio Item', 'Post type singular name', 'textdomain'),
...
#custom-post-type#wordpress#development+1
1/9/2025
View