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.

Simple Social Icons in Alphabetical Order

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.

WordPress Plugins Menu

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.

WordPress Plugin Editor Plugin Selection 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.

Simple Social Icons Code Block

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.

Simple Social Icons Code Block Zoomed In

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.

Simple Social Icons Insert Code Block

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.

Simple Social Icons Google Plus Block

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+”.

Simple Social Icons Google Plus Block With Title

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.

Custom Ordered Simple Social Icons With Tooltip

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.

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Even though I don’t use StudioPress I have to say this is a great how to post with screenshots, code and annotated images. Good stuff!

  2. Congratulation to the video tutorial. It is very useful. I will look forward for more tips from you. Cheer!

  3. Thanks for the tutorial. I thought you’re going to stylish the tooltips :(

    • Bryan Kerr says:

      You’re welcome, Affan. I never thought about stylizing the tooltips, but it’s an intriguing idea. If you wanted to stylize the Simple Social Icons tooltips, I suppose you might be able to install a plugin like Tippy and wrap Tippy’s shortcodes around the icon anchor tag like this:

      [tippy title="Follow me on Google+" header="off"]
      <a href="%s" %s rel="nofollow">Google+</a>
      [/tippy]
  4. Thank you so much for putting together this tutorial.

    It was really easy to follow and helped me get my icons in order.

    Plus, adding the tooltips was an added bonus I didn’t even think about until I found this.

    Thanks again.

  5. Thanks for this! I am hoping there will be a way to create shortcodes for Simple Social Icons. At present this is not part of the plug-in’s native functionality

  6. Thanks for the idea.

    I realize this is an older article, so I have no idea what the plugin code looked like when you wrote it. However, there is a simpler way to rearrange the icons, without having to actually edit the plugin (which, of course, gets undone if you ever update the plugin).

    There is a filter in the plugin called simple_social_default_profiles. If you add code similar to the following to your functions.php file, that will do it for you.

    add_filter( 'simple_social_default_profiles', 'rearrange_social_default_profiles' );
    function rearrange_social_default_profiles( $profiles=array() ) {
    /* Set the order of any icons you want explicitly sorted. This is the main/only thing you want to modify in this function */
    $order = array( 'facebook', 'pinterest', 'instagram', 'twitter', 'linkedin' );
    /* Set up an empty array to hold the re-ordered list of profiles */
    $rt = array();
    /* Loop through the order we set up, and make those the first items in our array */
    foreach ( $order as $o ) {
    /* Just in case we declared an icon that no longer exists in the array of profiles, move on */
    if ( ! array_key_exists( $o, $profiles ) ) {
    continue;
    }

    /* Add this item to the modified array of profiles */
    $rt[$o] = $profiles[$o];
    /* Remove this item from the original list of profiles */
    unset( $profiles[$o] );
    }
    /* Put any remaining profile icons back in the array, and send it back to the plugin */
    return array_merge( $rt, $profiles );
    }

  7. Any chance you know how to add a new social icon to the Simple Social Icons plugin? I’d love to be able to add the Yelp! icon. Thanks!

  8. Thank you for the tutorial!!!
    Greetings from Barcelona!!

  9. Is there a way (do you know how) to get the buttons side by side, rather than stacked on top of one another?

Speak Your Mind

*