Vous avez besoin d’un bouton « Connexion » dans le menu qui se transforme automatiquement en « Déconnexion » après authentification ? Ce besoin revient sur presque tous les sites avec inscription : forums, boutiques en ligne, LMS, portails membres, et même les blogs avec des commentateurs.

Auparavant, l’extension baw-login-logout-menu gérait cela. En juin 2025, son auteur a demandé son retrait du répertoire WordPress.org. L’extension n’avait pas été mise à jour depuis 9 ans, utilisait la fonction create_function supprimée de PHP 8 et contenait une vulnérabilité XSS. Dans la pratique, deux sites sur trois où nous la rencontrions étaient déjà passés à des solutions modernes.

Voici deux méthodes fonctionnelles qui font exactement la même chose : une rapide via une extension et une complète avec votre propre code. Toutes deux ont été testées sur les versions actuelles de WordPress et PHP.

💡 Aperçu rapide :

• Installez l’extension Login Logout Menu, glissez l’élément dans votre menu et configurez les redirections.
• Ajoutez le filtre wp_nav_menu_items au fichier functions.php de votre thème enfant pour un contrôle total.
• Intégrez les icônes Font Awesome via Better Font Awesome ou une ligne wp_enqueue_style.

Méthode 1 : extension Login Logout Menu, rapide et sans code

Un remplacement moderne pour l’extension obsolète baw-login-logout-menu, l’extension Login Logout Menu par WPBrigade. Version 1.5.2, compatible avec WordPress 6.9 et PHP 8.3. Contrairement à son prédécesseur, elle ne nécessite pas de manipuler #bawloginout# dans le champ URL : tout fonctionne via l’interface native des menus.

Installez-la via Extensions → Ajouter, recherchez login-logout-menu. Après activation, ouvrez Apparence → Menus. Dans la colonne de gauche, vous verrez un bloc Login/Logout/Register/Profile avec six éléments. Le plus couramment utilisé, Login | Logout : il affiche automatiquement « Connexion » pour les visiteurs et « Déconnexion » pour les utilisateurs authentifiés.

Glissez-le dans le menu souhaité. Dépliez l’élément ajouté et saisissez l’URL de redirection après connexion et après déconnexion. Laissez les champs vides et l’utilisateur reste sur la même page. Saisissez /my-account/ et après connexion, il atterrira sur le tableau de bord de son compte.

L’extension ajoute également les éléments « Register », « Profile », « Username » et « Reset Password ». Ils sont optionnels, mais pour un site avec espace membres, le profil et l’inscription dans le menu ont du sens.

• Avantages : zéro code, configuration en une minute, fonctionne avec n’importe quel menu bloc ou classique.
• Inconvénients : une extension de plus dans l’administration. Pour 90 % des sites, ce n’est pas un problème.
• Prix : gratuit, téléchargement depuis WordPress.org.

Méthode 2 : filtre wp_nav_menu_items, contrôle total du balisage

Vous ne voulez pas installer une extension pour un seul bouton ? La tâche se résout avec le filtre wp_nav_menu_items. Le code se place dans le fichier functions.php de votre thème enfant ou via l’extension Code Snippets. Dans le thème parent, le fichier sera écrasé lors des mises à jour.

Ajoutez ceci au fichier functions.php de votre thème enfant :

1
/**
2
 * Adds a login/logout button to the specified menu.
3
 */
4
add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
 
6
function sdstudio_add_loginout_link( $items, $args ) {
7
    // Replace 'primary' with the slug of your menu
8
    if ( 'primary' !== $args->theme_location ) {
9
        return $items;
10
    }
11
 
12
    if ( is_user_logged_in() ) {
13
        $link  = '<li class="menu-item menu-item-logout">';
14
        $link .= '<a href="' . wp_logout_url( home_url() ) . '">Log Out</a>';
15
        $link .= '</li>';
16
    } else {
17
        $link  = '<li class="menu-item menu-item-login">';
18
        $link .= '<a href="' . wp_login_url( get_permalink() ) . '">Log In</a>';
19
        $link .= '</li>';
20
    }
21
 
22
    return $items . $link;
23
}

