Today I’m gonna show you a quick and handy tip on how to add social media icons to your WordPress widgets without the use of plugins.
You can place social media icons in your sidebar, footer or wherever you have a WordPress widget. The placement of widgets is different on every theme, but this technique should work on pretty much any poplar theme like Astra, Kadence, etc.
I found this workaround after testing a few solutions, but none of them were suitable for me.
Here is my story:
First, I placed a script from Font Awesome in the head of the site and placed their icons manually in the sidebar widget as HTML code. It worked well, however they were slowing down the site.
After that, I tried a few WordPress plugins for social icons. Most of them have limited customization options and slow down your site as well. I was still not happy with the result.
Finally, I found a simple and efficient way to add social media icons to WordPress widgets. The key to the answer is the built-in WordPress Gutenberg editor.
How to add social media icons to WordPress widgets
Simply follow the steps listed below:
- Create a page or post on your WordPress site
- Insert the Social Icons block provided by Gutenberg editor
- Save the page or post and open it in a new tab
- Inspect the element and copy the HTML code
- Add a new HTML widget. Go to Appearance – Widgets – Custom HTML, drag the widget to the desired widget area (it can be your sidebar, footer, etc.)
- Paste de HTML code you copied earlier
- Save the widget
Note: if you get the error related to viewBox attribute in the HTML widget, simply remove it from your code.
That’s it, you now have some nice looking social icons in your WordPress widget. They won’t load extra scrips or resources, so your pages will load fast.
Update for WordPress 5.8 and newer versions
Since version 5.8, WordPress widgets work with Gutenberg blocks, so you can add a Social Icons block to your desired area, for example in the sidebar or footer.
There is one disadvantage though, the icons won’t open in new tabs by default, so the method described above is still valid and works fine in the latest versions of WordPress 5.8, 5.9, etc.
The method described above will still work
Let me know if you find this tip useful or if you use another method for adding social icons to your site.
I’m trying to do this but I think I’m not copying precisely the correct piece of code (or copying the incorrect attribute) as the result is that the icon’s background color is stretched as wide as the widget. The most suitable options from Chrome Inspector are “copy element” or “copy outerHTML” and neither works. Could you please enhance your article to show precisely what bit of text to copy?
Hi Christiaan,
Inspect Element in Chrome, hit right click and access the Edit HTML, then copy the whole code inside the ul tag, it should have this class class=”wp-block-social-links”.Remove the viewBox attribute from the code and paste it as Custom HTML in your Widget. This should work. Alternatively, use the method described at the end of the article. I hope this helps.
Thanks, Ivor!