MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add social media icons to Hemlock?

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




How do I add social media icons to Hemlock?

WordPress Dash > 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.






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 Hemlock'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 LinkedIn icon.
On Font Awesome's icon page, you can see that the code for the first LinkedIn icon is "linkedin".
We'll take note of this.




ADDING THE ICON TO HEMLOCK'S HEADER & FOOTER



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

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

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

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

On what is now line 28, 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 46, 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 47, 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 HEMLOCK'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 "Hemlock 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 68, 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 69, 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!





Instagram Footer images in screenshot by the very talented @withhearts