Modifier le formulaire de login dans WordPress

Avec WordPress, j’ai récemment eu le besoin d’appeler le formulaire de connexion directement dans mes templates grâce à la fonction wp_login_form(). Cependant, cette fonction affiche un formulaire très basique. Il me manquait pour rendre le formulaire plus accessible et plus élégant un fieldset et une legend à l’intérieur de ce dernier.

Après avoir cherché sur Google, mais n’ayant trouvé rien de très convaincaint, j’ai pensé aux hooks de WordPress. J’ai tendance à souvent utiliser des hooks glanés sur StackOverflow ou sur le codex, mais ici très peu d’information sur la méthode à employer.

Si vous ne le savez pas, les hooks sont des moyens de modifier certaines parties de WordPress (ici l’affichage du formulaire de connexion) sans toucher au code même, mais en utilisant des fonctions dédiées à cette tâche. Il existe environ 2000 hooks (à l’heure ou j’écris ces lignes). Dur donc de trouver le bon en fouillant le code source. Mais j’ai trouvé une référence super utile avec une liste de tous les hooks disponible sur WordPress. Et apparemment tenu à jour. Voici le lien : Adam Brown.

J’ai donc recherché « login » parmi les hooks, et j’ai trouvé login_form_top. Voici qui m’intéresse. Si je suis la documentation et regarde dans le code source je peux voir qu’il est écrit dans le code de WordPress que ce hook ajoute du contenu juste après la fermeture de l’élément form. Juste ce dont j’ai besoin.

Il faut ensuite utiliser ce hook. Pour cela, il faut utiliser la fonction add_filter('nom_du_hook', 'fonction_a_appeler');. Cette fonction retournera le code html qui s’insérera après le tag form.

PHP

add_filter('login_form_top', 'add_legend_fieldset_top');
function add_legend_fieldset_top(){
    return "<fieldset>
                <legend>" . __('Login', 'nom_du_theme') . "</legend>";
}
add_filter('login_form_bottom', 'add_legend_fieldset_bottom');
function add_legend_fieldset_bottom(){
    return "</fieldset>";
}

Ici on peut voir que j’ai aussi ajouté le hook correspondant à la fermeture de l’élément fieldset. Cela fonctionne de la même facon que le hook pour le top.

Et voilà ensuite le résultat que j’obtiens sur mon formulaire :

formulaire-with-fieldset