Trenger du en «Logg inn»-knapp i menyen som automatisk blir til «Logg ut» etter innlogging? Denne oppgaven dukker opp på omtrent alle nettsteder med registrering: forum, nettbutikker, LMS, medlemsportaler, til og med blogger med kommentatorer.

Tidligere håndterte utvidelsen baw-login-logout-menu dette. I juni 2025 ba utvikleren om fjerning fra WordPress.org-katalogen. Utvidelsen hadde ikke blitt oppdatert på 9 år, brukte funksjonen create_function som er fjernet fra PHP 8, og inneholdt et XSS-sikkerhetshull. I praksis hadde to av tre nettsteder der vi støtte på den allerede migrert til moderne løsninger.

Nedenfor finner du to fungerende metoder som gjør nøyaktig det samme: raskt via utvidelse og fullstendig med egen kode. Begge er testet på aktuelle versjoner av WordPress og PHP.

💡 Rask oversikt:

• Installer utvidelsen Login Logout Menu, dra elementet inn i menyen din og konfigurer videresendinger.
• Legg til filteret wp_nav_menu_items i functions.php i barnetemaet ditt for full kontroll.
• Inkluder Font Awesome-ikoner via Better Font Awesome eller en wp_enqueue_style-linje.

Metode 1: Login Logout Menu-utvidelsen, raskt og kodefritt

En moderne erstatning for den utgåtte baw-login-logout-menu, utvidelsen Login Logout Menu fra WPBrigade. Versjon 1.5.2, kompatibel med WordPress 6.9 og PHP 8.3. I motsetning til forgjengeren krever den ikke fikling med #bawloginout# i URL-feltet: alt fungerer via det innebygde menygrensesnittet.

Installer via Utvidelser → Legg til ny, søk etter login-logout-menu. Etter aktivering åpner du Utseende → Menyer. I venstre kolonne ser du en blokk kalt Login/Logout/Register/Profile med seks elementer. Det mest brukte er Login | Logout: det viser automatisk «Logg inn» til gjester og «Logg ut» til innloggede brukere.

Dra det inn i ønsket meny. Utvid det tilføyde elementet og angi URL for videresending etter innlogging og etter utlogging. Lar du feltene stå tomme, blir brukeren værende på samme side. Skriver du inn /my-account/, havner de på kontosiden sin etter innlogging.

Utvidelsen legger også til elementene «Register», «Profile», «Username» og «Reset Password». De er valgfrie, men for et medlemsnettsted gir profil og registrering i menyen mening.

• Fordeler: null kode, oppsett på ett minutt, fungerer med alle blokk- eller klassiske menyer.
• Ulemper: én ekstra utvidelse i admin. For 90% av nettsteder er ikke dette et problem.
• Pris: gratis, last ned fra WordPress.org.

Metode 2: wp_nav_menu_items-filteret, full kontroll over markup

Ønsker du ikke å installere en utvidelse for én knapp? Oppgaven løses med filteret wp_nav_menu_items. Koden plasseres i barnetemaets functions.php eller via utvidelsen Code Snippets. I hovedtemaet vil filen bli overskrevet ved oppdateringer.

Legg til i barnetemaets functions.php:

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
}

Filteret wp_nav_menu_items kjøres når hver meny rendres. Sjekken av theme_location sikrer at knappen kun vises på ett sted, ikke i alle menyer samtidig. is_user_logged_in() avgjør statusen: true for innlogget, false for gjest. Funksjonene wp_login_url() og wp_logout_url() returnerer korrekte URL-er med nonce-tokens, noe som er sikrere enn å hardkode /wp-login.php.

Etter at du har lagt til koden, vises en tekstlenke «Logg inn» eller «Logg ut» i menyen. Uten ekstra stilsetting arver den temaets formatering.

• Fordeler: null utvidelser, full kontroll over HTML og CSS.
• Ulemper: du må kjenne menyens theme_location. Hvis du ikke gjør det, åpner du temaets header.php, finner kallet til wp_nav_menu() og sjekker parameteren theme_location. Oftest er den primary, header eller main.
• Pris: gratis, koden er din.

Bonus: Font Awesome-ikoner for innlogging og utlogging

Teksten «Logg inn» og «Logg ut» fungerer, men en knapp med et ikon skiller seg mer ut. Den enkleste veien: utvidelsen Better Font Awesome (over 200 000 installasjoner). Installer, aktiver, så er ikonene tilgjengelige umiddelbart: utvidelsen henter automatisk siste versjon.

For kodemetoden legger vi til FA 6-ikoner direkte i filterets markup:

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
}

Klassene fa-solid fa-user og fa-solid fa-right-from-bracket er gjeldende syntaks for Font Awesome 6. De gamle fa fa-user / fa fa-sign-out fungerer fortsatt av gammel vane, men på nye oppsett kan det hende de ikke vises.

