How to Add Social Media Icons to your WordPress Site Featured Image

How to Add Social Icons to Your WordPress Site

One of easiest and most effective ways to integrate your WordPress website into the world of social media is to add links to your social media profiles.  These links help your visitors find and follow your social profiles, and just about every website has them. There are a variety of ways to integrate social links or social icons into your WordPress website, and I’ll demonstate three methods in this article.

1. Choose a Theme That Supports Social Icons

If you’re in the early stages of developing your website, the simplest way to add icons for your social profiles to WordPress is to choose a theme that provides social links as a feature. Lots of themes have built in support for social media icons. All of my favorite premium themes support them including the theme I’m currently using on this site (Enfold). Lots of free themes in the WordPress Theme Directory support social icon, and even WordPress’ current default theme Twenty Sixteen has a social icon menu built in.

There are few things to keep in mind:

  • There are better reasons to choose a WordPress theme, and there are other ways to add social media icons. So if you’ve chosen a theme but it doesn’t support social media icons, you don’t necessarily need to discard it for that reason.
  • Make sure the theme supports all of your social media profiles, or provides a way to add new ones. I recently built a website for a well-known romance author and she needed an icon for Goodreads, a niche social network for authors and their fans. My theme didn’t support it directly but made it easy to add a new social network and icon.
Highlighted in this image is the social icon area built into Enfold, one of my favorite premium themes.

Highlighted in this image is the social icon area built into Enfold, one of my favorite premium themes.

2. Use a Plugin to Add Social Icon Support

You can use a plugin to add social icons to your website. Some plugins, like Social Icons, work by letting you manage a list of your social media profiles and then  the plugin displays the icons as a widget in one of your WordPress widget areas. Some like cbnet Social Menu use WordPress’ menu tool to manage your social icons. Choose a plugin wisely: make sure it has a high rating and good reputation, and that it’s author updates it regularly.

In this screenshot I've highlight the social icons that have been inserted with a plugin.

In this screenshot I’ve highlight the social icons that have been inserted with a plugin.

3. Manually Add Social Icon Support

If you’re not afraid of writing some code, adding your social icons to your WordPress theme is easy. You need to choose where in your theme you want to add the icons, insert some HTML code, and then add some styling to your theme’s style.css.  Here’s some sample code. Obviously your code will differ base on your theme and how you want to style your icons.

HTML Code

Add the following HTML to your theme to render a list of social icons. You could place this anywhere, but you’ll usually want your icons to appear in your header (header.php) or footer (footer.php):

<ul class="social-icons"> <li><a href="https://www.facebook.com/user"><em class="fa fa-facebook-square"></em></a></li> <li><a href="https://www.twitter.com/user"><em class="fa fa-twitter-square"></em></a></li> </ul>

CSS Code

Add the following CSS code to your theme’s style.css to style the list as a horizontal list of icons. You’ll need to modify the code to integrate the look and feel of the icons into your own theme.

/** * Load FontAwesome if your theme isn't already doing it. */ @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); /** * Style and position the list. */ .social-icons { top: 0; right: 0; margin: 0; padding: 0; list-style: none; text-align: right; margin: 10px auto; max-width: 1174px; } /** * Style the list items. */ .social-icons li { padding: 0; display: inline-block; font-size: 30px; } /** * Override the colors of the FontAwesome icons to be appropriate for the * social network. */ .social-icons li .fa-facebook-square { color: #3e5b98; } .social-icons li .fa-twitter-square { color: #4da7de; }
In this image I've highlighted the social icons that I manually added to my theme code.

In this image I’ve highlighted the social icons that I manually added to my theme code.

Summary

There are a number of ways to easily add social media links and icons to your WordPress website using themes, plugins, and custom code.  But adding links to your social media profiles are just one way to integrate your website with social media! Stay tuned for more tutorials on integrating your WordPress website with social media.