Adding a Social Media Menu to Your WordPress Site

Adding a Social Media Menu to Your WordPress Site
Social media plays an important role in your online presence. While bios and lyrics are expected to be found on your website, when someone wants to find out more about your band’s day to day activities, they’ll likely look to social media. In this post, we’ll cover exactly how to link to your social profiles from your website.

If you’re using an AudioTheme

All of our themes have social media menus built right into them. The menus utilize an icon font, and automatically call icons for specific social media sites using certain URLs. This means, linking to your Facebook page using a link such as: https://www.facebook.com/AudioTheme/, automatically populates the Facebook icon for that link.

The locations of the menus on the themes may vary, but they are all managed the same way. We’ll use the AudioTheme demo site to show the process, specifically our brand new theme Ovation.

Upon landing on the site, you see the social media menu prominently displayed at the top of the theme.

Ovation Social Media Menu

Clicking the grey customize button in the upper right corner of the demo takes us to the WordPress customizer. The customizer on our demo is very similar to the actual WordPress customizer available on live sites, but it’s important to note that not all features are available on our public demo.

Ovation Social Media Customizer

Social Media Menu Display LocationFrom the list of items populating in the customizer, select menus. Since a menu already exists on the demo, we’ll select the “Social” menu. If you don’t have a menu, you can click add a menu. When adding a new menu, you see an option for Display Location. All of our themes require the social menu to be set to Social Links Menu in order for the icons to display.

 

You can see the menu already has links for a few social networks. These are the icons we see displayed on the Ovation demo.

WordPress Social Media Menu

If we want to add a new icon to the menu, let’s use SoundCloud as an example, we can do this by clicking Add Items. This opens another panel of the customizer, allowing us to add a new link.

Social links can be added as Custom Links (the first available link type in the list). Here’s where the magic happens. When a URL containing http://soundcloud.com is added to the menu, the SoundCloud icon will be generated automatically.

Custom URL for Social Media Menu

Click Add to Menu, and the icon is populated instantly.

Social Media Menu SoundCloud Icon

That’s it. You can repeat this process to add several social links to your menu.

The following icons are typically bundled in each theme for use in your social links menu: Amazon, Apple/iTunes, Bandcamp, Facebook, Flickr, Google Play, Google+, Instagram, Last.fm, LinkedIn, Pinterest, Rdio, ReverbNation, SoundCloud, Spotify, Tumblr, Twitter, Vimeo, WordPress, and YouTube.

If you’re not using an AudioTheme

You still have options if you’re not using an AudioTheme. One popular way to add a social menu to a theme that doesn’t have one built in is to add a text widget to a sidebar. You can do this under Appearance → Widgets. Using some HTML, you can create a simple text list of social links.

For example, the following HTML code:

<a href="https://www.facebook.com/AudioTheme/">Facebook</a>
<a href="https://www.twitter.com/audiotheme">Twitter</a>
<a href="https://www.instagram.com/audiotheme/">Instagram</a>

Would result in a clickable list like this:

Facebook
Twitter
Instagram

If you want to display icons, you can also use a social media plugin. The downside to this is that the icons and menus are not designed to work specifically with your theme and typically need to be added to a widget-ready area. A popular social icons plugin is Social Icons Widget, which provides support for several social platforms.

Regardless of which method you choose, you’ll definitely want to include your social media links on your site. Using your website and social media together is one of the best ways to interact with your audience, so be sure to include a link to your website on your social media profiles as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Comments

    1. Hi @nreuck! Most of our themes use the Themicons icon font which includes an Apple logo. Some of our older themes use the Genericons icon font which doesn’t include this logo. So, depending upon the theme you’re using, the icon may already be available.