SeedProd Logo

Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add Custom WordPress Social Media Icons to Your Website

How to Add Custom WordPress Social Media Icons to Your Website (2 Ways) 

Do you want to learn how to add custom WordPress social media icons to your website?

Adding social media icons to WordPress effectively lets visitors know about your social media accounts and encourages them to follow you. Most social media plugins offer icons for the leading social media platforms, but if you want to link to a social media page those plugins don’t support, you may be at a loss.

In this article, we’ll show you how to easily add custom social media buttons to WordPress to send users to more niche social networks.

Why Add Social Media Icons to Your WordPress Site?

Adding social media icons to your WordPress website makes it easier for website visitors to find you on other platforms. Considering that people spend an average of 2 hours and 27 minutes daily on social media, having a presence outside your website is a smart way to engage with your target audience.

Moreover, social media icons are small, allowing you to display them in many parts of your website, including:

Here’s a screenshot of how WPBeginner displays social media links in its WordPress sidebar.

WordPress social media icons in WPBeginner sidebar

When adding social media icons to your site, it’s helpful to remember that social media follow buttons are different from social share buttons or social sharing icons. Instead of asking users to share content, they encourage visitors to follow your social media profiles.

With that being said, let’s look at how to add custom social media follow icons to your site.

How to Add Custom WordPress Social Media Icons: 2 Ways

As we mentioned earlier, many popular WordPress plugins don’t include the functionality to add custom social media icons to your website. You’re often limited to the main social platforms, like Facebook, Twitter, Instagram, YouTube, LinkedIn, and Pinterest.

If your audience is active on more niche social websites, you may struggle to find a plugin that caters to your needs. With that in mind, we’ll share 2 easy ways to add custom social media icons to your website below.

1. Adding WordPress Social Media Icons with SeedProd

For the first method, we’ll use SeedProd to add custom social icons to your website.

SeedProd WordPress website builder

SeedProd is the best WordPress website builder that lets you create custom WordPress themes and landing pages without writing code. With hundreds of pre-made templates, a drag-and-drop builder, and customizable blocks and sections, perfecting your WordPress design with SeedProd is a breeze.

In this method, we’ll use SeedProd’s Social Profiles block to add custom social icons to your website. The block is easy to configure, doesn’t require custom CSS, HTML, or PHP, and uses visual editing instead of a shortcode.

You can also use this plugin to:

Follow the steps below to add WordPress social media icons with SeedProd.

Video Tutorial

Step 1. Install and Activate SeedProd

First, visit the SeedProd pricing page, choose your plan, and create your account. For this guide, we’re using SeedProd Pro for its advanced features.

Next, log into your account dashboard and visit the Downloads tab. From there, you can download the plugin zip file and copy your license key.

Find your SeedProd license key

Now head to your WordPress admin area and upload the SeedProd plugin. If you need help with this step, follow this guide on installing and activating a WordPress plugin.

Once you’ve activated the plugin, go to SeedProd » Settings and paste the license key you copied earlier. Click the Verify Key button to save the settings, then move on to the next step.

enter your license key

Step 2. Create a WordPress Theme or Landing Page

The next step is to create a landing page or WordPress theme design; however, this will depend on which SeedProd license you choose in Step 1.

Basic and Plus users can build landing pages with SeedProd, while Plus and Elite users can create landing pages and WordPress themes with this plugin.

Follow the steps in these tutorials to build your SeedProd design:

After creating a landing page or WordPress theme, move to Step 3 to add your custom WordPress social media icons.

Step 3. Add Your Custom Social Media Icons to WordPress

SeedProd allows you to add custom social media icons anywhere in WordPress with its easy and powerful Theme Builder. After choosing your Website Kit, it’s simply a case of opening each theme part and adding the Social Profiles block.

Adding Social Media Icons to WordPress Header

Let’s start by adding social profile icons to your WordPress menu. To do this, go to SeedProd » Theme Builder, hover over your Header template and click the Edit Design button.

edit your SeedProd header template

On the following screen, you’ll see a 2-column layout like this:

SeedProd header builder layout

By default, the template we’re using has a 2 column header with a logo and navigation menu. In order to add your social profile icons, you’ll need to change it to a 3-column section.

First, hover over the header section until it has a purple outline, then click the duplicate section icon.

Duplicate WordPress header section

Now, in the new section, hover over the contents until it has a blue border, then click the Trashcan icon to remove it.

Delete header row

After that, click on the 3-column layout option to add it to your new section.

Choose a 3-column layout

Next, move the elements from the old section into your new section by dragging and dropping.

Move old WordPress blocks into new columns

When you’ve finished, you should have 1 empty column left where you can add your social profile icons. Before you do that, hover once more over your old section and click the trash can icon to delete it.

Delete old section

To add your custom social profiles to your header, find the Social Profiles block from the left-hand sidebar and drag it onto your empty column. Now you can click the block to see its customization options.

Drag and drop the Social Profiles block

By default, the Social Profiles block will display icons for Facebook, Twitter, Instagram, and YouTube. You can change the icons by clicking each one and choosing a social media network from the dropdown menu.

SeedProd social media networks

