Cara mengganti logo pada halaman login WordPress default tanpa menggunakan plugin.
Kode PHP Custom Login Page Logo
PHP
/**
* Creatorio Child Theme Functions
*
* @package Creatorio_Child
* @since 1.0.0
*/
if (!defined('ABSPATH')) {
exit;
}
/**
* Enqueue parent and child theme styles
*/
function creatorio_enqueue_styles() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'creatorio-parent',
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme()->parent()->get('Version')
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'creatorio-child',
get_stylesheet_uri(),
array('creatorio-parent'), // Dependency memastikan order benar
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'creatorio_enqueue_styles', 15);
/**
* Enqueue login page styles
*/
function creatorio_login_styles() {
wp_enqueue_style(
'creatorio-login',
get_stylesheet_uri(),
array('login'),
wp_get_theme()->get('Version')
);
}
add_action('login_enqueue_scripts', 'creatorio_login_styles');
/**
* Custom login logo
*/
function creatorio_login_logo() {
$logo_url = '';
$custom_logo_id = get_theme_mod('custom_logo');
if ($custom_logo_id) {
$logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
}
if (empty($logo_url)) {
$logo_path = get_stylesheet_directory() . '/assets/images/login-logo.svg';
if (file_exists($logo_path)) {
$logo_url = get_stylesheet_directory_uri() . '/assets/images/login-logo.svg';
}
}
if (empty($logo_url)) {
return;
}
$css = sprintf(
'.login h1 a,
.login .wp-login-logo a {
background-image: url(%s);
}',
esc_url($logo_url)
);
wp_add_inline_style('creatorio-login', $css);
}
add_action('login_enqueue_scripts', 'creatorio_login_logo', 11);
/**
* Change login logo URL to homepage
*/
function creatorio_login_logo_url() {
return esc_url(home_url('/'));
}
add_filter('login_headerurl', 'creatorio_login_logo_url');
/**
* Change login logo title attribute
*/
function creatorio_login_logo_title() {
return esc_attr(get_bloginfo('name'));
}
add_filter('login_headertext', 'creatorio_login_logo_title');
Kode CSS Custom Login Page Logo
CSS
/*
Theme Name: Creatorio Child
Theme URI: https://riomastri.com
Description: Universal child theme dengan custom login page
Author: Your Name
Author URI: https://riomastri.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creatorio-child
*/
body.login {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login h1 a,
.login .wp-login-logo a {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
max-width: 320px;
height: 80px;
margin-bottom: 25px;
}
.login form {
background: #fff;
border: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: 12px;
padding: 26px 24px 20px;
}
.login form .input,
.login input[type="text"],
.login input[type="password"] {
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 10px 14px;
font-size: 14px;
transition: all 0.3s ease;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
background: #fff;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.login .button-primary {
background: #667eea;
border: 0;
border-radius: 6px;
box-shadow: none;
text-shadow: none;
font-weight: 600;
padding: 10px 20px;
width: 100%;
transition: all 0.3s ease;
}
.login .button-primary:hover {
background: #5568d3;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.login #nav a,
.login #backtoblog a {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
body.login {
padding: 0 20px;
}
.login h1 a,
.login .wp-login-logo a {
max-width: 280px;
height: 70px;
}
}