¿Necesita un botón «Iniciar sesión» en el menú que se convierta automáticamente en «Cerrar sesión» tras la autorización? Esta tarea surge en prácticamente cualquier sitio con registro: foros, tiendas en línea, plataformas LMS, portales de membresía e incluso blogs con comentaristas.

Anteriormente, el plugin baw-login-logout-menu se encargaba de esto. En junio de 2025, el autor solicitó su eliminación del directorio de WordPress.org. El plugin no se actualizaba desde hacía 9 años, utilizaba la función create_function, eliminada de PHP 8, y contenía una vulnerabilidad XSS. En la práctica, dos de cada tres sitios donde lo encontramos ya habían migrado a soluciones modernas.

A continuación presentamos dos métodos funcionales que logran exactamente lo mismo: uno rápido mediante plugin y otro completo con código propio. Ambos probados en versiones actuales de WordPress y PHP.

💡 Resumen rápido:

• Instale el plugin Login Logout Menu, arrastre el elemento a su menú y configure las redirecciones.
• Añada el filtro wp_nav_menu_items al archivo functions.php de su tema hijo para tener control total.
• Incluya iconos de Font Awesome mediante Better Font Awesome o una línea wp_enqueue_style.

Método 1: plugin Login Logout Menu, rápido y sin código

Un reemplazo moderno para el obsoleto baw-login-logout-menu, el plugin Login Logout Menu de WPBrigade. Versión 1.5.2, compatible con WordPress 6.9 y PHP 8.3. A diferencia de su predecesor, no requiere manipular #bawloginout# en el campo URL: todo funciona a través de la interfaz nativa de menús.

Instálelo desde Plugins → Añadir nuevo, busque login-logout-menu. Tras la activación, abra Apariencia → Menús. En la columna izquierda verá un bloque Login/Logout/Register/Profile con seis elementos. El más utilizado, Login | Logout: muestra automáticamente «Iniciar sesión» a los visitantes y «Cerrar sesión» a los usuarios autenticados.

Arrástrelo al menú deseado. Expanda el elemento añadido e introduzca la URL de redirección para después del inicio y del cierre de sesión. Si deja los campos vacíos, el usuario permanece en la misma página. Si introduce /my-account/, tras iniciar sesión aterrizará en el panel de su cuenta.

El plugin también añade los elementos «Register», «Profile», «Username» y «Reset Password». Son opcionales, pero para un sitio de membresía tiene sentido incluir el perfil y el registro en el menú.

• Ventajas: cero código, configuración en un minuto, funciona con cualquier menú de bloques o clásico.
• Inconvenientes: un plugin más en el administrador. Para el 90% de los sitios, esto no supone un problema.
• Precio: gratuito, descárguelo desde WordPress.org.

Método 2: filtro wp_nav_menu_items, control total sobre el marcado

¿No desea instalar un plugin para un solo botón? La tarea se resuelve con el filtro wp_nav_menu_items. El código se coloca en el archivo functions.php de su tema hijo o mediante el plugin Code Snippets. En el tema padre, el archivo se sobrescribirá durante las actualizaciones.

Añada al functions.php de su tema hijo:

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
}

El filtro wp_nav_menu_items se ejecuta cuando se renderiza cada menú. La comprobación de theme_location garantiza que el botón aparezca solo en un lugar, no en todos los menús a la vez. is_user_logged_in() determina el estado: true para autenticado, false para visitante. Las funciones wp_login_url() y wp_logout_url() devuelven las URL correctas con tokens nonce, más seguro que codificar manualmente /wp-login.php.

Después de añadir el código, aparece un enlace de texto «Iniciar sesión» o «Cerrar sesión» en el menú. Sin estilos adicionales, hereda el formato del tema.

• Ventajas: cero plugins, control total sobre HTML y CSS.
• Inconvenientes: necesita conocer el theme_location del menú. Si no lo sabe, abra el header.php de su tema, busque la llamada a wp_nav_menu() y revise el parámetro theme_location. Lo más habitual es que sea primary, header o main.
• Precio: gratuito, el código es suyo.

Extra: iconos de Font Awesome para los botones de inicio y cierre de sesión

Los textos «Iniciar sesión» y «Cerrar sesión» funcionan, pero un botón con icono destaca más. El camino más sencillo: el plugin Better Font Awesome (más de 200.000 instalaciones). Instálelo, actívelo y los iconos estarán disponibles de inmediato: el plugin obtiene automáticamente la última versión.

Para el método con código, añadiremos iconos de FA 6 directamente en el marcado del filtro:

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
}

