MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I add social media icons to Redwood?

Please note: This FAQ Article is specifically for the Redwood 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, social media widget (if applicable), and the footer. 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 account's URL.




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 Redwood'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 (Hint: A simple CTRL + F find is likely the quickest way). Font Awesome's Icon Directory

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


ADD THE ICON TO REDWOOD'S TOP-BAR & FOOTER:



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

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. 

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 REDWOOD'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 75, 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 76, 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!