Implement social icons as a menu in the WordPress theme

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.

Example of a social icon menu
Example of a social icon menu

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 after_setup_theme hook.

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.

Example code:

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.

The 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.