Add a custom social media icon to the Beaver Builder Theme

Different countries and businesses promote themselves on different social media platforms.

Why?

Because different businesses have different target audiences and different social media platforms attract different types of people.

The Beaver Builder core developers understand this and, as such, have included in their Beaver Builder Theme an easy way for us to add custom social media icons to the list of icons output by the theme.

This tutorial will show you the exact steps you need to follow to add your own custom social media icon to the Beaver Builder Theme and we’ll be adding a Houzz icon as an example.

Step 1: Add a new setting to the Customizer for the new social media icon

The first step is to register a new field in the Customizer.

To do this, edit the functions.php file in your theme and paste in the below php code, replacing the word houzz with the name of your social media icon that you’d like to use.

https://gist.github.com/cdca57faf1d471c40e6aa553f796e8fc

Now, when you go to your WordPress Dashboard > Appearance > Customize > Settings > Social Links there will be a new field to add your URL for this new social media channel, as per below, where you can now see a field for Houzz in our example.

But, even if you add a URL in here to this new field, it will not update in your list of social media icons on the front end of our website, as per below.

We’ve added a URL for Houzz but the icon is not showing to the right on the front end of our website.

To put it simply, this new field and the value in it (i.e. the URL to our houzz page) is being saved into the database, but now we need to register it into the list of Social Media Icons that the Beaver Builder Theme outputs on the front end.

Step 2: Add the new custom social media icon to the list of social media icons that the theme outputs on the front end of the website

Next, paste the first php code snippet below into your themes functions.php file and replace the word houzz with the name of your new custom social media icon.

You’ll notice in the PHP below that we’re using the filter fl_social_icons that’s included in the Beaver Builder Theme to allow us to do exactly what we’re trying to achieve in this tutorial (the official documentation on this filter is here).

https://gist.github.com/4b232001508399189282c0b1e0d1408b

TIP! The order in which you list the icons in the above PHP snippet is the order they are output in the list of social media icons on the front end of your website. So, if you want your new social media icon to come first in the list of icons, you should add it to the top of the list. For instance, if we want our Houzz logo to appear first in the list, we’d add Houzz up the top before facebook.

Next, add the above CSS code into your theme’s style.css file (or wherever else you add your CSS code), and note the following:

1. Change the font size: You may need to change the font-size:17px declaration to whatever font size is appropriate for your design.
2. You need to update the unicode for your icon. \f27c is the unicode number for this Houzz icon in Font Awesome and you will need to change this depending on the icon you are adding. For example, you can find all Font Awesome icons by clicking here. To find the unicode for the icon you’re wanting to use, click on an icon and you’ll be taken to a page that describes just that icon and the unicode is on that page. For example, if we were wanting to add a Snapchat icon, we’d go to this link, search for Snapchat, then click on it and land on the below page, where we can see the unicode in the red circle pictured below.
   
   So, we’d update the above CSS and replace \f27c with \f2ac
3. Update the color: In Appearance > Customize > Settings > Social Links you can set whether you want the Social Icons in your theme to monochrome (i.e. all the same color) OR Branded (i.e. the colors of each icon match the social media channels own branding). This setting is shown below.
   
   If you select Branded, you will need to update the above CSS so that the colors of the icon match the branding of the social media channel.

Comment below

Show us where you’ve added a new custom social media icon by commenting below!