Skip to content

Alles für WordPress, Webentwicklung — und mehr

🔑 Login- und Logout-Button im WordPress-Menü: 2 funktionierende Methoden

🔑 Login- und Logout-Button im WordPress-Menü: 2 funktionierende Methoden

Benötigen Sie einen „Log In"-Button im Menü, der sich nach der Anmeldung automatisch in „Log Out" verwandelt? Diese Aufgabe stellt sich auf nahezu jeder Website mit Registrierung: Foren, Online-Shops, LMS, Mitgliederportale, selbst Blogs mit Kommentarfunktion.

Bisher übernahm das Plugin baw-login-logout-menu diese Funktion. Im Juni 2025 beantragte der Autor die Entfernung aus dem WordPress.org-Verzeichnis. Das Plugin wurde seit 9 Jahren nicht aktualisiert, verwendete die aus PHP 8 entfernte Funktion create_function und wies eine XSS-Schwachstelle auf. In der Praxis waren zwei von drei Websites, auf denen wir es antrafen, bereits auf moderne Lösungen migriert.

Nachfolgend zwei funktionierende Methoden, die exakt dasselbe leisten: schnell per Plugin und vollständig mit eigenem Code. Beide getestet mit aktuellen Versionen von WordPress und PHP.

💡 Kurzüberblick:

  • Installieren Sie das Plugin Login Logout Menu, ziehen Sie den Eintrag in Ihr Menü und konfigurieren Sie die Weiterleitungen.
  • Fügen Sie den wp_nav_menu_items-Filter in die functions.php Ihres Child-Themes ein, um volle Kontrolle zu erhalten.
  • Binden Sie Font Awesome Icons über Better Font Awesome oder eine wp_enqueue_style-Zeile ein.

Methode 1: Plugin Login Logout Menu, schnell und codefrei

Ein moderner Ersatz für das veraltete baw-login-logout-menu, das Plugin Login Logout Menu von WPBrigade. Version 1.5.2, kompatibel mit WordPress 6.9 und PHP 8.3. Anders als sein Vorgänger erfordert es kein Hantieren mit #bawloginout# im URL-Feld: alles funktioniert über die native Menü-Oberfläche.

Login und Logout im WordPress-Menü per Plugin einrichten

Installieren Sie es über Plugins → Installieren, suchen Sie nach login-logout-menu. Öffnen Sie nach der Aktivierung Design → Menüs. In der linken Spalte sehen Sie einen Block Login/Logout/Register/Profile mit sechs Einträgen. Der am häufigsten verwendete ist Login | Logout: er zeigt Gästen automatisch „Log In" und angemeldeten Nutzern „Log Out" an.

Ziehen Sie ihn in das gewünschte Menü. Klappen Sie den hinzugefügten Eintrag aus und tragen Sie die Weiterleitungs-URLs für nach dem Anmelden und nach dem Abmelden ein. Lassen Sie die Felder leer, bleibt der Nutzer auf derselben Seite. Tragen Sie /my-account/ ein, landet er nach der Anmeldung in seinem Konto-Dashboard.

Das Plugin fügt außerdem die Einträge „Register", „Profile", „Username" und „Reset Password" hinzu. Diese sind optional, aber für eine Mitgliederseite ergeben Profil und Registrierung im Menü Sinn.

  • Vorteile: kein Code, Einrichtung in einer Minute, funktioniert mit jedem Block- oder klassischen Menü.
  • Nachteile: ein weiteres Plugin in der Administration. Für 90% der Websites ist das unproblematisch.
  • Preis: kostenlos, Download von WordPress.org.

Methode 2: wp_nav_menu_items-Filter, volle Kontrolle über das Markup

Sie möchten für einen Button kein Plugin installieren? Die Aufgabe lässt sich mit dem wp_nav_menu_items-Filter lösen. Der Code kommt in die functions.php Ihres Child-Themes oder über das Plugin Code Snippets. Im Parent-Theme wird die Datei bei Updates überschrieben.

