Brand WordPress Login Page

Add this to the Code Snippets Plugin to show Company Details on the 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();

Please Share

Help us to create Amazing Content!