Many theme developers now use WordPress menus to display social icons. The user only has to create a new menu, add all of his social networks to the menu as links, assign the menu position, and you're done.
In addition to the quick configuration, the method offers other advantages. The implementation is done with very little code and without a long list of theme options for registering the individual networks. And since more and more themes rely on this implementation, the menu created can often be used again directly when changing themes.
Implementation of a social icon menu
Technically, the menu links are identified with the href attribute in CSS and a suitable icon graphic is assigned to them. While real graphics can also be used here, I recommend using an icon font such as Genericons . I came across this approach for the first time via Kovshenin , the original idea being from Justin Tadlock .
This tutorial shows a complete solution for the implementation of a social icons menu and is taken directly from one of my themes.
1) Register the social menu and integrate the genericons font
First, the social icon menu must be registered in the theme and the Genericons font must be integrated. Both can be done using the corresponding functions in functions.php , which are passed to the corresponding action hooks.
Register new menu position
The registration of a new menu position for the social icons is done in the theme's setup function. This is registered with the
Embed the Genericon Icon Font
The icon font is loaded with a second function, which is assigned to the action hook
wp_enqueue_scripts . In order to function correctly, the Genericon Icon Font must be stored in the / css / directory of the theme.
2) Output social icons menu
The social icons menu can then be displayed at a suitable location in the theme, for example in the header.php.
has_nav_menu() function can be used to check whether the user has created a social icons menu. The menu is displayed with
wp_nav_menu() (see Codex for available parameters).
It is important to assign the menu_class parameter, which means that we can specifically address the menu with .social-icons-menu in the stylesheet.
3) Styling the menu
Finally we need some CSS code for the styling of the menu, which belongs in the style.css of the theme. At the beginning we take care of the general styling of the menu items and then add the individual icons.
With a little code, we have created a functional social icons menu.