Fügen Sie dies in die functions.php Ihres Child-Themes ein:

1/**
2 * Adds a login/logout button to the specified menu.
3 */
4add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
6function 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}

Der wp_nav_menu_items-Filter wird beim Rendern jedes Menüs ausgelöst. Die Prüfung auf theme_location stellt sicher, dass der Button nur an einer Stelle erscheint und nicht in jedem Menü gleichzeitig. is_user_logged_in() ermittelt den Status: true für angemeldet, false für Gast. Die Funktionen wp_login_url() und wp_logout_url() liefern korrekte URLs mit Nonce-Tokens, sicherer als das Hartcodieren von /wp-login.php.

Login-Button mit Icon im WordPress-Menü

Nachdem Sie den Code hinzugefügt haben, erscheint im Menü ein Textlink „Log In" oder „Log Out". Ohne zusätzliche Styles übernimmt er die Formatierung des Themes.

Logout-Button mit Icon im WordPress-Menü
  • Vorteile: Keine Plugins, volle Kontrolle über HTML und CSS.
  • Nachteile: Sie müssen den theme_location des Menüs kennen. Falls nicht, öffnen Sie die header.php Ihres Themes, suchen Sie den Aufruf von wp_nav_menu() und prüfen Sie den Parameter theme_location. Meistens lautet er primary, header oder main.
  • Preis: Kostenlos, der Code gehört Ihnen.

Bonus: Font Awesome Icons für Login- und Logout-Buttons

Die Texte „Log In" und „Log Out" funktionieren, aber ein Button mit Icon fällt stärker auf. Der einfachste Weg: das Plugin Better Font Awesome (über 200.000 aktive Installationen). Installieren, aktivieren, Icons sind sofort verfügbar: Das Plugin lädt automatisch die neueste Version.

Für die Code-Methode fügen wir FA-6-Icons direkt im Markup des Filters ein:

1if ( 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}

Die Klassen fa-solid fa-user und fa-solid fa-right-from-bracket entsprechen der aktuellen Font-Awesome-6-Syntax. Die alten fa fa-user / fa fa-sign-out funktionieren aus Gewohnheit noch, werden aber bei neuen Projekten möglicherweise nicht mehr dargestellt.

Wenn Sie kein separates Plugin für Icons installieren möchten, binden Sie FA mit einer Zeile in der functions.php ein:

1add_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});

Weiterleitungen nach Login und Logout konfigurieren

Beide Methoden führen den Benutzer standardmäßig dorthin zurück, wo er sich zuvor befand. Manchmal benötigen Sie jedoch etwas anderes: nach dem Login zum Dashboard, nach dem Logout zur Startseite.

Weiterleitungsfelder in den Einstellungen des Login Logout Menu Plugins

Beim Plugin Login Logout Menu befinden sich die Weiterleitungsfelder direkt in den Einstellungen des Menüeintrags: Klappen Sie den hinzugefügten Eintrag aus und geben Sie die URL ein.

Bei der Code-Methode akzeptiert wp_login_url() einen Parameter $redirect: die URL, an die Benutzer nach dem Login gesendet werden. wp_logout_url() funktioniert genauso:

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

Wenn Ihre Weiterleitungslogik komplexer ist (unterschiedliche Seiten für verschiedene Rollen, Tracking von Verweisen), binden Sie Redirection ein. Zwei Millionen Installationen, 4,5 Sterne, praktisch ein Industriestandard für WordPress. Das Plugin dreht sich nicht um den Login-Button, sondern um die Verwaltung sämtlicher Weiterleitungen: 301/302, 404-Tracking, CSV-Import.

Weiterleitungsverwaltung in WordPress

⁉️🤔 Häufig gestellte Fragen

Kann ich den Button ohne Plugins und ohne Code-Änderungen erstellen?

