MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add social media icons to Florence?

Please note: This FAQ Article is specifically for the Florence theme.



How do I add social media icons to Florence?

First, please make sure that the bundled plugin called "Florence Core" is installed and activated. This "Florence Core" plugin is included within the theme package itself. You should see a banner notification across the top of your WP Dashboard requesting you install required/recommended plugins. One of these plugins is the "Florence Core" plugin. Click through the hyperlink in this banner notification to install the plugin and then, afterward, activate it. 

If you don't see the banner notification at the top of your WP Dashboard > Plugins screen, try navigating to your WP Dashboard > Themes screen. It sometimes likes to appear here, too. 

WP 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 footer. If you leave the text box blank for a social media network, the icon will not appear.

Florence SM Icon Screenshot #1





What if the social media network 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 Florence'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.

For example, we'll be adding a VK icon.
The VK icon's Font Awesome ID code is "vk".
We'll take note of this.





ADDING THE ICON TO FLORENCE'S HEADER & FOOTER

First, ensure you have the bundled plugin called "Florence 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 "Florence Core" plugin. 

Navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Florence 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 53, 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 54, 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. 




ADDING THE ICON TO FLORENCE'S SOCIAL WIDGET

As before, you can navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Florence 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 76, 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 77, 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!