Standaard bestaat de inlogpagina van je WordPress website uit een standaard WordPress logo. Hoewel dit een simpel en mooi logo is, is het natuurlijk veel leuker en professioneler als je hier je eigen logo hebt staan. Om dit voor elkaar te krijgen kan je ervoor kiezen om een plugin te gebruiken, of door zelf een stukje code op je website aan te passen.

Optie 1: De plugin
Een simpele plugin die zich alleen focust op het aanpassen van het logo is Uber Login Logo. Dit is ook de plugin die in dit artikel behandeld zal worden. Voor het geval je meer wilt aanpassen dan alleen het logo; daar zijn ook plugins voor. Neem bijvoorbeeld eens een kijkje bij de Custom Login plugin.

Nu weer terug naar waar we voor kwamen: het aanpassen van het logo. Op het moment dat je de Uber Login logo plugin hebt geïnstalleerd en geactiveerd, is hij te vinden onder “Instellingen > Uber Login Logo”. Voordat je hierheen gaat, is het handig om alvast een afbeelding te uploaden naar je website die je wilt gebruiken als nieuw logo. Om dit te doen ga je naar “Media > Uploaden”. Daar aangekomen upload je de betreffende afbeelding, of je zoekt hem op in je bestaande bibliotheek als je dit al eens had gedaan. Let er bij het gebruik op dat je logo er op z’n mooist uit kom te zien als hij niet breder is dan 320px (indien nodig kan je de afbeelding naar dit formaat bijwerken in de media bibliotheek).

Als je de geschikte afbeelding hebt gevonden, klik je erop en zie je vervolgens rechts de bestands URL staan. Kopieer de link die je hier ziet, want die ga je zo nodig hebben.

In het admin dashboard ga je naar “Instellingen > Uber Login Logo” en daar voer je de zojuist gekopieerde bestands url in. Als je vervolgens up “upload image” klikt, wordt de afbeelding ingesteld. Wanneer je nu uitlogt en naar de login pagina gaat, zal daar je nieuwe logo zichtbaar moeten zijn.

Optie 2: Handmatig logo aanpassen
Het is ook mogelijk om het logo handmatig aan te passen, zodat je geen extra plugin hoeft te installeren. Hiervoor moet je het functions.php bestand openen en hieraan de volgende code toevoegen (of liever een child theme maken en het daar aan de functions.php toevoegen):

add_action("login_head", "my_login_head");
function my_login_head() {
    echo "
    <style>
    body.login #login h1 a {
         background: url('pad/naar/afbeelding.png’) no-repeat scroll center top transparent;
         height: XXpx;
         width: XXpx;
         }
     </style>
     ";
}

In dit stukje code moet je het “pad/naar/afbeelding/png” vervangen met het pad naar je afbeelding en de “XX” bij “height” en “width” moet je vervangen door de daadwerkelijke afmetingen van de afbeelding.

Het idee achter de code is dat tijdens het laden van de login pagina, de huidige CSS wordt overschreden met degene die je hier definieert in de code. Zo wordt er dus een nieuwe achtergrond afbeelding ingesteld met bijbehorende hoogte en breedte.

Michel Kraaijeveld

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.