Ja, aber nur in Themes, bei denen das Menü Ihnen erlaubt, „Log In" aus einer vorgefertigten Liste auszuwählen. Prüfen Sie Design → Menüs unter dem Tab „Benutzerdefinierte Links": In Astra, GeneratePress und Kadence existiert diese Option. Gibt es keine Dropdown-Liste, nutzen Sie Methode 2 mit dem Filter. Das ist nicht schwieriger, als einen Link auszutauschen.

Warum ist das alte Plugin baw-login-logout-menu aus dem Verzeichnis verschwunden?

Der Autor hat im Juni 2025 die Schließung beantragt. Das Plugin wurde seit 9 Jahren nicht aktualisiert, verwendete die aus PHP 8 entfernte Funktion create_function und enthielt eine XSS-Schwachstelle. Falls es noch auf Ihrer Seite aktiv ist, entfernen Sie es und ersetzen Sie es durch dasselbe Login Logout Menu: Die Einstellungen werden nicht übertragen, aber der Button selbst lässt sich in einer Minute neu konfigurieren.

Wie erstelle ich einen Button mit Icon ohne separates Icon-Plugin?

Binden Sie Font Awesome über wp_enqueue_style ein (die Zeile im Bonus-Abschnitt oben) und fügen Sie innerhalb des Links im Filter ein <i>-Tag mit der passenden Klasse ein. Das Icon fa-user für Login, fa-right-from-bracket für Logout. Styling über die CSS-Klassen menu-item-login und menu-item-logout.

Was tun, wenn das Menü im Block-Editor erstellt wurde (FSE)?

In Block-Themes (Twenty Twenty-Four, Ollie) wird das Menü über den Website-Editor erstellt, nicht über den klassischen Pfad Design → Menüs. Das Login Logout Menu-Plugin funktioniert mit Block-Menüs noch nicht. Verwenden Sie Methode 2 mit dem Filter: wp_nav_menu_items wird auch in Block-Themes aufgerufen, sofern das Menü über den Navigationsblock ausgegeben wird.

Ist es sicher, Font Awesome auf einer Produktivseite von einem CDN zu laden?

Das Cloudflare-CDN für Font Awesome gehört zu den zuverlässigsten öffentlichen CDNs und verarbeitet täglich Milliarden von Anfragen. Wenn Sie volle Kontrolle benötigen, laden Sie nur die benötigten Icons (user, right-from-bracket) herunter und binden Sie diese lokal in Ihrem Theme ein. Für die meisten Websites ist die CDN-Option einfacher und verursacht keine Probleme.

Was Sie für Ihre Aufgabe wählen sollten

Wenn Ihre Website über eine Registrierung, ein Forum, einen Shop, ein LMS oder ein Mitgliederportal verfügt, spart ein Login- und Logout-Button im Menü den Nutzern Klicks und reduziert Absprünge durch „Anmeldung nicht gefunden".

Die Entscheidung zwischen den Methoden ist einfach:

  • Benötigen Sie es schnell und ohne Code? Installieren Sie dieses Plugin. Aktiv gepflegt, schlank, keine Konflikte mit Themes.
  • Möchten Sie Plugins auf ein Minimum beschränken oder benötigen Sie nicht standardkonformes Markup? Nutzen Sie den wp_nav_menu_items-Filter. Fünf Zeilen PHP, und der Button sieht exakt wie gewünscht aus.

Für Icons deckt Better Font Awesome die meisten Szenarien ab. Wenn Sie das Plugin nicht installieren, löst eine Zeile wp_enqueue_style das Problem. Binden Sie Redirection ein, wenn die Weiterleitungslogik über „nach Login zum Dashboard, nach Logout zur Startseite" hinausgeht: Für den einfachen Fall genügt wp_login_url( $redirect ).

Beide Methoden wurden mit Astra, GeneratePress, Kadence und den Standard-WordPress-Themes getestet. Fünfzehn Minuten, und der Button in Ihrem Menü führt sein Eigenleben: „Anmelden" für Gäste, „Abmelden" für Nutzer.