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.

 

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.

 

social-menu-1

 

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.

social-menu-1b

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.

 

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.

 

social-menu-2

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.

social-menu-3

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

 

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.

social-menu-4

 

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:

social-menu-5

Note: To use the custom social class names make sure you are running at least Fluida 1.2.6 or Verbosa 0.9.8.

 

URL match Custom CSS classname(s)
/feed
/rss
feed
rss
500px.com 500px
99designs.com 99designs
aim.com aim
amazon.com amazon
angel.co angellist
app.net appnet
bitbucket.org bitbucket
buffer.com buffer
callto: skype
codeopen.io codeopen
creativecommons.org cc
creativecommons
delicious.com delicious
digg.com digg
disqus.com disqus
dribble.com dribbble
dropbox.com dropbox
drupal.org drupal
duckduckgo.com duckduckgo
dwolla.com dwolla
ebay. ebay
eventbrite.com eventbrite
eventful.com eventful
evernote.com evernote
facebook.com facebook
flattr.com flattr
flickr.com flickr
foursquare.com foursquare
getpocket.com pocket
github.com github
github2 *
gmail.com gmail
grooveshark.im grooveshark
instagram.com instagram
instapaper.com instapaper
intensedebate.com intensedebate
itunes.apple.com appstore
klout.com klout
lanyrd.com lanyrd
last.fm lastfm
linkedin.com linkedin
meetup.com meetup
myspace.com myspace
news.ycombinator.com hackernews
openid.net openid
opentable.com opentable
paypal.com paypal
pinboard.in pinboard
pinterest.com pinterest
plancast.com plancast
play.google.com googleplay
plurk.com plurk
plus.google.com googleplus
quora.com quora
reddit.com reddit
scribd.com scribd
smashingmagazine.com smashingmagazine
songkick.com songkick
soundcloud.com soundcloud
spotify.com spotify
stackoverflow.com stackoverflow
steampowered.com steam
stripe.com stripe
stumbleupon.com stumbleupon
tel: phone
phone2 *
phone3 *
tumblr.com tumblr
twitch.tv twitch
twitter.com twitter
twitter2 *
viadeo.com viadeo
vimeo.com vimeo
vk.com vk
weibo.com weibo
wikipedia.org wikipedia
wordpress.com
wordpress.org
wordpress
xing.com xing
yahoo.com yahoo
yelp.com yelp
youtube.com youtube

Asterisk (*) denotes that classname uses alternative icon image

CSS Classnames
android
calendar
bitcoin
firefox
chrome
ie
internetexplorer
code
about
windows
email
cloud
podcast
link
link2 *
url2 *
itunes
cart
opera
lkdto
mobile
support
beer

Asterisk (*) denotes that classname uses alternative icon image

More Tutorials This article is part of our WordPress general and theme specific tutorials series. For more useful information check out our tutorials section.

14 Comments

  1. I just changed from Nirvana to Verbosa and I do miss the goodreads icon which was included in Nirvana. I love your themes a lot but isn’t it a bit funny that the “author” theme doesn’t connect do goodreads? 😀 Can I add it manually to the social menu?
    Thanks 🙂

  2. First of all, I do love all your themes and just changed from Nirvana to Verbosa – because I liked the idea of an author-like theme for an author. So I really would like a social icon link to my goodreads author page … is there no way to add an icon manually?
    Thanks 🙂

Leave a Comment