How to add Social Media Icons to WordPress Widgets (Without Plugins)


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:

  1. Create a page or post on your WordPress site
  2. Insert the Social Icons block provided by Gutenberg editor
  3. Save the page or post and open it in a new tab
  4. Inspect the element and copy the HTML code
  5. 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.)
  6. Paste de HTML code you copied earlier
  7. 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.

Let me know if you find this tip useful or if you use another method for adding social icons to your site.

Leave a Comment

Your email address will not be published. Required fields are marked *