The following tutorial is based on the Genesis Framework and may be advanced for some readers. My tutorials are based on my own experiences in learning Genesis so I would love some feedback. If you are not familiar with PHP code, I do not recommend making any changes to your functions.php (unless of course you have a back-up of your functions.php and you know how to restore it). One small typo could wipe out your site so proceed with caution….
FYI: This is one of the posts that I have imported from my old blog. Even though this tutorial has screenshots from the old post, it still works!
If you haven’t guessed by now, I’m a HUGE Genesis fan. One of the many things that sets Genesis apart from the rest of the crowd is a strong community of developers that are creating plugins specifically for Genesis users.
One of these plugins is the Simple Social Icons plugin which makes it super easy for you to display social icons on your blog.
I use it myself as you can see in my sidebar:
The only thing that I don’t like about this plugin is the order that the icons are displayed. Here is what the plugin looks like in the Widgets section of WordPress.
So basically they appear in the order that is shown above – there is no “drag and drop” feature that allows you to change the order in the way that you want. Personally, I didn’t like how they appeared in my sidebar so I started doing a little digging and found a solution.
Customizing the Order of the Simple Social Icons
It is completely possible to change the order of your icons but I will warn you – it requires a little PHP “know-how”. It’s not complicated but PHP code is very finicky so if you’re missing a comma, parenthesis, or apostrophe, you will break the plugin.
If this happens, simply delete the plugin and reinstall.
The order of my icons when I installed the plugin was:
This is the order that I would like my icons to appear:
First go to “Plugins” => “Editor” in your WordPress Dashboard. Select “Simple Social Icons” from the drop-down menu and click “Select”.
In the file editor, scroll down until you see “Social Profile Choices”. Below this, you will see the code for the icons and as you can see they appear in the order as you see it in the widget. Each icon has a chunk of PHP code that starts with an apostrophe and closes with a comma.
Carefully cut and paste the chunks of code that you are using in the order that you want – be VERY CAREFUL not to omit any of the punctuation! This is what my file looks like after I change the order:
After you make your own changes, make sure you click on “Update File”. Do a refresh on your screen and you should see your icons in the order that you want.
That’s it – you’re done! I hope you found this tutorial helpful and if you did, please leave me a comment down below and feel free to share this post!