The platforms you can choose from include:

  • Discord
  • Email
  • Facebook
  • Facebook Messenger
  • GitHub
  • IMDB
  • Instagram
  • LinkedIn
  • Medium
  • Phone
  • Pinterest
  • RSS
  • Slack
  • Snapchat
  • SoundCloud
  • Telegram
  • TikTok
  • Twitter
  • Vimeo
  • Weibo
  • Whatsapp
  • WordPress
  • YouTube
  • Custom

To add a custom social media profile button, click the Custom option and the gear icon to open the settings.

Custom social media profile settings

Next, click the Choose Icon option and search for a different icon using Font Awesome that fits your social media needs. For example, you can add custom social icons for Spotify, Skype, Tumblr, Behance, Airbnb, Audible, Playstation, and many more.

Choose a Font Awesome social media icon

After choosing your custom social profile icon, you can change the icon color and add your custom link.

Custom social media icon color and URL

Further down the settings panel are options to change your icon style, size, and alignment.

Social media icon size, style, and alignment

In the Templates tab, you can add a custom style to your icons with 1 click.

social media icon templates

The Advanced tab offers settings to customize icon styles at a granular level. For example, you can change icon background color, size, space, shadow, margin, and padding.

You can also show or hide your social profile icons on mobile or desktop devices, which is an excellent way to improve mobile optimization for visitors using a smartphone or tablet.

Social media icon visibility settings

Before saving your changes, hover over your Social Profiles block and click the Save icon. This will allow you to re-use it on other areas of your website without manually adding each social link and custom icon again.

Save your SeedProd social icons block

So in the popup window, give your block a name like “Custom Social Icons,” and save.

Save your social media profiles block

When you’re happy with your WordPress social media icons, click the Save button in the top-right of your screen.

Save your changes

Now, let’s add your social media icons to your website’s footer.

Adding Social Media Icons to WordPress Footer

To add social icons to your footer, go to the SeedProd theme builder dashboard, hover over the Footer template, and click the Edit Design link.

Edit your footer design

Next, open the Saved Blocks heading in the left sidebar, and drag over the custom social icons block you saved in the last step to a column in your footer area.

Choose your saved custom social icons block

If your WordPress footer has a similar background color to your icons, you can click the Advanced tab and choose a new icon color with the color picker.

Advanced social profiles color settings

When everything looks suitable, click the Save button to store your changes.

Adding Social Media Icons to WordPress Sidebar

To add custom social icons to your WordPress sidebar, go back to the theme builder dashboard, hover over the Sidebar template, and click the Edit Design link.

Edit your sidebar design

Now repeat the instructions from the previous step, and click the Save button when you’re finished.

adding social media icons to sidebar with SeedProd

You can also repeat this process for any page on your website, including your landing pages and content pages, such as your about, services, and contact pages.

Step 4. Publish Your Changes

The last step is to publish your new WordPress theme so your website visitors can see your new social media profile icons. To do that, go to the Theme Builder dashboard and turn the Enable SeedProd Theme toggle to the “Yes” position.

enable SeedProd theme

Now you can take a look at your changes. Here are a few examples from this tutorial:

Header

Social media icons in header example

Footer

Social media icons in footer example

Sidebar

Social media icons in sidebar example

2. Using the Simple Social Icons Widget

The following method is helpful if you want to only add custom social media icons to your WordPress sidebar or widget areas. If you’re looking for a free plugin with custom icons, you can try the Social Icons Widget & Block by WPZOOM.

However, we’ll use a WordPress plugin called Simple Social Icons that you can download free from the WordPress plugin repository because it’s straightforward with no extra bells and whistles.

First, go to Plugins » Add New from your WordPress dashboard, search for the Simple Social Icons plugin and click the Install Now button.

Install Simple Social Icons

Next, click the Activate button to make the plugin live on your WordPress site.

After installing the plugin, navigate to Appearance » Widgets, and click the plus (+) icon to add a new block to your sidebar.

Add the Simple Social Icons widget

You’ll need to search for the Simple Social Icons block and click it to embed it in your widget area.

In the block settings, give the widget a title like “Follow Us,” then click the checkbox to open links in a new tab. This is a great way to keep users on your website and reduce bounce rates which can help your SEO.

Edit the Simple Social Icons size, border, and aligment

Then, go ahead and adjust the icon size, border radius, width, and alignment.

Next, scroll down and choose a custom icon color, hover color, background color, background hover color, border color, and background border color.

Edit Simple Social Icons colors

Finally, you can enter your profile links for 20+ social media platforms, including:

  • Blogluvin
  • Dribble
  • Flickr
  • Goodreads
  • Periscope
  • Meetup
  • And the major social networking sites.
add your social links to Simple Social Icons

Remember to click the Update button to save your new feature. Then you can preview your WordPress sidebar to see how your social media icons look.

Simple Social Icons example in WordPress sidebar

That’s It!

We hope this article has helped you learn how to add custom WordPress social media icons to your business website.

You might also like these other helpful guides from our blog:

Thanks for reading. Please follow us on YouTubeTwitter, and Facebook for more helpful content to grow your business.

Get SeedProd

Join Our Newsletter

Subscribers to get Free WordPress Tips and Resources

We do not sell or share your information with anyone.

Let's Connect

Most Popular

Copyright © 2022 SeedProd LLC. SeedProd is a trademark of SeedProd, LLC

PayPal Verified Badge
WPBeginner Verified Badge