WordPress - CSS loginpagina en admin


Wil je de standaard loginpagina van WordPress graag een ander uiterlijk geven dan kan dit eenvoudig worden gedaan door een eigen CSS bestand toe te voegen aan de pagina. Zo kun je bijvoorbeeld eenvoudig het logo van WordPress vervangen voor een eigen logo. Het meest handig is om een apart CSS bestand, bijvoorbeeld met de naam admin.css, te plaatsen in het functions.php bestand van het geīnstalleerde thema. Ook kan de onderstaande code eventueel in een plugin geplaatst worden indien dit de voorkeur heeft.

De eerste code hieronder voegt een CSS bestand toe aan de loginpagina. De tweede code voegt een bestand toe aan de backend van WordPress zelf. Het voordeel van een extern CSS bestand is dat je alles eenvoudig in een enkel bestand kunt beheren. Het is echter ook mogelijk om met de onderstaande code een inline stylesheet toe te voegen en eventuele andere zaken. Let uiteraard wel op dat de naam van het CSS bestand correct is.

Loginpagina

function add_css_login() {
        $url = get_stylesheet_directory_uri() . '/css/login.css';
        echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('login_enqueue_scripts', 'add_css_login');


Admin

function add_css_admin() {
        $url = get_stylesheet_directory_uri() . '/css/admin.css';
        echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('admin_head', 'add_css_admin');

CSS

De onderstaande CSS kan gebruikt worden om de pagina aan te passen.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}