Meet Laurel! Our latest Blog & Shop WordPress 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:




To reach the necessary theme file, you can navigate to WP Dashboard > Appearance > Editor > "header.php".
However, if you would like the convenience of line numbers within the theme file, we recommend using the code editor plugin called WPide

Once WPide is activated, navigate to WP Dashboard > WPide > themes > sproutspoon > "header.php".


Between Lines 27 - 39, you'll see a big block of code which is for all the various social icons available within Sprout & Spoon. On Line 39, you'll see the line of code for the RSS feed icon. This line of code looks like this:

<?php if(get_theme_mod('sprout_spoon_rss')) : ?><a href="<?php echo esc_url(get_theme_mod('sprout_spoon_rss')); ?>" target="_blank"></a><?php endif; ?>


Create a new, blank line directly beneath this RSS feed code. 
On this new, blank line, copy & paste the following code. 
Make sure to replace the dummy text YOUR-VK-PROFILE-URL-HERE with your VK profile's URL.

<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, be sure to replace the "vk" class text in the above code with your desired icon's code, such as "vimeo-square". 

Additionally (following the code example above), you'll need to add a "fa fa-" preceding the icon code.




Be sure to save the "header.php" document when you're 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 "social_widget.php". 

This is located within the theme's "inc" folder and then within the "widgets" folder. You cannot access these folders just from WP Dashboard > Appearance > Editor. You will need to access them via FTP, or, via a code editor plugin such as WPide (recommended).

Once WPide is installed/activated, you can navigate to WP Dashboard > WPide > themes > sproutspoon > "inc" folder > "widgets" folder > and open the file titled "social_widget.php".

Between Lines 59-73, you'll see a big block of code for various social networks.

The block of code looks like this:



Create a new, blank line after the last line of code (for the RSS feed) and above the closing "/div" tag.

Here, you can copy & paste the code below.


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




Again, be sure to replace the dummy URL text with your own. And, if you're inserting another icon that is NOT for VK, remember to replace the "vk" in the code with your own icon's ID.

Save the file when you're done making changes.





ADDING THE ICON TO SPROUT'S FOOTER:




To add an icon to the footer area, you can access the necessary file via WP Dashboard > Appearance > Editor > "footer.php". Or, if you would prefer helpful line numbers in the theme file, you can use the code editor plugin WPide

If you are using WPide, you can access the file by navigating to WP Dashboard > WPide > themes > sproutspoon > and open "footer.php". 

Between Lines 16-28, you will see a big block of code for the footer's social media icons.
On Line 28, you'll see the line of code for the RSS feed social icon. 

Directly beneath Line 28, create a new, blank line. On this blank line, copy and paste the following code:

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




Again, be sure to replace the dummy text with your profile page's URL.

Additionally, the footer social area has the social network's name in text next to the icon. If you are not inserting a VK icon, remember to not only change the Font Awesome ID to your own, but ALSO to change the text between the two "span" tags in the above code.

Save the theme file when you're finished.




If you have any troubles while following the above instructions, please feel more than free to open up a new support ticket at https://solopine.ticksy.com and let us know. We'd be happy to help!