Whitelabel opties voor de WordPress login pagina

Custom opties voor de WordPress login pagina

Je kunt de WordPress login pagina voor het dashboard van je website of webwinkel met een aantal vrij eenvoudige stappen helemaal personaliseren. Hiermee kan je voor je eigen website dan wel die van een klant ook de achterkant van de website iets persoonlijker maken.

We hebben de meest gevraagde en populaire opties voor je op een rij gezet samen met de uitleg en stappen die je moet nemen om dit door te voeren. Lees hieronder direct verder:

1. Je eigen logo weergeven

Je kunt met onderstaande code op een hele eenvoudige en snelle wijze de WordPress login pagina personaliseren en het WordPress logo vervangen door die van de website of webwinkel, dan wel die van je eigen bedrijf welke klanten vervolgens zien als zij inloggen.

Vervang bij de onderstaande code de URL en afbeeldingsnaam bij ‘background-image’ en voeg de code vervolgens toe aan het style.css bestand van je thema, vergeet vervolgens niet de LiteSpeed cache even te legen mocht je deze plugin actief ingesteld hebben staan en het resultaat zal zichtbaar moeten zijn op je WordPress login pagina.

Voeg onderstaande code toe aan het style.css bestand van je child thema:

				
					add_action( 'login_enqueue_scripts', 'hoasted_login_logo' );
 
function hoasted_login_logo() {
   ?><style type="text/css">#login h1 a, .login h1 a {
           background-image: url(/wp-content/uploads/2021/08/afbeelding.png);
           height: 150px;
           width: 250px;
           background-size: contain;
           background-repeat: no-repeat;
           background-color: transparent;
      }</style><?php
}
 
add_filter( 'login_headerurl', 'bbloomer_login_logo_link' );
 
function bbloomer_login_logo_link( $url ) {
    return home_url( '/' );
}
				
			

2. Login veld en achtergrond stijl customizen

Je kunt met onderstaande code de kleuren en stijl van de achtergrond en het login blok nog verder aanpassen door de kleur codes naar wens te vervangen met de voorbeeld code. Je kunt deze code vervolgens vanuit het WordPress dashboard in de theme editor ‘functions.php’ toevoegen.

In het geval dit niet lukt kan je ook op het cPanel account van de website inloggen, ga vervolgens naar de File manager. Je vind het bestand vervolgens terug in de volgende map:
public_html > wp-content >  themes > functions.php

Voeg onderstaande code toe aan het functions.php bestand van je thema:

				
					function login_background() {
echo ‘<style type=”text/css”>body { background: #474242; }
.login form { background: #3d2e2e; }</style>’;
}
add_action(‘login_head’, ‘login_background’);
				
			

3. Custom opties met behulp van SeedProd

Je kunt vanuit de Plugins sectie binnen het WordPress plugin zoeken naar ‘SeedProd’ en deze vervolgens installeren en activeren. Zodra je dit hebt gedaan kun je naar de plugin overzicht pagina gaan vanuit het menu, hier kan je de ‘login page’ vervolgens activeren waarna je deze geheel kunt customizen zonder daar verder code technisch kennis van zaken voor te hebben.

Bepaalde functies zijn wel enkel voor de Premium versie beschikbaar echter kunt je hiermee ook met de kosteloze versie al aardig wat aanpassingen mee doorvoeren.

Samenvatting

We hopen dat je met bovenstaande opties je WordPress of WooCommerce site de login pagina van het dashboard nog wat verder hebt kunnen personaliseren om zo een leuke finishing touch voor je eigen of een klant zijn website of webwinkel kunt geven!

Laat het gerust aan ons weten als je hier niet uitkomt of als je nog een vraag hebt over iets geheel anders, we staan dagelijks voor je klaar. Klik hier om direct contact met ons op te nemen.

Delen

Deel op facebook
Deel op linkedin
Deel op twitter
Deel op email

Schrijf je in voor onze nieuwsbrief

Ontvang updates en leer de nieuwste mogelijkheden.

Gerelaterde artikelen