Brand WordPress Login Page

/**
 * Snippet Name: Handy Admin Tools
 * Description: Handy Admin Tools is a WordPress plugin designed to enhance the admin experience by providing customized login screen options. This includes the ability to change the login logo, set a custom URL for the logo link, and add a designer/developer credit link under the login form.
 * Version: 0.1
 * Authors: Mark Harris & Imran Siddiq
 *
 * This plugin allows WordPress site administrators to:
 * - Customize the WordPress login screen logo.
 * - Specify the height and width for the login logo.
 * - Set a custom URL for the login logo, allowing the logo to link to any URL.
 * - Add a designer/developer credit link under the login form, including customizable anchor text and URL.
 *
 * Usage:
 * - Navigate to the "Handy Admin Tools" menu in the WordPress admin dashboard.
 * - Use the provided settings fields to customize the login screen as desired.
 * - Save changes to see the effects on the WordPress login page.
 *
 * Note:
 * - It's recommended to use proper image sizes for the login logo to ensure optimal display.
 * - Ensure the plugin is kept up-to-date with WordPress updates for compatibility.
 */

class HandyAdminTools
{
    public function __construct()
    {
        add_action("admin_menu", [$this, "add_admin_menu"]);
        add_action("login_head", [$this, "customize_login_logo"]);
        add_action("admin_init", [$this, "register_settings"]);
        add_action("admin_enqueue_scripts", [$this, "enqueue_media_uploader"]);
    }

    public function enqueue_media_uploader()
    {
        wp_enqueue_media();
        wp_enqueue_script(
            "handy-admin-tools-script",
            plugin_dir_url(__FILE__) . "handy-admin-tools.js",
            ["jquery"]
        );
    }

    public function add_admin_menu()
    {
        add_menu_page(
            "Handy Admin Tools",
            "Handy Admin Tools",
            "manage_options",
            "handy-admin-tools",
            [$this, "admin_page_html"],
            "dashicons-admin-tools"
        );
    }

    public function admin_page_html()
    {
        ?>
        <div class="wrap handy-admin-tools">
            <h1>Handy Admin Tools</h1>
            <form method="post" action="options.php">
                <?php
                settings_fields("handy-admin-tools-settings");
                do_settings_sections("handy-admin-tools-settings");
                submit_button();
                ?>
            </form>
        </div>
        <style>
            /* Custom CSS for the admin page */
            .wrap.handy-admin-tools {
                padding: 20px;
                background-color: #f5f5f5;
                border: 1px solid #ddd;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            }

            .handy-admin-tools h1 {
                font-size: 28px;
                margin-bottom: 20px;
                color: #333;
            }

            .handy-admin-tools input[type="text"],
            .handy-admin-tools input[type="number"],
            .handy-admin-tools input[type="url"] {
                width: 100%;
                padding: 10px;
                margin-bottom: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            .handy-admin-tools .button {
                background-color: #0073e6;
                color: #fff;
                border: none;
                border-radius: 5px;
                padding: 10px 20px;
                cursor: pointer;
            }

            .handy-admin-tools .description {
                font-style: italic;
                margin-top: 5px;
                color: #777;
            }
        </style>
        <?php
    }

    public function register_settings()
    {
        register_setting(
            "handy-admin-tools-settings",
            "handy_admin_tools_login_logo"
        );
        register_setting(
            "handy-admin-tools-settings",
            "handy_admin_tools_logo_width"
        );
        register_setting(
            "handy-admin-tools-settings",
            "handy_admin_tools_logo_height"
        );

        register_setting("handy-admin-tools-settings", "custom_logo_link", [
            "type" => "string",
            "default" => "",
            "sanitize_callback" => "esc_url_raw",
        ]);

        register_setting("handy-admin-tools-settings", "designer_text", [
            "type" => "string",
            "default" => "",
            "sanitize_callback" => "sanitize_text_field",
        ]);

        add_settings_section(
            "handy_admin_tools_main",
            "Simple Login Editor",
            null,
            "handy-admin-tools-settings"
        );

        add_settings_field(
            "login_logo",
            "Login Logo",
            [$this, "login_logo_field_html"],
            "handy-admin-tools-settings",
            "handy_admin_tools_main"
        );
        add_settings_field(
            "logo_width",
            "Logo Width",
            [$this, "logo_width_field_html"],
            "handy-admin-tools-settings",
            "handy_admin_tools_main"
        );
        add_settings_field(
            "logo_height",
            "Logo Height",
            [$this, "logo_height_field_html"],
            "handy-admin-tools-settings",
            "handy_admin_tools_main"
        );
        add_settings_field(
            "custom_logo_link",
            "Designer / Developer URL",
            [$this, "custom_logo_link_field_html"],
            "handy-admin-tools-settings",
            "handy_admin_tools_main"
        );
        add_settings_field(
            "designer_text",
            "Designer/Developer Text",
            [$this, "designer_text_field_html"],
            "handy-admin-tools-settings",
            "handy_admin_tools_main"
        );
    }

    public function login_logo_field_html()
    {
        $login_logo = get_option("handy_admin_tools_login_logo"); ?>
        <input type="text" id="handy_admin_tools_login_logo" name="handy_admin_tools_login_logo" value="<?php echo esc_attr($login_logo); ?>" />
        <input type="button" class="button" id="handy_admin_tools_upload_button" value="Upload Logo" />
        <p class="description">Recommended size: 200x100 pixels. Click 'Upload Logo' to select an image from the media library.</p>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                $('#handy_admin_tools_upload_button').click(function(e) {
                    e.preventDefault();
                    var image = wp.media({ 
                        title: 'Upload Logo',
                        multiple: false
                    }).open()
                    .on('select', function(e){
                        var uploaded_image = image.state().get('selection').first();
                        var image_url = uploaded_image.toJSON().url;
                        $('#handy_admin_tools_login_logo').val(image_url);
                    });
                });
            });
        </script>
        <?php
    }

