Hey,
I was searching for a way to change the icon in the nav menu and instead display the users profile image.
I only found a solution that requires to override the user-login-link file but wanted to share it with you anyway. Would be nice if the developers would make this standard instead of the icon, as it just looks better and leads to a better user experience 
- add this to your functions.php
<?php
function get_user_avatar_url( $user_id ) {
if ( $user_id <= 0 ) {
return ''; // Return an empty string if user ID is invalid
}
$user = \HivePress\Models\User::query()->get_by_id( $user_id );
if ( $user ) {
return esc_url( $user->get_image__url( 'thumbnail' ) );
}
return ''; // Return an empty string if user doesn't exist
}
?>
- override hivepress/templates/user/login/user-login-link.php through plugin editor completely with this:
<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
if ( is_user_logged_in() ) :
$user = wp_get_current_user();
$user_avatar_url = get_user_avatar_url( $user->ID ); // Use the new function to get the avatar URL
?>
<a href="<?php echo esc_url( hivepress()->router->get_url( 'user_account_page' ) ); ?>" class="hp-menu__item hp-menu__item--user-account hp-link">
<?php if ( $user_avatar_url ) : ?>
<img src="<?php echo esc_url( $user_avatar_url ); ?>" alt="<?php echo esc_attr( $user->display_name ); ?>" class="user-profile-image">
<?php else : ?>
<i class="hp-icon fas fa-user"></i> <!-- Default icon if no profile image -->
<?php endif; ?>
<span><?php echo esc_html( $user->display_name ); ?></span>
<?php if ( hivepress()->request->get_context( 'notice_count' ) ) : ?>
<small><?php echo esc_html( hivepress()->request->get_context( 'notice_count' ) ); ?></small>
<?php endif; ?>
</a>
<?php elseif ( get_option( 'hp_user_enable_registration', true ) ) : ?>
<a href="#user_login_modal" class="hp-menu__item hp-menu__item--user-login hp-link">
<i class="hp-icon fas fa-sign-in-alt"></i>
<span><?php esc_html_e( 'Sign In', 'hivepress' ); ?></span>
</a>
<?php
endif;
?>
- Add CSS through customizer (you can style it to your needs, just an example):
@media (max-width:1199px){
#menu-header .menu-item .user-profile-image{
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
width:40px;
height:40px;
margin-right:15px;
border-style:solid;
border-color: #000000;
border-width:2px;
}
}
.header-navbar__menu .menu-item .user-profile-image{
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
width:40px;
height:40px;
margin-right:15px;
border-style:solid;
border-width:2px;
}
In the end the profile image will be shown in the navigation menu and only if the user didn’t upload an image it will show the normal icon.
