Custom login pagina

De WordPress CMS loginpagina kun je op maat aanpassen. Handig als je meerdere websites gebruikt, dan vergis je je niet zo snel.

WordPress custom login pagina
Links de standaard WordPress login pagina, rechts een aangepaste versie.

De WordPress login pagina bestaat uit de volgende onderdelen:

  • WordPress logo
  • inlog formulier
  • footer

Het WordPress logo linkt bovendien naar de wordpress.org website.

Deze pagina kan geheel naar eigen smaak worden ingericht. Ik doe vaak het volgende:

  • klant logo ipv WordPress logo
  • verwijzing naar mijn website

Met deze niet heel ingewikkelde aanpassingen heb ik een op maat gemaakte loginpagina. Herkenbaar voor de klant en met een beetje branding voor mij. Dit kan uiteraard allemaal met een plugin, maar ik geef de voorkeur aan maatwerk.

Klant logo

Het WordPress logo vervang ik door een banner met daarin het logo van de klant en een verwijzing naar mijn website. Om dit werkend te krijgen doe je het volgende:

  1. Maken custom login banner
  2. Custom login functies aanmaken

1. Custom login banner

De banner moet voldoen aan de volgende specificaties:

  • minimaal 80px hoog
  • minimaal 80px en maximaaal 320px breed
  • .png formaat

Plaats de banner in je child theme directory. Het pad naar dit bestand heb je straks nodig.

2. Custom login functies

Om de custom login banner te gebruiken is onderstaande functie beschikbaarDeze functie komt van de wordpress.org pagina over ‘Customizing the Login Form’.. Deze plaats je in je child theme functions.php.

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
        height:65px;
        width:320px;
        background-size: 320px 65px;
        background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

De volgende gegevens kun je naar wens aanpassen:

  • naam functie my_login_logo()
  • url naar custom banner: /images/site-login-logo.png
  • afmetingen banner

Je kunt nu je custom banner zien op de inlogpagina (www.jewebsite.nl/wp-login.php).

Verwijzing naar eigen website

Voor het beetje branding laat ik de banner linken naar mijn eigen website. Daarvoor kun je de volgende functies gebruiken:

function my_login_logo_url() {
    return "http://www.jewebsite.nl";
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

De volgende gegevens kun je naar wens aanpassen:

  • naam functie my_login_logo_url en my_login_logo_url_title()
  • url van de website waarnaar je wilt linken
  • Your Site Name and Info

Bronnen / verder lezen

Customizing the Login Form op wordpress.org