Adding Custom Login Link in Navigation

Add a dynamic login/logout link to your DigiFusion theme’s primary navigation menu that automatically switches based on the user’s authentication status.

Add the Login Link Function

Add this code to your child theme’s functions.php file:

/**
 * Add login/logout link to navigation menu
 */
function digifusion_child_add_login_link( $items, $args ) {
    // Only add to primary menu
    if ( 'primary' !== $args->theme_location ) {
        return $items;
    }
    
    if ( is_user_logged_in() ) {
        $logout_url = wp_logout_url( home_url() );
        $current_user = wp_get_current_user();
        $items .= '<li class="menu-item menu-item-logout">';
        $items .= '<a href="' . esc_url( $logout_url ) . '">';
        $items .= '<span class="logout-text">Logout</span>';
        $items .= '</a></li>';
    } else {
        $login_url = wp_login_url( get_permalink() );
        $items .= '<li class="menu-item menu-item-login">';
        $items .= '<a href="' . esc_url( $login_url ) . '">Login</a>';
        $items .= '</li>';
    }
    
    return $items;
}
add_filter( 'wp_nav_menu_items', 'digifusion_child_add_login_link', 10, 2 );

Style the Login Link

Add this CSS to your child theme’s style.css file:

/* Login/Logout menu item styling */
.menu-item-login a,
.menu-item-logout a {
    display: flex;
    align-items: center;
	align-self: center;
    gap: 8px;
    padding: 8px 16px;
    background: #e74c3c;
    color: #ffffff !important;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-item-login a:hover,
.menu-item-logout a:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

/* User greeting styling */
.user-greeting {
    font-size: 14px;
    opacity: 0.9;
}

.logout-text {
    font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .menu-item-login a,
    .menu-item-logout a {
        margin-top: 10px;
        justify-content: center;
    }
    
    .user-greeting {
        display: none;
    }
}

/* RTL support */
.rtl .menu-item-login a,
.rtl .menu-item-logout a {
    flex-direction: row-reverse;
}

Alternative: Simple Text-Only Version

For a simpler text-only version without special styling, use this function instead:

/**
 * Add simple login/logout link to navigation menu
 */
function digifusion_child_simple_login_link( $items, $args ) {
    if ( 'primary' !== $args->theme_location ) {
        return $items;
    }
    
    if ( is_user_logged_in() ) {
        $logout_url = wp_logout_url( home_url() );
        $items .= '<li class="menu-item"><a href="' . esc_url( $logout_url ) . '">Logout</a></li>';
    } else {
        $login_url = wp_login_url( get_permalink() );
        $items .= '<li class="menu-item"><a href="' . esc_url( $login_url ) . '">Login</a></li>';
    }
    
    return $items;
}
add_filter( 'wp_nav_menu_items', 'digifusion_child_simple_login_link', 10, 2 );

Add Login Link to Specific Menu Position

To add the login link at the beginning of the menu instead of the end:

/**
 * Add login link at the beginning of navigation menu
 */
function digifusion_child_prepend_login_link( $items, $args ) {
    if ( 'primary' !== $args->theme_location ) {
        return $items;
    }
    
    if ( is_user_logged_in() ) {
        $logout_url = wp_logout_url( home_url() );
        $login_item = '<li class="menu-item menu-item-logout">';
        $login_item .= '<a href="' . esc_url( $logout_url ) . '">Logout</a>';
        $login_item .= '</li>';
    } else {
        $login_url = wp_login_url( get_permalink() );
        $login_item = '<li class="menu-item menu-item-login">';
        $login_item .= '<a href="' . esc_url( $login_url ) . '">Login</a>';
        $login_item .= '</li>';
    }
    
    return $login_item . $items;
}
add_filter( 'wp_nav_menu_items', 'digifusion_child_prepend_login_link', 10, 2 );

The login link will now appear as the last item in your primary navigation menu, automatically switching between “Login” and “Logout” based on the user’s authentication status.