Le filtre wp_nav_menu_items se déclenche à l’affichage de chaque menu. La vérification theme_location garantit que le bouton n’apparaît qu’à un seul endroit, pas dans tous les menus à la fois. is_user_logged_in() détermine le statut : true pour un utilisateur authentifié, false pour un visiteur. Les fonctions wp_login_url() et wp_logout_url() renvoient des URL correctes avec des jetons nonce, plus sûres que de coder en dur /wp-login.php.

Après avoir ajouté le code, un lien texte «Log In» ou «Log Out» apparaît dans le menu. Sans styles supplémentaires, il hérite de la mise en forme du thème.

• Avantages: zéro plugin, contrôle total du HTML et du CSS.
• Inconvénients: vous devez connaître le theme_location du menu. Si vous ne le connaissez pas, ouvrez le fichier header.php de votre thème, trouvez l’appel à wp_nav_menu() et vérifiez le paramètre theme_location. Le plus souvent, il s’agit de primary, header ou main.
• Prix: gratuit, le code vous appartient.

Bonus: icônes Font Awesome pour les boutons de connexion et de déconnexion

Les textes «Log In» et «Log Out» fonctionnent, mais un bouton avec une icône attire davantage l’attention. La solution la plus simple: le plugin Better Font Awesome (plus de 200 000 installations). Installez-le, activez-le, les icônes sont disponibles immédiatement: le plugin récupère automatiquement la dernière version.

Pour la méthode avec code, nous allons ajouter les icônes FA 6 directement dans le balisage du filtre:

1
if ( is_user_logged_in() ) {
2
    $link  = '<li class="menu-item menu-item-logout">';
3
    $link .= '<a href="' . wp_logout_url( home_url() ) . '">';
4
    $link .= '<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i> Log Out';
5
    $link .= '</a></li>';
6
} else {
7
    $link  = '<li class="menu-item menu-item-login">';
8
    $link .= '<a href="' . wp_login_url( get_permalink() ) . '">';
9
    $link .= '<i class="fa-solid fa-user" aria-hidden="true"></i> Log In';
10
    $link .= '</a></li>';
11
}

Les classes fa-solid fa-user et fa-solid fa-right-from-bracket correspondent à la syntaxe actuelle de Font Awesome 6. Les anciennes classes fa fa-user / fa fa-sign-out fonctionnent encore par inertie, mais sur de nouvelles installations, elles risquent de ne pas s’afficher.

Si vous ne souhaitez pas installer un plugin dédié pour les icônes, incluez FA avec une ligne dans functions.php:

1
add_action( 'wp_enqueue_scripts', function() {
2
    wp_enqueue_style(
3
        'font-awesome',
4
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css'
5
    );
6
});

Configurer les redirections après connexion et déconnexion

Les deux méthodes renvoient par défaut l’utilisateur là où il se trouvait. Mais parfois, vous avez besoin d’un comportement différent: après connexion, vers le tableau de bord; après déconnexion, vers la page d’accueil.

Dans le plugin Login Logout Menu, les champs de redirection se trouvent directement dans les paramètres de l’élément de menu: dépliez l’élément ajouté et saisissez l’URL.

Pour la méthode avec code, wp_login_url() accepte un paramètre $redirect: l’URL vers laquelle envoyer les utilisateurs après connexion. wp_logout_url() fonctionne de la même manière:

1
$login_url  = wp_login_url( home_url( '/my-account/' ) );
2
$logout_url = wp_logout_url( home_url( '/' ) );

Si votre logique de redirection est plus complexe (pages différentes selon les rôles, suivi des référents), installez Redirection. Deux millions d’installations, note de 4,5, pratiquement un standard pour WordPress. Ce plugin ne concerne pas le bouton de connexion; il gère toutes les redirections: 301/302, suivi des 404, import CSV.

