Register Social Navigation Menu In WordPress

You might be building up your WordPress site, and may want to create new social navigation menu to link it to your social profiles. But, you do not know how to register social Navigation Menu in WordPress at all, and landed in this page as accident, right? Well, for us, it is not any accident at all. Here, we will be describing about how to register new social navigation menu and style it for your site.

Register Social Navigation Menu In WordPress

Well, for the staring on creating the social navigation menu or social nav menu in WordPress, first of all, you need to register new menu for the social menu. Here, below is the code about how to register new social menu in WordPress, which can be added in the functions.php file of your theme:

function theme_setup() {
    register_nav_menus(array(
        'social' => esc_html__('Social Menu', 'textdomain')
    ));
}
add_action('after_setup_theme', 'theme_setup');

Now after that, what we have to do is create a function to control the social menus display, ie, which we will be modifying via the WordPress function wp_nav_menu.

Create Function To Display Social Navigation Menu

Now, if you have done the above steps, now we will be creating new function to display the social navigation menu, extending the builtin WordPress function wp_nav_menu. For this, you can paste this provided code below in any of your WordPress theme file:

function theme_social_menu() {
    if (has_nav_menu('social')) {
        wp_nav_menu(
            array(
                'theme_location' => 'social',
                'container' => 'div',
                'container_class' => 'theme-social-menu',
                'depth' => 1, // No need to allow sub-menu for social icons
                'menu_class' => 'menu-social',
                'fallback_cb' => false, // No fallback setting
                'link_before' => '<span class="screen-reader-text">', // Hide the social links text
                'link_after' => '</span>', // Hide the social links text
                'items_wrap' => '<ul class="%2$s">%3$s</ul>',
            )
        );
    }
}

Here, we have already mentioned about how this function wp_nav_menu controls this menu in the comments. Now, if you have added it to your theme file, now you need to just call this function and your social navigation menu or social nav menu will be displayed in the front-end as desired.

Display the Social Navigation Menu

For this, you just need to open the required file where you want to display it and add this PHP code below in that file:

<?php if (has_nav_menu('social')) : ?>
    <div class="social-menu">
        <?php theme_social_menu(); ?>
    </div>
<?php endif; ?>

Now, if you have setup the social menu from back-end to display it in the front-end, you can see that it lacks some styling. So, here below, we will be describing about how to display the Social Navigation Menu properly in the front-end.

Styling the Social Navigation Menu

For this, here we will be using the fontawesome icons to style this social navigation menu. So at first, what we have to do is, we have to enqueue the fontawesome icons in the theme. The function for this is given below:

function theme_scripts() {
    wp_enqueue_style('font-awesome', get_template_directory_uri() . '/fontawesome/css/font-awesome.css');
}
add_action('wp_enqueue_scripts', 'theme_scripts');

After you have added the above code, now this has been loaded in the front-end, hence we can now style our social navigation menu or social nav menu via the CSS code below:

Important Links For You While Creating Social Navigation Menu

If you could not do the above steps properly and want some help on regarding those steps, then, you can follow the below links:

1. Create New Social Menu In WordPress
2. Enqueue Custom CSS And JavaScript Library In WordPress

If you have done it all properly, then, the output will be something like the below screenshot in your case too:

Conclusion

Well, if you have followed the above tutorial properly and was success in creating the new social navigation menu in WordPress and display it properly in front-end, then, we can now assume that you are now more familiar with it than before. But, if you are still confused on this and want more help, then, please do comment below and we will follow it up.