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:
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.
Hi,
Sorry I just realised that minimize request Size comes from the theme, itself, I tested the demo of Spacious and the error is already there.
Sorry to disturb you.
Thank you
Hi,
The results on Pingdom tools are good with jetpack, so I deleted this plugin.
I used FontAwesome but with I have Minimize request Size
Thank you
Then maybe, if you have the HTML knowledge somehow then, you can use the HTML widget bundled within the WordPress itself. You just need to drag and drop the HTML widget to the required sidebar area and add the below HTML code in it and it will probably work out:
Hi,
Is it possible to do this for a widget?
Thank you
For the widgets, styling will probably not be the same. You may need to style it as required. However, if you have the JetPack plugin installed in your site then, enabling the Extra Sidebar Widgets module provided via this plugin enables you to add the Social Media Icons (JetPack) widget in the widgetized area for your site. You can probably use it instead.