⁉️🤔 Foire aux questions

Puis-je créer le bouton sans aucun plugin et sans modifier le code?

Oui, mais uniquement dans les thèmes où le menu vous permet de sélectionner «Log In» depuis une liste prédéfinie. Vérifiez dans Apparence → Menus sous l’onglet «Liens personnalisés»: dans Astra, GeneratePress et Kadence, cette option existe. S’il n’y a pas de liste déroulante, utilisez la méthode 2 avec le filtre. Ce n’est pas plus compliqué que de remplacer un lien.

Pourquoi l’ancien plugin baw-login-logout-menu a-t-il disparu du répertoire?

L’auteur a demandé sa fermeture en juin 2025. Le plugin n’avait pas été mis à jour depuis 9 ans, utilisait la fonction create_function supprimée de PHP 8 et contenait une vulnérabilité XSS. S’il est encore sur votre site, supprimez-le et remplacez-le par le même Login Logout Menu: les réglages ne seront pas transférés, mais le bouton lui-même peut être reconfiguré en une minute.

Comment créer un bouton avec une icône sans plugin d’icônes séparé?

Incluez Font Awesome via wp_enqueue_style (la ligne dans la section bonus ci-dessus) et ajoutez une balise <i> avec la classe appropriée à l’intérieur du lien dans le filtre. L’icône fa-user pour la connexion, fa-right-from-bracket pour la déconnexion. Mettez en forme via les classes CSS menu-item-login et menu-item-logout.

Et si le menu est construit dans l’éditeur de blocs (FSE)?

Dans les thèmes en blocs (Twenty Twenty-Four, Ollie), le menu se construit via l’éditeur de site, et non via le chemin classique Apparence → Menus. L’extension Login Logout Menu n’est pas encore compatible avec les menus en blocs. Utilisez la méthode 2 avec le filtre: wp_nav_menu_items est également appelé dans les thèmes en blocs, si le menu est rendu via le bloc de navigation.

Est-il sûr de charger Font Awesome depuis un CDN sur un site en production?

Le CDN Cloudflare pour Font Awesome est l’un des CDN publics les plus fiables, qui sert des milliards de requêtes par jour. Si vous avez besoin d’un contrôle total, téléchargez uniquement les icônes dont vous avez besoin (user, right-from-bracket) et intégrez-les en local dans votre thème. Pour la plupart des sites, l’option CDN est plus simple et ne pose pas de problème.

Que choisir pour votre tâche?

Si votre site comporte une inscription, un forum, une boutique, un LMS ou un portail membre, un bouton de connexion et de déconnexion dans le menu fait gagner des clics aux utilisateurs et réduit les rebonds dus à un «je n’ai pas trouvé comment me connecter».

Le choix entre les méthodes est simple:

• Besoin rapide et sans code? Installez cette extension. Maintenue activement, légère, elle n’entre pas en conflit avec les thèmes.
• Vous souhaitez limiter le nombre d’extensions ou avez besoin d’un balisage non standard? Utilisez le filtre wp_nav_menu_items. Cinq lignes de PHP, et le bouton a exactement l’apparence voulue.

Pour les icônes, Better Font Awesome couvre la plupart des scénarios. Si vous n’installez pas l’extension, une ligne wp_enqueue_style règle la question. Ajoutez Redirection quand la logique de redirection dépasse le cas simple «après connexion vers le tableau de bord, après déconnexion vers l’accueil»: pour ce cas simple, wp_login_url( $redirect ) suffit.

Les deux méthodes ont été testées sur Astra, GeneratePress, Kadence et les thèmes WordPress par défaut. Quinze minutes, et le bouton dans votre menu vit sa propre vie: «Connexion» pour les visiteurs, «Déconnexion» pour les utilisateurs.