How to use the new social menu

Fluida and Verbosa introduced a different method for defining the social icons in the theme using menus, allowing practically an infinite number of icons and quick reordering functionality.

This was done by adding a dedicated menu location to the theme’s menu areas along with the required styling and icon font to render the social icons.

• Social Menu
• Advanced Properties
• Custom Icons
• Supported Icons List

Menu?

To define social icons in our new themes start by navigating to Appearance > Menus; you can also use the interface in the Customizer if you prefer but this tutorial will use the old-school Menus dashboard section.

Click on Create a new menu at the top and set a name for your new menu (this is only for your reference and will not be displayed on the site). Then you’re ready to add your social icons (menu items) using the Custom Links box on the left.

Enter the address for desired social network profile in the URL field and the social profile title (as it will appear at hovering on the social icon) in the Link Text field and click Add to Menu. Repeat this step for all the social icons you want.

You may ask why there’s no social network selector in the interface (like our old themes used to have) to tell the theme which icon to display for each link. Our new themes automatically guess which icons to use based on the URL used in the profile. However, if you’re using a non-standard URL (like a shortener) there’s an alternative by manually telling the theme which icon to use below.

Advanced Properties

By default menu items open in the same tab/page. Social icons should usually open the link in a new tab/window, so to enable this behaviour you’ll have to enable an option that is not displayed by default. Click on the Screen Options button at the top right side of the window to open up WordPress’ hidden display options.

Check the Link Target and CSS Classes boxes as these are the options we will be needing. You’ll notice two new fields will be displayed in the menu item editor below.

• The Open link in a new tab is pretty much self explanatory.
• The CSS classes field lets you manually specify a CSS classname (or more) to be applied to that particular menu item. Use this field to input the optional classnames from the table below when the social link uses a non-standard URL, is not automatically recognized or to use one of the extra icons that are not automatically identified.

Activation

Once you have all your social profiles in the list and in the right order (you can reorder them as normal menu items via drag & drop) remember to click the Save Menu button.  Switch to the Menu Locations tab and assign the newly created menu to the theme’s Social Icons menu location.

Now that the menu is all set up, navigate to Appearance > Customize > General > Social Icons and select the theme locations you want the social icons to appear in. These areas will be different for each of our themes, the screenshot below applies to Fluida:

Custom Icons?

The included social icons are part of a separate icon font used exclusively for them and included in the theme. To customize an existing icon or add new ones would require adding a separate and/or replacing the included font file. This can be done using custom CSS (and font embedding plugins) – the difficult part being to locate or create the vector-based icon glyph that you wish to replace or add.

Complete Social Icons List

This tutorial applies to our customize-based themes: Fluida, Verbosa, Septera, Anima, Kahuna, Esotera, Roseta, Bravada and likely all newer themes.
To use the custom social class names make sure you are running at least Fluida 1.2.6 or Verbosa 0.9.8. The other listed themes implement this from first release.