WPLounge
Home » Tutorials » Logo aanpassen op de WordPress login-pagina

Logo aanpassen op de WordPress login-pagina

Logo aanpassen op de WordPress login-pagina

Als je wilt inloggen in WordPress krijg je standaard het WordPress-logo te zien. Veel mensen vinden het fijner om hier hun eigen logo te zien. Het is heel makkelijk om het login-logo aan te passen. In dit artikel laten we zien hoe!

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Veel mensen zien liever hun eigen logo dan het WordPress-logo, want het CMS voelt dan veel meer als hun “eigen” systeem. Ook als je een website maakt voor een klant is het leuk voor de klant om hier hun eigen logo terug te zien. Zo ziet het er veel meer uit alsof het echt hun eigen systeem is. Het is een simpel maar leuk detail dat je klant zeker zal waarderen!

WordPress login-logo aanpassen

Je kunt het logo op de login-pagina van WordPress op meerdere manieren aanpassen. De makkelijkste manier is om gebruik te maken van een plugin. Toch is het niet aan te raden om overal een plugin voor te installeren. Daarom is er ook een andere manier, namelijk door een stuk code in het functions.php-bestand van je child theme te plaatsen of door diezelfde code in een eigen plugin te zetten.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

1: PHP-code in functions.php of je eigen plugin

Wanneer je een eigen site-specifieke plugin hebt op je WordPress-website, kun je deze gebruiken om de onderstaande code toe te voegen. Zo niet, dan kun je de code eventueel ook in het functions.php-bestand van het actieve WordPress-theme plakken.

function eigen_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(https://www.wplounge.nl/wp-content/uploads/2021/05/[email protected]);
			width:158px;
			height:32px;
			background-size: 158px 32px;
			background-repeat: no-repeat;
	        padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'eigen_login_logo' );

De code hierboven maakt een PHP-functie aan die het login-logo aanpast. De URL die op de regel staat die begint met “background-image” dien je te vervangen door de URL van jouw logo. Vul vervolgens bij “width” en “height” de juiste breedte en hoogte in voor je logo (in pixels). Gebruik diezelfde breedte en hoogte als “background-size” (de regel onder “height”). Wanneer je deze code hebt toegevoegd en het bestand hebt opgeslagen zal je je eigen logo te zien krijgen op de login-pagina.

2: Een plugin gebruiken

Als de methode hierboven voor jou te ingewikkeld of te technisch is, dan kun je eventueel ook gebruikmaken van een gratis WordPress-plugin zoals de Custom Login Page Customizer plugin. Na het activeren van de plugin is er een nieuw menu-item met de naam ‘Logo Customizer’. Wanneer je hier op klikt zal je het standaard loginscherm te zien krijgen met aan de linkerkant van het scherm verschillende opties om het loginscherm aan te passen.

Login scherm aanpassen

Om het logo te vervangen klik je op het menu ‘Logo options‘. Hier zijn verschillende opties te vinden om het logo aan te passen zoals de titel en de URL waar het logo naar verwijst. Onderaan de verschillende opties vind je de mogelijkheid om het logo te vervangen. Wijzig hier het logo door een afbeelding in de mediabibliotheek te selecteren. Na het vervangen van het logo is het mogelijk om de breedte en hoogte van de afbeelding aan te passen.

Aanpassen login logo

Met deze plugin is het ook mogelijk om de login tekst te vertalen of te veranderen. Naar wens zijn ook de achtergrondkleuren van het loginformulier of de pagina aan te passen.  Een andere plugin die ongeveer hetzelfde doet is My WordPress Login Logo

Meer informatie

De bovenstaande methoden zijn allebei zeer geschikt voor het aanpassen van het logo op de WordPress login-pagina. Wij raden je aan om de eerste methode te gebruiken, en dan het liefst in een eigen (site-specifieke) plugin. Zo weet je zeker dat je wijzigingen niet verloren gaan als je van WordPress-theme wisselt. Als je ervoor kiest om de PHP-code in het functions-bestand van je child theme te plakken, zorg dan dat je deze code ook in het functions.php-bestand plakt van een nieuw theme (als je een nieuw theme gaat gebruiken).

Mark Hagendijk

Mark biedt technische ondersteuning voor WordPress. Zo nu en dan maakt hij graag tijd vrij om een bijdrage te leveren aan WPLounge.

Reageer