Las clases fa-solid fa-user y fa-solid fa-right-from-bracket son la sintaxis actual de Font Awesome 6. Las antiguas fa fa-user / fa fa-sign-out aún funcionan por inercia, pero en instalaciones nuevas puede que no se muestren.

Si no quiere instalar un plugin aparte para los iconos, incluya FA con una línea en 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
});

Configurar las redirecciones tras iniciar y cerrar sesión

Ambos métodos devuelven por defecto al usuario a la página donde estaba. Pero a veces necesita algo distinto: tras iniciar sesión, al escritorio; tras cerrar sesión, a la página de inicio.

En el plugin Login Logout Menu, los campos de redirección están en los ajustes del elemento del menú: expanda el elemento añadido e introduzca la URL.

Para el método con código, wp_login_url() acepta un parámetro $redirect: la URL a la que enviar a los usuarios tras iniciar sesión. wp_logout_url() funciona igual:

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

Si su lógica de redirección es más compleja (distintas páginas según el rol, seguimiento de referencias), conecte Redirection. Dos millones de instalaciones, valoración de 4,5, prácticamente un estándar del sector para WordPress. El plugin no trata sobre el botón de inicio de sesión, sino sobre gestionar todas las redirecciones: 301/302, seguimiento de errores 404, importación CSV.

⁉️🤔 Preguntas frecuentes

¿Puedo crear el botón sin plugins y sin editar código?

Sí, pero solo en temas donde el menú le permita seleccionar «Iniciar sesión» de una lista predefinida. Revise Apariencia → Menús en la pestaña «Enlaces personalizados»: en Astra, GeneratePress y Kadence esta opción existe. Si no hay lista desplegable, use el método 2 con el filtro. No es más difícil que cambiar un enlace.

¿Por qué desapareció del directorio el antiguo plugin baw-login-logout-menu?

El autor solicitó el cierre en junio de 2025. El plugin no se actualizaba desde hacía 9 años, usaba la función create_function, eliminada de PHP 8, y contenía una vulnerabilidad XSS. Si aún lo tiene en su sitio, elimínelo y sustitúyalo por el mismo Login Logout Menu: los ajustes no se transferirán, pero el botón en sí puede reconfigurarse en un minuto.

¿Cómo creo un botón con icono sin un plugin de iconos aparte?

Incluya Font Awesome mediante wp_enqueue_style (la línea de la sección extra anterior) y añada una etiqueta <i> con la clase adecuada dentro del enlace en el filtro. El icono fa-user para iniciar sesión, fa-right-from-bracket para cerrar sesión. Aplique estilo mediante las clases CSS menu-item-login y menu-item-logout.

¿Qué ocurre si el menú se construye en el editor de bloques (FSE)?

En los temas de bloques (Twenty Twenty-Four, Ollie), el menú se construye mediante el editor del sitio, no a través del clásico Apariencia → Menús. El plugin Login Logout Menu aún no funciona con menús de bloques. Utilice el método 2 con el filtro: wp_nav_menu_items también se invoca en los temas de bloques, si el menú se renderiza a través del bloque de navegación.

¿Es seguro cargar Font Awesome desde un CDN en un sitio en producción?

El CDN de Cloudflare para Font Awesome es uno de los CDN públicos más fiables, que sirve miles de millones de solicitudes al día. Si necesita control total, descargue únicamente los iconos que necesite (user, right-from-bracket) y súbalos localmente a su tema. Para la mayoría de los sitios, la opción del CDN es más sencilla y no causa problemas.

¿Qué elegir para su tarea?

Si su sitio tiene registro, un foro, una tienda, un LMS o un portal de membresía, un botón de inicio y cierre de sesión en el menú ahorra clics a los usuarios y reduce los rebotes por «no encontraba cómo iniciar sesión».

La elección entre métodos es simple:

• ¿Lo necesita rápido y sin código? Instale este plugin. Tiene mantenimiento activo, es ligero y no genera conflictos con los temas.
• ¿Quiere reducir los plugins al mínimo o necesita un marcado no estándar? Use el filtro wp_nav_menu_items. Cinco líneas de PHP y el botón se ve exactamente como usted pretende.

Para los iconos, Better Font Awesome cubre la mayoría de los escenarios. Si no instala el plugin, una línea con wp_enqueue_style resuelve el asunto. Conecte Redirection cuando la lógica de redirección vaya más allá de «después de iniciar sesión al escritorio, después de cerrar sesión a la página de inicio»: para el caso simple, wp_login_url( $redirect ) es suficiente.

Ambos métodos se han probado en Astra, GeneratePress, Kadence y los temas predeterminados de WordPress. Quince minutos y el botón en su menú cobra vida propia: «Iniciar sesión» para los visitantes, «Cerrar sesión» para los usuarios.