Een unieke WordPress login pagina maken

Een van de finishing touches van een WordPress website is het customizen van de login pagina. Standaard zie je hier het WordPress logo (met een link naar de WordPress website) en is de kans groot dat de kleurstellingen niet geheel aansluiten bij het ontwerp van de website. Daarom is het slim om ook de WordPress login pagina te personaliseren. Maar hoe doe je dat?

Hoe maak je een unieke WordPress login pagina?

1. Maak om te beginnen een nieuw css bestand aan waar de styling van de login pagina in komt te staan. Geef het css bestand een logische naam, bijvoorbeeld login.css en sla deze op in de styles map van je thema.
2. Laat WordPress weten dat er een nieuw css bestand gelinkt moet worden op de login.php pagina. Zet onderstaande code in functions.php. Verander de stylesheet directory met de structuur van je eigen thema.

function webdesignert_custom_login() {
	echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/css/login.css" />';
}
add_action('login_head', 'webdesignert_custom_login');

3. Nu het nieuwe css bestand is gelinkt kun je aanpassingen gaan doen aan de pagina. Bekijk hieronder enkele voorbeelden van mogelijke aanpassingen.

Pas de achtergrond aan

body.login {
	background-image: url('../img/login-background.jpg');
	background-size: cover;
	background-position: center;
}

Pas het logo aan

body.login h1 a {
	background-image: url('../img/logo.svg');
}

Als je het standaard WordPress logo hebt vervangen door je eigen logo wil je natuurlijk niet dat deze nog steeds linkt naar de officiële WordPress website. Gebruik onderstaande code in je functions.php om de URL en de title te wijzigen.

function webdesignert_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'webdesignert_login_logo_url' );

function webdesignert_login_logo_url_title() {
	return 'Design & Development door Geert Molenaar';
}
add_filter( 'login_headertitle', 'webdesignert_login_logo_url_title' );

Het login formulier aanpassen

body.login form {
	margin: 0;
	padding: 2rem;
	box-shadow: none;
}

body.login form label {
	color: #2d98da;
	font-weight: 600;
}

body.login form input[type="text"],
body.login form input[type="password"] {
	margin-top: .5rem;
	background-color: #f0f0f0;
	border: 0 none;
	box-shadow: none;
	padding: .3rem 1rem .5rem 1rem;
}

body.login form input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
    appearance: none;
	background-color: #f0f0f0;
	border: 0 none;
	box-shadow: none;
	display: inline-block;
	position: relative;
}

body.login form input[type="submit"] {
	display: block;
	height: initial;
	width: 100%;
	margin-top: 2rem;
	box-shadow: none;
	border: 0 none;
	border-radius: 25px;
	text-shadow: none;
	font-weight: 600;
	padding: .2rem .5rem .3rem .5rem;
	background-color: #2d98da;
}

Maak gebruik van de ‘element inspecteren’ tool om classes en id’s van andere elementen te achterhalen en ook deze aan te passen. Let op dat je ook rekening houd met de weergaven van foutmeldingen. Succes!