Add visit site to your toolbar instead of being in the dropdown

I’m looking for a way to move the “Visit Site” link from drop-down and add it to the main toolbar, just like in the image shown below:

enter image description here

Solutions Collecting From Web of "Add visit site to your toolbar instead of being in the dropdown"

Not complicated, but a little tricky to get timing right.

Something like this should work, but you might need to experiment with priority to get the link to specific position on the bar:

add_action( 'admin_bar_menu', function ( $wp_admin_bar ) {

    if ( ! is_admin() ) {

    /** @var WP_Admin_Bar $wp_admin_bar */
    $wp_admin_bar->remove_node( 'view-site' );

    $wp_admin_bar->add_menu( array(
        'id'    => 'view-site',
        'title' => __( 'Visit Site' ),
        'href'  => home_url( '/' ),
    ) );
}, 31 ); // After `wp_admin_bar_site_menu()` at 30.

Add this to your theme’s functions.php:

add_action( 'admin_bar_menu', 'make_parent_node', 999 );
function make_parent_node( $wp_admin_bar ) {
    if ( ! is_admin() ) { return; }  // end function if not in admin back-end, credit @Rarst
    $args = array(
        'id'     => 'view-site',  // id of the existing child node (View Site)
        'title'  => 'Visit Site', // alter the title of existing node (optional)
        'parent' => false         // set parent to false to make it a top level (parent) node
    $wp_admin_bar->add_node( $args );

This will move the “View Site” to just right of the Dashboard drop-down. For more information, see the Codex; the code above is from the “Make an Existing Child Node a Parent Node” section.