[WordPress] Custom trang Login

Hướng dẫn custom trang login tại example.com/wp-login.php. Dưới đây là các đoạn snippet code đặt trong function.php của child theme đang hoạt động sẽ giúp bạn thay đổi UI của trang Login mặc định dễ dàng

Thay logo trong trang Login WordPress

function devpd_custom_login_logo() {
    echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/images/logo-login.gif) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'devpd_custom_login_logo');

Thay url của logo trong trang Login WordPress

function devwp_change_wp_login_url() {
    return bloginfo('url');
}
add_filter('login_headerurl', 'devwp_change_wp_login_url');

Thay đổi title của trang Login WordPress

function devpd_change_wp_login_title() {
    return get_option('blogname');
}
add_filter('login_headertitle', 'devpd_change_wp_login_title');

Thêm file JavaScript và Style vào trong Login WordPress

function devpd_login_logo() {
   wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/assets/css/custom-login.css' );
   wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/assets/js/custom-login.js' );
}
add_action( 'login_enqueue_scripts', 'devpd_login_logo' );

Và nhớ thêm 2 file js và css vào đúng thư mục khai báo ở trên