Create a block of social media icons in a widget

Social Media Widget

Here on Do It With WordPress, I have created a custom social media widget, which you can see at the top of the sidebar. It used to have subscriber numbers next to each network, but I decided to move away from that in favour of a more compact widget which shows just the icons.

I decided to share with you how I build the widget and styled it. The following is the code for the widget, which should go in your functionality plugin:

This code simply creates a widget and displays a link to each of my social networks. You’ll note that the links don’t even contain anything at the moment, but that’s because we’re going to add a background image to the links instead of any text.

Here is the styling from my style.css file that applies the styles that we want to the widget. Of note, the size of each link is set to 32×32 (to suit my icons), I’m using a CSS sprite to put all of the icons in a single image (reducing my HTTP requests from 5 to 1) and then adjusting the background position of the image to show the appropriate icon, and all of the icons are displayed as an inline-block with a margin, and the parent container uses text-align:center to center the icons:

The end result is a fluid widget that works well on big screens and small screens:

Social Media Widget

Leave a Reply