Social Icons Menu

Social icons are easy to add with our themes. You only have to create a custom menu and add your social media profiles as menu links to it.

Create Social Icons menu

Go to Appearance → Menus in your WordPress Backend and click on create a new menu. Then insert a menu name like Social Icons to create the menu.

Afterwards you can add all your social media profiles by using the Custom Links menu type.

Enter the URL to your social media profile like Twitter and Facebook. The Link Text is not displayed and only used in the Backend.

You can add a new Custom Links menu item for every social media profile you want to include in the social icons. After you have added all your social media sites, don’t forget to save the menu.

Assign Menu Locations

After you have created and saved your Social Menu, go to the Manage Locations tab.

Then, assign the Social Menu to the Social Icons menu location.

Depending on the theme, there might be different menu locations available for social menus. For example a location for Header Social Icons or Footer Social Icons.

Please note that social icons are not displayed in normal locations like Main Navigation.

Social Icons Widget

In addition, you can also display the Social Icons Menu in a widget. The Social Icons Widget is part of our free Widget Bundle Plugin.

After you have installed and activated the plugin, you can use the Social Icons Widget on Appearance → Widgets in your WordPress Backend.

Included Social Media Sites

The theme will automatically detect the URLs of your menu links and show the appropriate icon. If you add a link to an unsupported website a default icon (star) will be used.

The following social networks and services are supported:

  • 500px
  • Amazon
  • Apple
  • Bandcamp
  • Behance
  • Bitbucket
  • Codepen
  • Deviantart
  • Digg
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • Github
  • Instagram
  • Linkedin
  • Mail
  • Medium
  • Meetup
  • Patreon
  • Pinterest
  • Get Pocket
  • Reddit
  • RSS Feeds
  • Skype
  • Slideshare
  • Snapchat
  • Soundcloud
  • Spotify
  • Strava
  • Stumbleupon
  • Telegram
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • VK
  • Whatsapp
  • WordPress
  • Xing
  • Yelp
  • Youtube

Extend Social Icons menu (for developers)

You can use the filter hook theme_slug_get_social_svg to add your own custom SVG icon for any menu item URL. You can add the code to the functions.php of your child theme or by using the Code Snippets plugin.

Example:

function child_theme_add_social_icon( $svg_icon, $item_output ) {
	
	// Search for particular menu item link (i.e. custom-domain.com)
	if ( false !== strpos( $item_output, 'custom-domain.com' ) ) {

		// Replace default star icon with custom svg.
		$svg_icon = '<svg class="icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm144-248c0 4.4-3.6 8-8 8h-56v56c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-56h-56c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h56v-56c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v56h56c4.4 0 8 3.6 8 8v48zm176 248c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg>';
	}

    return $svg_icon;
}
add_filter( 'theme_slug_get_social_svg', 'child_theme_add_social_icon', 11, 2 );

Make sure to add the .icon class to your SVG image for proper styling. You can replace custom-domain with your custom URL or page slug. It determines for which menu items the icon appears.

You have to replace the generic filter hook name

theme_slug_get_social_svg

with the theme or Pro-addon plugin slug you are extending. Sometimes the social icons are part of the theme, sometimes from the Pro Version add-on.

Here is a list of filter hook names you can use:

# Themes
donovan_get_social_svg
dynamico_get_social_svg
mercia_get_social_svg

#Pro Versions
chronus_pro_get_social_svg
gambit_pro_get_social_svg
gridbox_pro_get_social_svg
harrison_pro_get_social_svg
maxwell_pro_get_social_svg
napoli_pro_get_social_svg
occasio_pro_get_social_svg
palm_beach_pro_get_social_svg
poseidon_pro_get_social_svg
tortuga_pro_get_social_svg
treville_pro_get_social_svg
wellington_pro_get_social_svg

# Widget Bundle
tzwb_get_social_svg

Our older themes do not support these filter hooks.