Waarom (en hoe) jij je WordPress inlogpagina moet aanpassen

Combinatie tussen een responsive website en een app

De WordPress inlogpagina geeft alle beheerders van je website toegang tot het systeem. Helaas ziet deze pagina er standaard uit en is er geen mogelijkheid vanuit WordPress om deze makkelijk aan te passen.

Het aanpassen van deze pagina kan heel belangrijk zijn als jouw klanten of werknemers ook gebruik maken van het systeem. Ze moeten het gevoel krijgen dat ze op jouw website of webshop inloggen en niet bij "nog een WordPress website". Door deze pagina niet aan te passen verlies je een stuk gebruikerservaring.

Hulp nodig met aanpassen? Geen probleem! Stuur een appje of mailtje en dan kunnen we er samen naar kijken.

Ga je liever zelf aan de slag? Nice! Lees gelijk verder om te beginnen.

wordpress standaard inlogpagina

De standaard WordPress inlogpagina... Gaap.

In deze tutorial laat ik je zien hoe je deze pagina gemakkelijk aan kunt passen. We veranderen onder andere de kleuren, het logo en we halen onbelangrijke elementen eruit. Om dit voor elkaar te krijgen gaan we basis PHP en CSS gebruiken.

Geen zorgen! Ook al ben je niet bekend met programmeertalen, dan nog is dit makkelijk te doen en het kost slechts enkele minuten.

Wat gaan we met de WordPress inlogpagina doen?

Na het lezen van deze pagina kun je het volgende aan de inlogpagina aanpassen:

  1. De achtergrond veranderen met een kleur of afbeelding
  2. Het WordPress logo vervangen met je eigen logo
  3. De 'wachtwoord vergeten' knop verwijderen
  4. De 'terug naar website' knop verwijderen
  5. Het uiterlijk van het formulier wijzigen

Voordat we codes gaan kloppen, laat ik je hier het eindresultaat zien:

wordpress inlogpagina aanpassen

Het eindresultaat: een moderne pagina die overeenkomt met de huisstijl.

1. De allereerste stap is om een nieuwe stylesheet aan te maken. Deze maak je aan in de map van het actieve thema. Deze map kun je het snelste vinden door naar het volgende pad te gaan met behulp van een FTP-programma:

  • /wp-content/themes/naam_van_je_thema
  • De plek waar je themabestanden staan

Nog nooit met FTP gewerkt? No worries, in deze blog leg ik uit hoe FTP werkt samen met een simpele oefening.

In de map van je thema maak je een nieuw tekstbestand aan en deze geef je de naam: login-page.css (let op dat je de .txt extensie veranderd in .css)

2. Nu moeten we WordPress dit bestand laten inladen. Open je functions.php bestand (deze vind je in dezelfde map) en voeg de volgende code toe:

Sla dit bestand op en deze kun je ook gelijk afsluiten.

3. Tijd om te beginnen met stijlen! Open het aangemaakte login-page.css bestand en begin met het aanpassen van de achtergrond en het vervangen van het logo. Met de volgende code kun je deze wijzigen:

De bovenstaande stukjes code vind ik het allerbelangrijkste. Door de achtergrond en het logo te veranderen ben je in één keer het gevoel van een standaard WordPress site kwijt. Dit gevoel geef je ook mee aan de andere beheerders en klanten die hier gebruik van maken.

'Wachtwoord vergeten?' link weghalen

Een goede toevoeging is om beide links onder het formulier eruit te halen. De 'Wachtwoord vergeten?' link klinkt heel handig, maar als er een gebruiker gehackt wordt kunnen ze het e-mailadres omzetten en via deze weg achter het gebruikte wachtwoord komen. Om het ze iets moeilijker te maken kun je deze (en de andere links) weghalen met het volgende stukje code:

The final touch

Om het helemaal af te maken kun je ook het formulier aanpassen. Ik hou dit het liefste zo simpel en modern mogelijk, maar je bent hier natuurlijk helemaal vrij in. Experimenteer vooral met verschillende CSS codes en kijk wat er veranderd.

wordpress custom inlogpagina

Een alternatieve variant van de inlogpagina

Dit is de CSS die ik zelf heb gebruikt voor het formulier. Een goede oefening is om mijn code als basis te gebruiken en deze zelf aan te passen naar de stijl van je eigen website.

Persoonlijk, uniek en meer beleving voor je website

Dat was 'm dan! Met een paar kleine aanpassingen is het je gelukt om een persoonlijke inlogpagina te maken die aansluit bij de rest van je huisstijl.

Veel designers besteden hier geen aandacht aan, maar als je een site voor een klant of merk maakt is het zonde om dit niet toe te voegen. Als je veel mensen hebt die moeten inloggen is het veranderen van deze pagina de moeite waard. Het is een extra mogelijkheid om je merk te laten zien en geeft een professionele indruk aan de gebruiker.

Heb jij je loginpagina aangepast? Ik ben heel benieuwd en laat vooral een link achter in de reacties hieronder.

Kom je ergens niet uit of wil je meer mogelijkheden weten? Neem gerust contact met mij op en dan help ik je graag.