Social Icons

TotalPress comes with the Font-Awesome icon pack included, which allows the use of any and all icons from the font pack. This also allowed me to add support for some of the most popular social sites.

Create a Menu

totalpress-social-menu
One of the first steps that is needed is to create a new menu and call it “social“. Keep in mind though, the menu has to be named social in order for this to work. All of the css in style.css targets the menu container named .menu-social-container.

You can read more about creating menus in WordPress by visiting WordPress Menu User Guide.

Add Menu Items

totalpress-add-links
Once you have created your menu, all you have to do is add the links to the social sites you want to share. On the left hand side of the Menus screen you will see “Custom Links”, click this. You will see a section called “URL”, this is where you add the actual link to the social site you want. For example, if you want to add a Facebook link you would type in “https://facebook.com/linktoprofileorpage“. Under that you will see “Link Text“, this is where you type in the name of the social site, so using our example we would type in “Facebook.com“. Finally click “Add to Menu“. You need to do this for every link you want to add to the menu.

Navigation Menu Widget

totalpress-navigation-menu
Now that you have your menu and your links added, you can use the Navigation Menu widget (previously called Custom Menu) to add your links to any of the sidebars available in TotalPress.

Go to “Appearance > Widgets“, find the Navigation Menu widget and drag the widgets into the sidebar of your choice. In the screenshot above I added the widget to the “Top Sidebar“.

Once you have added the widget, click “Select Menu” and select the “social” menu. Click save and now the social menu will appear in the sidebar you added it to.

Supported Icons

I didn’t add support for all social icons available in Font-Awesome. I have gone through and added support to the most popular ones, which at last count was 37. Here is a list of the supported icons (in order):

  • 500px.com –
  • bandcamp.com –
  • behance.net –
  • bitbucket.org –
  • codepen.io –
  • deviantart.com –
  • digg.com –
  • dribbble.com –
  • dropbox.com –
  • facebook.com –
  • flickr.com –
  • foursquare.com –
  • plus.google.com –
  • github.com –
  • instagram.com –
  • jsfiddle.net –
  • last.fm –
  • linkedin.com –
  • mixcloud.com –
  • pinterest.com –
  • getpocket.com –
  • reddit.com –
  • soundcloud.com –
  • spotify.com –
  • snapchat.com –
  • stackoverflow.com –
  • stumbleupon.com –
  • tumblr.com –
  • twitter.com –
  • vimeo.com –
  • vine.co –
  • wordpress.com –
  • wordpress.org –
  • youtube.com –
  • twitch.tv –
  • xing.com –

There is also support for your sites rss feed as well as a mailto: link

  • feed – : (in URL add: https://yoursite.com/feed, in Link Text add: feed)
  • mailto: – : (in URL add: mailto:example@email.com, in Link Text add: mailto)

If you think I left out a social icon from Font-Awesome, please let me know and I will do my best to add it in a future update.

Knowledgebase Categories