WordPress: Social Media Icons Widget

This widget can be used to display a links to your social media pages. There are two different layouts available to choose from:

Layout 1

Layout 2

Pro tip! If you have added your social media links via this guide, this widget will be pre-filled with the icons. So you won’t need to re-add them every time you add a new widget.

How to use this widget

1. Go to Appearance > Widgets in your dashboard. Click here for more information on the widgets area.

2. Click and drag the widget called “pipdig – Social Media Icons” to the sidebar section (or any other section you prefer).

3. Now you can use the widget options to upload your image:

If you have added your social media links via this guide, then this widget will be pre-configured with the icons to each social media page. You can override this if you would like to add different links.

4. Click save and you’re done!

Was this article helpful?

15 Comments

  1. Amy

    Hi, I added Instagram to my Social Media Links (via Pipdig > Social Links) and Instagram is not showing up in my Social Media Icons widget. I had previously added Facebook & Email and those are appearing.

    1. Phil (pipdig)

      Hi Amy, after adding your links to the ‘pipdig < Social Links' page you will need to edit the social media icons widget. This would allow the widget to pull in any new links. If the icon still does not show, you try to force it by deleting the link in the widget and re-adding it.

      1. Amy

        Thanks. That did not work but it gave me the idea to try deleting the widget all together and re-adding it and that did work! However, now that it is appearing and there are 3 options displayed, there is an issue with the text overlapping. It shows the links in the following order: Instagram, Facebook, Email. The text for Instagram and Facebook is overlapping. Any suggestions on how to resolve that?

        1. Phil (pipdig)

          Ah it looks like the sidebar is slightly too small for the text. If you increase the size of the sidebar via this guide it should fix that. You can change the width by using the slider to increase/decrease its value. The other option would be to decrease the text size, however it is already very small so I’d be hesitant to do that.

          1. Amy

            Ok, so there is no way to change the layout so that there are only 2 social media icons shown per row? I have to make my right column significantly wider just to fit the 3 icons and their text, which does not work well with the rest of my content. Thanks!

            1. Phil (pipdig)

              Not currently, so the best option might be switch the widget to the other layout (without the text). This will fit into the space better.

  2. Tessa

    Hi there – is there any way to change the sizing on the social icons within this widget? I have them in the Header Full Width and would like them to be a little smaller.
    Thanks!

    1. Phil (pipdig)

      Hi Tessa, if you copy the contents of this page into the “Additional CSS” tab in the Customizer it will change the icon size to “20px” and also reduce the margin between each icon slightly. You can then adjust the numbers until you get the desired look.

  3. Shakira

    Hi,

    Ive tried doing this several times but when I click on the icon nothing is happening. The links have already been added.

  4. Sarah

    Hey Phil,

    I am using the Equinox template and am wondering if its possible to add the social media icons to each post excerpt (the one that shows up on the “home” page), like on this site http://www.hello-october.com/. It shows the category, comments, socials.

    Thanks a lot for your help!

    Cheers,
    Sarah

  5. Melissa

    Hi there! I am using the Evelyn Rose theme and re, my social media widgets, the links are there, and the counters are working, but for some reason the actual icons are not populating.
    Thanks so much!

    1. Phil (pipdig)

      Hi Melissa, it looks like there is a plugin on your site which is breaking the CSS files. If you try deactivating the plugins on your site you can test where that issue might be coming from. I’m guessing it will be some kind of “speed” or “caching” related plugin.

Leave a comment


The link to your website will be visible to support staff only and will not be shown publicly.
If you do not yet have a website, simply enter "none" in the box.