Meet Laurel! Our latest Blog & Shop WordPress theme.

Okay
  Print

How do I add social media icons to Oleander?

Please note: This FAQ Article is specifically for the Oleander 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 enabled within Appearance > Widgets), 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 Appearance > Widgets > and added the "Oleander: Social Icons" widget to either your Sidebar area or one of your Footer widget areas.




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


ADDING THE ICON TO OLEANDER'S TOP-BAR:



Open up the theme file called "header.php".

You can access this theme file via 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 > oleander > "header.php".


On the blank Line 49, copy & paste the following code, making 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 OLEANDER'S SOCIAL WIDGET:




To manually add an icon to Oleander'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 > oleander > "inc" folder > "widgets" folder > and open the file titled "social_widget.php".

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

The block of code looks like this:



Create a blank line after the last line of code (for the RSS feed) and before 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 OLEANDER'S FOOTER:



Open up the document called "footer.php".

Between Lines 33-46, you will see a big block of code for the footer's social media icons.

On the blank Line 47, copy & 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!