How to display the name of the user connected on your website

There are many situations in which it is interesting to show the name of the user connected to your website, and almost all of them have to do with personalization and loyalty.

It’s a touch, that will please your users, that’s for sure, not to mention if you have a membership site.

Let’s see how to show the name of the user connected once they have logged in, and some more tricks.

Display the username when online wherever you want with a shortcode

To do this, nothing is more practical than creating a shortcode that you can then put wherever you like, like in a widget for example.

First we create the function…

function wphelp_show_connected( $atts ) {
 global $current_user, $user_login;
       wp_get_current_user();
 add_filter('widget_text', 'apply_shortcodes');
 if ($user_login)
 return '¡Hi ' . $current_user->display_name . '!';
 else
 return '<a href="' . wp_login_url() . ' ">Login</a>';
}
add_shortcode( 'show_connected', 'wphelp_show_connected' );Code language: PHP (php)

In this example we have used display_name to show the visible name of the user, but you can add other information about the user:

• user_login
• user_email
• user_level
• user_firstname
• user_lastname
• ID

The code can be added to the end of the functions.php file of the active theme or to your utility plugin.

Now you only have to insert the shortcode [show_connected] where you want it to be seen, for example in a text widget.

And as you see in the previous screenshot, a greeting will be shown to the user connected, showing his full name visible.

Meanwhile, when you are not connected, you will see a link to access.

The nice thing about shortcodes is that you can use them anywhere, for example in a post, which would add a very cool customization layer to your content.

For example, if we create the shortcode to show only the user’s first name, like this:

function wphelp_show_connected( $atts ) {
 global $current_user, $user_login;
       wp_get_current_user();
 add_filter('widget_text', 'apply_shortcodes');
 if ($user_login)
 return '¡Hi ' . $current_user->user_firstname . '!';
}
add_shortcode( 'show_connected', 'wphelp_show_connected' );Code language: PHP (php)

We can use the shortcode in a very creative way in our publications

To offer our content always personalized, greeting the user connected.

As you can see, a world of possibilities.

Note: Note that I used the apply_shortcodes function introduced in WordPress 5.4. The do_shortcode function still works but it’s better if you get used to using the new one.

Display the online user name anywhere in the theme

Now, if you prefer not to use shortcodes but to insert a code in some specific part of your topic (header, footer, sidebar, content, etc.) then I propose this code:

<?php 
if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    if ( ($current_user instanceof WP_User) ) {
 echo ' </br>¡Hi ' . esc_html( $current_user->display_name . '!');
    }
}
?>Code language: HTML, XML (xml)

You can also add the avatar as an additional personalization touch…

<?php 
if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    if ( ($current_user instanceof WP_User) ) {
        echo get_avatar( $current_user->ID, 64 );
 echo ' </br>¡Hi ' . esc_html( $current_user->display_name . '!');
    }
}
?>Code language: HTML, XML (xml)

And when you take out the previous code and add the new one this is what you have. Since we only took out the code but not the widget, it stays there as [show_connected]

In this example I have put the code in the theme’s sidebar.php file, before the widgets.

How to display the logged-in user name in a custom menu

Another possibility, also very interesting, would be to greet the connected user from your personalized navigation menu.

To do this we will use a function like the following:

/* User greeting in menu  */
add_filter( 'wp_nav_menu_objects', 'user_greeting_menu');
function user_greeting_menu($items) {
    $remove_childs_of = array();
    foreach($items as $index => $item) {
        if($item->title == "##user##") {
            if(is_user_logged_in()) {
                $user=wp_get_current_user();
                $name=$user->user_firstname; // or user_login, user_lastname, display_name
                $items[$index]->title = $name;
            }
            else {
                array_push($remove_childs_of, $item->ID);
                unset($items[$index]);
            }
        }
        if(!empty($remove_childs_of) && in_array($item->menu_item_parent, $remove_childs_of)) {
            array_push($remove_childs_of, $item->ID);
            unset($items[$index]);
        }
    }
    return $items;
}Code language: PHP (php)

As always, we will add this function to our functionality plugin or to the functions.php file of the active theme (better at the end).

The next step would be to add a new item to our menu: ##user## in the example.

As you can see in the previous screenshot, the name of the user connected is displayed.

In case the visitor is not connected, it will not show anything, leaving your menu clean.

SUMMARY

As you may have noticed, showing the name of the users connected opens up a lot of possibilities for customization on your website.

And, as always, WordPress offers us the functionalities to achieve this in a simple way, no matter where we want to apply it.

There will surely be some plugins that help with some or all of what we’ve seen, but I haven’t been able to find one that only does these things. If you know about any of them, tell us in the comments.

That’s all. The truth is that I hadn’t thought about this tutorial, but I was asked the other day on Twitter and I thought it was a good idea.

Read this post in Spanish: Cómo mostrar el nombre del usuario conectado en tu web