Custom Social Media Icons Widget (Early Release)

Last week I coded three WordPress themes and finished tweaking a couple others and by the end of the week I was so annoyed that there wasn’t a better way to add social media icons to the sidebar. Custom icons, not just an ugly set provided with a plugin.

So I wrote a custom widget. And then when the thoughts of manually adding that to all these themes and having it disappear if someone changed their theme and not being able to push updates all hit me within a few minutes of finishing the widget, I turned it into a plugin.

I’m actually working on a separate site on which I’ll share free and premium WordPress themes and plugins, and eventually Shopify templates, and I do plan to submit this plugin to the WordPress repository so you can get it through the “official” methods but for now you can download it here.

[CLICK HERE TO DOWNLOAD]

It’s pretty straightforward – you just enter the name of the service (this goes into code as an “alt” tag on the image), the URL to your profile or page, and the URL of your icon. There are three sets of fields to start out, but if you fill those up and click “Save” another set will magically appear. And then another. And… it’s unlimited, is basically what I’m saying.

Some things you might be wondering:

  • How do I install it? Go to Plugins > Add New in WordPress. Click on the “upload” option at the top, and then browse to the downloaded zip file on your computer. Upload it (the whole zip file – don’t unzip it), activate it, then head to your widgets to see it in action. Or you can unzip it and upload the folder to your Plugins folder via FTP.
  • How do I know the icon URL? If you upload the image to your media library, you can grab the URL there.
  • Can I have more than three icons? Yes, if you were paying attention above you would have seen that once you fill all three original sets of fields, a new set is added when you click “Save.” There is no limit to how many sets you can add.
  • Can I control the layout? Not in the widget settings, no. That’s a feature set I’ll probably add down the line. For now, you’d have to add your own CSS to your theme or via a plugin to move stuff around. They default to floating left with 10px margin between the icons.
  • How do I rearrange the icons? Unfortunately, I don’t have a fancy solution for you (yet). The icons show up in the order you enter them in the configuration panel, so plan ahead if you’re picky about those things.
  • Where are those icons in the screenshot from? They are the Simplito set from WebDesignerDepot.com. Isa over at Noisette Marketing/ The Academy blog has a nice set in this year’s Pantone colors as well.

I’d love for you to leave a comment if you use this on your site so I can take a peek, and also let me know if you run into any problems or bugs so I can fix them in the next update. Enjoy!

  1. This is nice.. You really did a great job of creating your social media icons that makes it more easier to use..

  2. Marie

    So that’s just about the greatest about me I’ve ever seen. I want to meet/eat whoever that is!

    Nice work, I’m going to spread the word :)

      • Meg

        Oooh, I love cupcake ipsum … it makes me crave baked goods …

        This plugin is very fabulous! Thanks so much for making it available :)

  3. Lindy

    This is awesome! Thank you so much! I have a question though. My feed won’t work. I’ve entered the feed URL but when you click on the icon from my blog you get a Domain not Found page. Do you know why this is happening? Am I entering the wrong URL in the form? Did I set up my feed burner feed incorrectly? Any help would be great! Thanks again!

    • Zoe

      Yep, remove the “www” from the URL and it’ll work!

      • Lindy

        It worked! It worked! Such a simple fix! Why couldn’t I figure that out!? Argh! Thank you so much once again! You’re awesome!

  4. Linda Misiura

    Hi Zoe! Love this plugin. Is there any way to have one of the links open in the same window, not a new one?

    Thanks!

    • Zoe

      Not currently, but that’s a great idea for a future release!

  5. Marcia

    Hello – is this file still available? I can’t seem to be able to download the .zip file. Only .php…what to do?

    Thanks.

    • Zoe

      Hi Marcia,

      What happens when you click the download link? Is it not downloading at all? I just tested it and it’s downloading as expected for me.

      Zoe

      • Marcia

        Hello – thanks for replying…the zip file downloaded unzipped and it wouldn’t upload in the plugin per your instructions…but no worries I directly uploaded the php file on my FTP site and it works like a charm. YOU ARE AMAZING. I’ve been looking for MONTHS for something so simple as this. Go TEAM GIRLS!! (sorry fellas)…clue Beyonce song:>

        Have a wonderful day Zoe!

        MD

        PS – is there anyway to center the icons??

        • Zoe

          Not right now, at least without using your own CSS to override the default styling. Once Neatly Commented launches, this plugin will move over there and I’ll be releasing another version with some new features including alignment options.

        • Marcia

          Thanks – I just signed up – I can’t wait!
          MD

Leave a Comment

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

About posting code: Please use a Gist or similar to share any extended code samples, and any code other than basic HTML, CSS, or jQuery/ JS, so as to keep the comments clean and readable. Basic HTML, CSS & jQuery can be shared in the comment surrounded by <code> tags. Thanks for commenting!