MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add social media icons to Laurel?

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



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


Navigate to 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 automatically. 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 "Laurel: Social Icons" widget to your Sidebar area. 

Once the widget is added to your Sidebar area, click the widget's heading to drop-down the widget's settings. Check the boxes next to the social media networks you'd like to display in the widget. 

Please remember that you will have needed to enter that network's username within Appearance > Customize > Social Media Settings, otherwise Laurel won't know where to link your social icon to. 






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 Laurel'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 Laurel.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE ICON TO LAUREL'S TOP-BAR & FOOTER:





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

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

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

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

On what is now line 30, 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 50, 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 51, 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 LAUREL'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 "Redwood 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!