How to Reorder StudioPress’s Simple Social Icons and Add Tooltips

I love StudioPress’s Simple Social Icons plugin. I’ve been using it ever since I created my Google Plus Page. My big quibble with it, though, is that you can’t change the order of the icons. They’re simple ordered alphabetically by name, left to right. Take it or leave it.

So if I use the email, Facebook, Google+, and RSS icons, this is how they’ll be ordered.

Another feature that would be nice is to have tooltips appears when readers mouseover an icon. A directive-laden tooltip might be the push a reader needs to click on the icon and check out your social media presence.

These omissions are no big deal. Simple is in the plugin’s name afterall. The ability to add tooltips and change the icon order from the Dashboard would make it less so, especially for the developer.

I’ll show you how to customize the order of the Simple Social Icons as well as add tooltips to each of them by editing the plugin’s PHP file using the WordPress plugin editor.

STOP!

Before you even look at the code, make sure you have a recent backup of your site, especially if you’re already using Simple Social Icons. Inadvertently typing even a single character in the wrong place can create errors that will end up deactivating the plugin.

OK, now that the alarm bells have stopped ringing, let’s get a quick orientation to the plugin code and then reorder the icons.

Getting to know the plugin code

First, get to the plugin editor by going Dashboard -> Plugins -> Editor.

Once you’re in the editor, find the “Select plugin to edit” dropdown menu, choose “Simple Social Icons,” and click the select button to right of the menu.

Scroll about a fifth of the way down and below the line containing $this->profiles = array, you’ll see blocks of code for each of the social icons. You can see the email icon block highlighted in blue below.

Zooming in, you can see that each block of code (about nine lines per block) begins with the name of the social network in single quotes. The block for a given icon ends with a line that contains only a closing parenthesis and comma.

Change the order of your icons

To change the order of your icons, all you have to do is change the order of the icon code blocks. For example, if you want to place an icon between your Dribble and Email icons, cut the code block of the icon you want to move, and insert it between the Dribble and Email blocks.

If you’re not using the Dribble and Email icons, you can still move an icon’s code between those code blocks, and the icon you moved will be the first one on the left.

Adding tooltips to the icons

Tooltips are the little text boxes that appear whenever your mouse hovers over an HTML element, a link for example, that uses the title attribute.

To add a tooltip to an icon, find the link element in the icon’s code block. The link element begins with <a, and is at the end of the line that begins with ’pattern’. Add the title attribute between the <a and the href.

Create a title attribute simply by typing title= followed by the text you want to appear in the tooltip. The tooltip text must be surrounded by double quotes.

Here’s a sample title attribute for the Google Plus icon: title=”Follow me on G+”.

You can change the text between the double quotes to anything you like.

Now when readers mouseover your social icons, they’ll get an extra hint about where they’ll go when they click on it.

As a final note, if StudioPress updates the plugin and you download the update, you’ll have to redo these changes.

All this might be easier to understand in video format, so viola! Here’s my first video for the blog.

Can’t see the video? Watch it here.

Please check out the video and let me know in the comments which format was more helpful: this post or the videos.