MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add social media icons to Sprout & Spoon?

Please note: This FAQ Article is specifically for the Sprout & Spoon theme.



How do I add social media icons to my top-bar, footer & social widget?


WordPress Dashboard > Appearance > Customize > Social Media Settings

Here, you can type in your username for whichever social media network you'd like. Once entered, the social media icons will appear in your site's header and the footer area. If you leave the text box blank for a social media network, the icon will not appear.

Please note: you only need to enter your username, not your social media account's full URL. The username you enter will be added into a pre-set URL for the network.

For example, if you enter the Instagram username "solopine" within Social Media Settings, your Instagram icon will automatically link to the URL: https://www.instagram.com/solopine


For your social media widget, please ensure you have navigated to WP Dashboard > Appearance > Widgets > and added the "Sprout & Spoon: Social Icons" widget to your Sidebar area.




What if the social media network icon I want to add isn't listed within Social Media Settings?

It's possible to manually add a custom social media icon if the one you'd like isn't available within Sprout & Spoon's default settings. A bit of adjustment to the theme's code will be required.

Solo Pine uses Font Awesome's icons for social media icons. They offer a huge variety of icons to choose from. You'll first want to find the social icon via Font Awesome that you'd like to add.

Font Awesome's Icon Directory

In this example, we'll be adding a VK icon to Sprout & Spoon.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE ICON TO SPROUT & SPOON'S TOP-BAR & FOOTER




First, ensure you have the bundled plugin called "Sprout & Spoon Core" installed and activated. If you don't have this installed yet, you should see a banner notification across the top of your Dashboard when you view your WP Dashboard > Appearance page. Use the hyperlink in this banner to install and then activate the "Sprout & Spoon Core" plugin. 

Navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Sprout & Spoon Core" plugin > and click the "Select" button. 

On the right, click the "inc" folder > then click the file titled "social_follow.php".

On line 30, you'll see a line of code for "solopine_rss". BELOW this code, create a new, blank line. 

On what is now line 31, copy and paste the following code:

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Note: If you're adding another icon that is NOT for VK, we'll need to make some adjustments to the above code. For example, if you are adding the icon called "vimeo-square", you would delete the "fa-vk" text above and instead type "fa-vimeo-square". Reference what title the Font Awesome directory gives its icons in order to pull in the correct one. 

Then, be sure to replace the dummy "YOUR VK PROFILE URL HERE" in the above code with the URL you want this icon to link to. 

Further down, on line 52, you'll again see another line of code for the "solopine_rss". This is for your Footer area. As before, create a new, blank line. On this new line, what is now line 53, copy and paste the icon code. Again, please remember to replace the dummy YOUR VK PROFILE URL HERE with the URL you want your footer icon to link to and change the "fa-vk" Font Awesome ID with whatever social icon you're adding (if not the VK icon as in this tutorial). 

Save changes to the file when finished. 





ADD THE ICON TO SPROUT'S SOCIAL WIDGET:




To manually add an icon to Sprout & Spoon's social widget, you'll need to access a theme file called

As before, you can navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Sprout & Spoon Core" plugin > and click the "Select" button. 

This time, however, on the right, click the "inc" folder > then "widgets" folder > and click the file titled "social_widget.php". 

On line 74, you'll again see a line of code for the "rss" feed. Create a new, blank line beneath this RSS feed code. On what is now line 75, paste in your code as before. Remember to replace the dummy YOUR VK PROFILE URL HERE with the URL you want the icon to link to and to replace the "fa-vk" with your own Font Awesome social icon ID.

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Be sure to save the file when you're done making changes. 

You should be all set now!

As always, if you have any questions about this or if you'd like a hand, please don't hesitate to reach out to us via a support ticket! We'd be happy to help!