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.
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!