WordPress inlog pagina aanpassen

WordPress inlog pagina aanpassen geeft een professionelere look aan je website of webshop. Veel mensen zullen dit zeker waarderen. Voor een website ontwikkelaar is het leuk om de klant iets te bieden als een professionele inlog pagina.

De WordPess login pagina kan aangepast worden met een plugin maar hier bespreken we vooral hoe we dit kunnen doen zonder plugin. Alles kan aangepast worden met een klein stukje code.

WordPress inlog logo aanpassen

Het eerste waar men aan denkt bij WordPress inlog pagina aanpassen is het logo. Standaard staat er het WordPress logo. Mooier is om het logo van de website te gebruiken. Je zou hier ook je eigen logo kunnen plaatsen als je de website ontwikkelaar bent bijvoorbeeld.

Wil je alleen het WordPress login logo aanpassen plaats dan de volgende code in je functions.php.

<?php 
// Custom WordPress login logo
function clw_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(https://www.cornelisdeleeuwvanweenen.nl/wp-content/uploads/logo-cornelis-de-leeuw-van-weenen-page-speed.png);
            background-size: 100% auto;
            width: 275px;
            height: 100px;
        }
    </style>
}
add_action('login_head', 'clw_custom_login_logo');
 ?>

WordPress inlog pagina aanpassen

Als je niet alleen het login logo wilt aanpassen kan je ook de gehele WordPress inlog pagina aanpassen. Dit is min of meer hetzelfde als bovenstaande code maar met wat meer css opties. Hiermee kan je zo goed als alles aanpassen. Je zou zelf een achtergrond image kunnen gebruiken en zaken volledig verwijderen. Enige dat je hier verder voor nodig hebt is een beetje kennis van CSS en de rest wijst voor zich.

Hier wordt gebruik gemaakt van de login pagina voor deze website. Verwijder wat je niet wilt gebruiken en pas alles aan naar eigen wensen en eisen. Laat je creativiteit gaan of maak het gelijk aan de huisstijl van de website.

<?php 
// Custom WordPress login logo
function clw_custom_login_logo() { ?>
    <style type="text/css">
        // logo aanpassen
        #login h1 a, .login h1 a {
            background-image: url(https://www.cornelisdeleeuwvanweenen.nl/wp-content/uploads/logo-cornelis-de-leeuw-van-weenen-page-speed.png);
            background-size: 100% auto;
            width: 275px;
            height: 100px;
        }
        // Achtergrond pagina
        body.login {
            background-color: #f2f2f2;
        }
        // het formulier aanpassen
        .login form#loginform {
            background-color: #4676bb;
            color:#f2f2f2;
            border-color:#f68a1f;
        }
        // Links wachtwoord vergeten en terug naar ... aanpassen
        .login #backtoblog a,
        .login #nav a,
        body a {
            color:#4676bb;
        }
        .login #backtoblog a:hover,
        .login #nav a:hover,
        body a:hover {
            color:#f68a1f;
        }
        // de link Privacy policy aanpassen
        .login a.privacy-policy-link {
            color:#06aca9;
        }
        .login a.privacy-policy-link:hover {
            color:#f68a1f;
        }
        // de knop inloggen
        input#wp-submit {
            background-color:#06aca9;
            border-color:#06aca9;
            color:#f2f2f2;
            font-size:16px;
            font-weight:700;
        }
        input#wp-submit:hover {
            background-color:#f68a1f;
            color:#f2f2f2;
            border-color:#f68a1f;
        }
        input#wp-submit.button-primary:focus {
            color:#f2f2f2;
            box-shadow:0 0 0 1px #f2f2f2,0 0 0 3px #f68a1f;
        }
    </style>
}
add_action('login_head', 'clw_custom_login_logo');
 ?>

De code moet geplaatst worden in functions.php van je thema. Vergeet het niet in een child-theme te plaatsen. Als je nog geen child theme hebt maak er dan eentje. Je kan lezen hoe in WordPress child-theme maken.

Hier zijn de belangrijkste onderdelen genoemd maar deze kan je geheel aanpassen verwijderen en aanvullen naar eigen wensen. Maak er iets moois en professioneels van waar je trots op kan zijn. De bovenstaande code geeft het volgende resultaat.

WordPress inlog logo link aanpassen

Nadat de pagina helemaal is aangepast qua uiterlijk is het tijd om de puntjes op de i te zetten. Ook de link van het logo kan namelijk aangepast worden. Mooiste om een link naar de home page te gebruiken maar je kan elke link gebruiken dat je maar wilt.

Met de volgende code kan je de url van het WordPress login log vervangen met de url van de home page. Ook deze code moet geplaatst worden in het functions.php file van het thema.

<?php 
// Change login logo url with Site url
function clw_change_login_logo_url() {
    return get_bloginfo('url');
}
add_filter('login_headerurl', 'clw_change_login_logo_url');
 ?>

Als je een andere link wilt gebruiken kan je regel 4 veranderen. Verander return get_bloginfo(‘url’); in iets als return ‘https://www.cornelisdeleeuwvanweenen.nl/’; en dan krijg je het volgende:

><?php 
// Change login logo url with Site url
function clw_change_login_logo_url() {
    return 'https://www.cornelisdeleeuwvanweenen.nl/';
}
add_filter('login_headerurl', 'clw_change_login_logo_url');
 ?>

Login-pagina aanpassen met plugin

Als bovenstaande een beetje te moeilijk lijkt of dat je liever een plugin gebruikt dan is dat natuurlijk mogelijk. Er zijn vele gratis plugins te vinden om dit te doen. Als je alleen het login logo wilt aanpassen kan je kiezen voor . Als je de gehele login-pagina wilt aanpassen kan je kiezen voor

Maar als je bovenstaande code wel begrijpt zou het nog mooier zijn als je hier een plugin van maakt voor jezelf.