How to add user profile photo/avatar & display name to my site header?

Show display name on a menu item

Go to wp-admin> Appearance> Menus> Edit Menus> Menu Structure.

Using our short tags allows you to show a user’s name in the menu instead of the name of the page. Instead of showing the user or my profile on your site’s menu, you can instead make the user page show the logged-in user’s name (e.g John Doe). You can add the following short tags to the menu link: {first_name} {last_name} {username} {nickname}. To use this feature you simply add the short tags to the menu item’s navigation label like so:

Show user profile photo in the menu

You can also show the user’s profile photo in the menu using the short tag: {user_avatar_small}. If you add this tag into the navigation label field the profile photo for the user will show. 

Note: You need to know how to use CSS to use the avatar in the site header due to every theme styling headers differently. Only add the avatar to the site header if you know how to adjust the position of the avatar using CSS.