    public function logo_width_field_html()
    {
        $logo_width = get_option("handy_admin_tools_logo_width"); ?>
        <input type="number" id="handy_admin_tools_logo_width" name="handy_admin_tools_logo_width" value="<?php echo esc_attr($logo_width); ?>" min="50" max="500" />
        <p class="description">Recommended range: 50px to 500px. It's best to maintain the original aspect ratio of your logo.</p>
        <?php
    }

    public function logo_height_field_html()
    {
        $logo_height = get_option("handy_admin_tools_logo_height"); ?>
        <input type="number" id="handy_admin_tools_logo_height" name="handy_admin_tools_logo_height" value="<?php echo esc_attr($logo_height); ?>" min="50" max="300" />
        <p class="description">Recommended range: 50px to 300px. Maintaining the aspect ratio of your logo for the best visual appearance is advised.</p>
        <?php
    }

    public function custom_logo_link_field_html()
    {
        $custom_logo_link = get_option("custom_logo_link", ""); ?>
        <input type="url" id="custom_logo_link" name="custom_logo_link" value="<?php echo esc_url($custom_logo_link); ?>" />
        <p class="description">Enter the URL of the designer or developer's website.</p>
        <?php
    }

    public function designer_text_field_html()
    {
        $designer_text = get_option("designer_text", ""); ?>
        <input type="text" id="designer_text" name="designer_text" value="<?php echo esc_attr($designer_text); ?>" />
        <p class="description">Enter the text for the designer/developer link.</p>
        <?php
    }

    public function customize_login_logo()
{
    $login_logo = get_option("handy_admin_tools_login_logo");
    $logo_width = get_option("handy_admin_tools_logo_width");
    $logo_height = get_option("handy_admin_tools_logo_height");
    $custom_logo_link = get_option("custom_logo_link");
    $designer_text = get_option("designer_text");

    if ($login_logo) {
        add_filter("login_headerurl", function () use ($custom_logo_link) {
            return !empty($custom_logo_link) ? esc_url($custom_logo_link) : esc_url(home_url("/"));
        });

        echo '<style type="text/css"> 
        .login h1 a { 
            background-image: url(' . esc_url($login_logo) . ') !important; 
            background-size: ' . esc_attr($logo_width) . 'px ' . esc_attr($logo_height) . 'px !important; 
            height: ' . esc_attr($logo_height) . 'px !important; 
            width: ' . esc_attr($logo_width) . 'px !important; 
            display: block; 
        }
        .custom-designer-link {
            text-align: center; 
            margin-top: 20px;
            padding: 10px;
            background-color: #f1f1f1;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        </style>';

        add_action('login_footer', function() use ($custom_logo_link, $designer_text) {
            if (!empty($designer_text) && !empty($custom_logo_link)) {
                echo '<div class="custom-designer-link"><a href="' . esc_url($custom_logo_link) . '" target="_blank">' . esc_html($designer_text) . '</a></div>';
            }
        });
    }
}

}

new HandyAdminTools();