Hvis du ikke vil installere en egen utvidelse for ikoner, kan du inkludere FA med én linje i 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
});

Konfigurering av videresending etter innlogging og utlogging

Begge metodene returnerer som standard brukeren dit de var. Men noen ganger trenger du noe annet: etter innlogging, til dashbordet; etter utlogging, til forsiden.

I utvidelsen Login Logout Menu ligger feltene for videresending rett i innstillingene for menyelementet: utvid det tilføyde elementet og skriv inn URL-en.

For kodemetoden godtar wp_login_url() en parameter $redirect: URL-en brukere sendes til etter innlogging. wp_logout_url() fungerer på samme måte:

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

Hvis videresendingslogikken din er mer kompleks (ulike sider for ulike roller, sporing av henvisninger), kan du koble til Redirection. To millioner installasjoner, vurdering 4,5, praktisk talt en bransjestandard for WordPress. Utvidelsen handler ikke om innloggingsknappen; den handler om å administrere alle videresendinger: 301/302, 404-sporing, CSV-import.

⁉️🤔 Ofte stilte spørsmål

Kan jeg opprette knappen uten noen utvidelser og uten å redigere kode?

Ja, men bare i temaer der menyen lar deg velge «Logg inn» fra en ferdig liste. Sjekk Utseende → Menyer under fanen «Egendefinerte lenker»: i Astra, GeneratePress og Kadence finnes dette alternativet. Hvis det ikke finnes noen nedtrekksliste, bruk metode 2 med filteret. Det er ikke vanskeligere enn å bytte ut en lenke.

Hvorfor forsvant den gamle utvidelsen baw-login-logout-menu fra katalogen?

Forfatteren ba om stenging i juni 2025. Utvidelsen hadde ikke blitt oppdatert på 9 år, brukte funksjonen create_function som ble fjernet fra PHP 8, og inneholdt et XSS-sikkerhetshull. Hvis den fortsatt er på nettstedet ditt, fjern den og erstatt med den samme Login Logout Menu: innstillinger overføres ikke, men selve knappen kan konfigureres på nytt på et minutt.

Hvordan lager jeg en knapp med ikon uten en egen ikonutvidelse?

Inkluder Font Awesome via wp_enqueue_style (linjen i bonusseksjonen over) og legg til en <i>-tagg med passende klasse inne i lenken i filteret. Ikonet fa-user for innlogging, fa-right-from-bracket for utlogging. Stilsetting via CSS-klassene menu-item-login og menu-item-logout.

Hva om menyen er bygget i blokkredigeringsprogrammet (FSE)?

I blokktemaer (Twenty Twenty-Four, Ollie) bygges menyen via nettstedredigeringsprogrammet, ikke gjennom klassisk Utseende → Menyer. Utvidelsen Login Logout Menu fungerer ikke med blokkmenyer ennå. Bruk metode 2 med filteret: wp_nav_menu_items kalles også i blokktemaer, hvis menyen rendres gjennom navigasjonsblokken.

Er det trygt å laste Font Awesome fra et CDN på et produksjonsnettsted?

Cloudflare CDN for Font Awesome er et av de mest pålitelige offentlige CDN-ene og håndterer milliarder av forespørsler daglig. Hvis du trenger full kontroll, last ned bare ikonene du trenger (user, right-from-bracket) og last dem opp lokalt til temaet ditt. For de fleste nettsteder er CDN-alternativet enklere og skaper ikke problemer.

Hva bør du velge for oppgaven din?

Hvis nettstedet ditt har registrering, et forum, en butikk, et LMS eller en medlemsportal, sparer en innloggings- og utloggingsknapp i menyen brukerne for klikk og reduserer fluktfrekvensen fra «fant ikke hvordan jeg logger inn».

Valget mellom metodene er enkelt:

• Trenger du det raskt og uten kode? Installer denne utvidelsen. Aktivt vedlikeholdt, lettvekt, kommer ikke i konflikt med temaer.
• Vil du holde antall utvidelser på et minimum eller trenger du ikke-standard markup? Bruk wp_nav_menu_items-filteret. Fem linjer med PHP, og knappen ser nøyaktig ut som tiltenkt.

For ikoner dekker Better Font Awesome de fleste scenarioer. Hvis du ikke installerer utvidelsen, løser én wp_enqueue_style-linje saken. Koble til Redirection når omdirigeringslogikken går utover «etter innlogging til dashbord, etter utlogging til hjemmesiden»: for det enkle tilfellet er wp_login_url( $redirect ) nok.

Begge metodene er testet på Astra, GeneratePress, Kadence og standard WordPress-temaer. Femten minutter, og knappen i menyen din lever sitt eget liv: «Logg inn» for gjester, «Logg ut» for brukere.