Je hebt een site gebouwd voor een klant of voor jezelf, maar de login pagina is nog standaard met het WordPress logo. Is het niet veel leuker om deze pagina te personaliseren met een eigen logo in plaats van het WordPress logo? Dat gaan we in deze tutorial doen en dat doen we zonder plugins….nou ja bijna zonder plugin. Want je hebt wel een child theme nodig en dat is het makkelijkt te genereren met een plugin. Daarna heb je deze niet meer nodig en kan deze verwijderd worden.
Zorg als eerst ervoor dat je een back-up hebt en dit niet op een productie website doet. Het is dan een kleine wijziging, maar aanpassingen in de code van een productie website is nooit een goed plan, zeker niet op vrijdag 😉
Als eerst zorgen we ervoor dat we een child theme hebben
Heb je nog geen child theme? Dan gaan we er als eerst eentje aanmaken, want zonder child theme gaat al je werk verloren bij de volgende update van je thema. Installeer hiervoor de plugin WP Child Theme Generator. Activeer deze en ga in je admin menu naar Weergave en kies Child Theme Gen.
Kies bovenin je actieve theme. Vink de checkbox Create & Active aan om het thema gelijk te activeren. Klik dan nu beneden op de knop Create Child Theme. Verwijder de plugin, want deze hebben we niet meer nodig.
Het WordPress logo vervangen door onze eigen afbeelding
Nu we een child theme hebben, worden onze wijzigingen behouden. We gaan nu het WordPress logo vervangen voor een eigen logo. Dit kan op twee manieren, via het admin menu, of via een code editor met behulp van FTP. We gaan voor de eerste en makkelijkste optie. Hiervoor hebben we natuurlijk eerst een logo nodig.
Ik heb als voorbeeld het BonWP logo. Deze gaan we toevoegen aan de mediabibliotheek. Hiervoor kiezen we in het menu voor Media, vervolgens Bibliotheek. Hier kunnen we bovenin een nieuw bestand uploaden.
De afbeelding verschijnt onderin. Klik erop en je ziet aan de rechterkant de Bestand URL met een knop eronder om deze naar je klembord te kopiëren. Sla deze URLeven ergens op, bijvoorbeeld in Kladblok of iets dergelijks, want deze hebben we later nodig.
Nu gaan we het standaard WordPress logo op de login pagina vervangen. Dit doen we met een stukje code. Nu we een child theme hebben, kunnen we dit gemakkelijk toevoegen.
Ga naar Weergave en Thema bestand editor. Hier hebben we de mogelijkheid om onze eigen css toe te voegen. Kies rechts voor het Theme Functions bestand (functions.php).
Onderaan voegen we een stukje code toe om het WordPress logo op de login pagina te vervangen.
Voeg de volgende code toe:
function mijn_eigen_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://bonwp.com/wp-content/uploads/2023/11/logo250x70-2.png);
height:65px;
width:320px;
background-size: 250px 70px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'mijn_eigen_login_logo' );In de background-image plaats je de URL die je bewaard had van je afbeelding. Dit wordt dus:
backgroud-image: url( PLAK HIER JE URL );De background-size is de grootte van je afbeelding. Mijn logo is 250px breed en 70px hoog, daarom heb ik dit aagepast naar:
background-size: 250px 70px;De login pagina ziet er nu veel beter uit met je eigen gekozen afbeelding.
De link en de title van de nieuwe afbeelding aanpassen
Er is nog een puntje wat we kunnen verbeteren. De link van de afbeelding verwijst naar https://wordpress.org en de titel is Mede mogelijk gemaakt door WordPres. Dit kunnen we op dezelfde manier ook aanpassen, zodat het logo naar je eigen website linkt.
Om dit aan te passen, voegen we nog een stukje code toe onder de code die we zojuist toegevoegd hebben. Ga hiervoor weer terug naar de Thema bestand editor en voeg in Theme Functions toe onder de code die we al toegevoegd hebben.
function mijn_eigen_login_logo_url() {
return home_url();
} add_filter( 'login_headerurl', 'mijn_eigen_login_logo_url' );
function mijn_eigen_login_logo_url_title() {
return 'Mede mogelijk gemaakt door WordPress en BonWP'; }
add_filter( 'login_headertext', 'mijn_eigen_login_logo_url_title' ); De regel return_home_url() zorgt ervoor dat je voortaan door wordt gestuurd naar de homepage van je website.
De regel return ‘Mede mogelijk gemaakt door WordPress en BonWP’ past de titel aan van de link.
Tussen de ‘’ kun je je eigen tekst plaatsen.
Nu is je login pagina gepersonaliseerd! De klant zal hier zeker blij van worden, want het ziet er veel persoonlijker uit. Natuurlijk is dit ook leuk voor je eigen website.
