WordPress How-to: het design van wp-admin aanpassen

WordPress How-to: het design van wp-admin aanpassen

Geschreven op 03-10-2022 door Sven Nauta
Categorieën: WordPress Hosting

WordPress How-to: het design van wp-admin aanpassen

In deze blog lees je hoe je het standaard design van wp-admin (het beheergedeelte van je WordPress website) kunt aanpassen. Hiervoor gebruiken we de plugin Branda. Het is de ultieme tool voor het whitelabelen van de voor- en achterkant van je WordPress-site. Een van de vele trucs die het in petto heeft, is de mogelijkheid om aangepaste inlogpagina's te maken.

  • Stap 1: Plugin installeren
  • Stap 2: Template kiezen
  • Stap 3: Logo aanpassen en achtergrond
  • Stap 4: Custom labels toevoegen
  • Stap 5: Kleuren aanpassen

Stap 1: Plugin installeren

De plugin 'Branda' kun je installeren in de wp-admin. Hieronder heb ik de stappen voor je opgesomd:

  • Login op je website
  • Bij plugins klik je op 'Nieuwe plugin' en zoek je naar 'Branda'  
  • Klik op installeren en activeren
Branda plugin downloaden

Stap 2: Template kiezen

In deze stap leg ik je uit hoe je een template kiest.

  • Navigeer naar de plugin Branda aan de linkerkant en klik op Dashboard
Dashboard van Branda
  • Klik op het pennetje onder het kopje Front end >> Module >> Inlogscherm aanpassen zoals hieronder in de afbeelding te zien is
Dashboard van Branda
  • Klik op Activeren
Dashboard Front End
  • Kies een template die je leuk vindt en klik op Doorgaan
Verschilllende templates

Het template zie je dan verschijnen.

Front End template

Stap 3: Logo aanpassen en achtergrond

De taal is standaard ingesteld op wat er is ingesteld op je website. Dan gaan we nu door naar het logo aanpassen en achtergrond.

  • Klik op het kruisje om het logo aan te passen. Het logo kan aangepast door een nieuw bestand te uploaden of in de media bibliotheek.
Logo aanpassen Branda
  • Als je iets naar onder scrolt, kun je bij het kopje design aanpassingen maken voor het logo zoals hieronder is te zien.
Logo aanpassingen maken Branda
  • Je kunt ook je eigen achtergrond afbeelding uploaden.
Achtergrond afbeelding wijzigen Branda
  • Als je iets naar onder scrolt, kun je bij het kopje design aanpassingen maken voor de achtergrond zoals hieronder is te zien.
Design aanpassingen Branda

Mocht je geen logo of achtergrond willen kun je er ook voor kiezen om het weg te laten. Klik daarvoor op Verbergen.

Logo en achtergrond verbergen Branda

Stap 4: Custom labels toevoegen

De plugin heeft veel opties waarmee je elk aspect van je formulier kunt aanpassen, inclusief de mogelijkheid om elk label te wijzigen en de verschillende links te verbergen.

  • Je kunt het volgende aanpassen: gebruikersnaam invoer label, wachtwoord invoer label, login-knoptekst, "onthoud mij"-checkbox, wachtwoordveld op registratiescherm en een achtergrond afbeelding.
Custom Labels toevoegen Branda
  • Je kunt ook het design van het formulier aanpassen. Dit kun je doen als je naar onder scrolt naar design zoals hieronder is te zien.
Design formulier aanpassen Branda

Stap 5: Kleuren aanpassen

Je kunt je eigen kleuren geven, dus een white label wp-admin.

  • Als je naar onder scrolt naar Kleuren kun je daar aanpassingen uitvoeren zoals hieronder in de afbeelding is te zien voor het formulier. Boven het formulier kun je de kleuren van achtergrond aanpassen.
Kleuren aanpassen Branda
  • Zodra je inlogscherm er precies zo uitziet als je wilt, kun je een paar extra's aanpassen, zoals de foutmeldingen (die bijvoorbeeld worden weergegeven wanneer iemand een onjuist wachtwoord invoert), de login-omleidingslink, en zelfs je eigen CSS toevoegen zoals hieronder in de afbeelding te zien is.
Eigen CSS toevoegen Branda

Dit is het eindresultaat van een paar aanpassingen en het gebruiken van de Branda plugin:

Inlogscherm Branda

Mocht je vragen hebben, dan kun je contact met ons opnemen. We helpen je graag verder.