Update on January 12, 2017
The tutorial no longer works with the latest version of the plugin.
Follow the pages in the wiki here: https://github.com/copyblogger/simple-social-icons/wiki
Simple Social Icons is a free WordPress plugin that adds a widget for displaying social networks (Twitter, Facebook etc.) icons. Widget includes useful options for setting icon size, border radius, alignment, font and background colors.
Output:
Filters were added in version 1.0.6 using which we can replace the default icons with custom icons, make the icons appear in our desired order (affects both front end and back end in the widget), add new social icons that are not present in the plugin, remove social unneeded networks and finally replace the CSS with a custom .css file.
For reordering, adding, removing and/or replacing icons the following code blocks will be referenced:
Awesome tutorial as always Sridhar. Yeaterday while designing a theme for a client of mine, I noticed that filters have been added to version 1.0.6 but didn’t have time to dig the code. So this is just in time.
Replacing the default icons with anothers icons is also of the questions I always got, so it is good to know that can easily be done in this latest update.
Thanks for this Sridhar! I always get requests for this. Now I can say yes 🙂
Glad to see the filters I wrote are going to be useful for folks! I tried to make them as flexible as possible while keeping the widget construct the same (i.e. not breaking anything existing) so thanks for the write up.
Thanks Andrew. I am kind of new to using filters. I would appreciate if you can go through the code and suggest any corrections.
No problem. I’ll shoot you a DM or an email with some suggestions.
Simple social icons is a really great plugin to be used. There are many other plugins like sharthis but after going through his post i am going to like this plugin more. You have defined every aspect of plugin effectively. I don’t use this social plugin so don’t have much idea about it.
The reorder and replacement of the icons is required for every social plugin.
These codes will be helpful for many bloggers.
~Ravi
[…] Genesis simple social icons reorder/replace […]
Thank you, Andrew and Sridhar! This is going to make a lot of people happy. 🙂
Thank you SO much for this! One of my most common client requests is to add a Goodreads social networking icon. Thanks to your tutorial there is finally a way to solve that problem without resorting to image sprites.
For anyone else interested, here’s what I added to the array & it worked like a charm:
‘goodreads’ => array(
‘label’ => __( ‘Goodreads URI’, ‘ssiw’ ),
‘pattern’ => ‘g‘,
),
If anyone sees a cleaner way to accomplish this, please let me know.
Thank you Sridhar & Andrew!
Do you mind pasting the code at http://www.pastebin.com and giving the link for everyone’s benefit?
My apologies! I forgot WP was going to strip it. Here it is: http://pastebin.com/1zgj32Bd
Since the “g” icon is almost exactly the same as a Helvetica “g” it works best to add the letter in as text instead of as an image as suggested in the tutorial, that way you can color it easily within the widget settings on the dashboard.
Another wonderfully useful post! I love the Simple Social plugin, but it’s always bugged me that I couldn’t reorder the icons. Now I can! Thanks, Sridhar.
How to add Yelp?
Where do these magical glyph codes come from? Where do I find other magic glyph codes?
Go to http://fontawesome.io/icons/. Click on any icon and then http://cl.ly/image/1o25400A282r.
Useful tutorial. I also found a way to add hover links to the icons. Say if you want to do that on google+:
‘gplus’ => array(
‘label’ => __( ‘Google+ URI’, ‘ssiw’ ),
‘pattern’ => ‘‘ . $glyphs[‘gplus’] . ‘‘,
),
You rock Sridhar, hours saved 🙂
Thank you
Hi Sridhar! Is it possible that the codes are mixed up in the tutorial? I just found it difficult to understand and I think the order is not correct, excuse me if I’m wrong but take a look a the part where it says “The default Twitter glyph’s code as can be seen from the above is:” but there’s no glyph in the two previous functions, a few lines below it says we should add a function to a style.css file, which I think is not correct.
Once again, sorry if is me who’s getting all wrong as I’m quite new to WP and Genesis, if there’s something wrong I really appreciate the update ’cause I really need it.
Thanks!
Indeed. I will update the tutorial and post a reply soon.
Done.
Thanks Sridhar, I really appreciate it!
[…] The one drawback is that you can’t add new icons or change the order in which they appear. Well, you can, but it requires some custom coding. […]
I used this tutorial and it has worked fine for a long time to add Yelp. Thanks.
However, for some reason I just noticed that Yelp is displaying fine, but none of the other icons are displaying correctly (i.e. just colors no glyphs). Any thoughts on where it is broken? I did verify that if I comment out the additions to the functions.php file from this tutorial the icons display properly.
Sorry … its located at http://www.pvumc.net … in the footer
I have just tested this on my test site and it is working fine.
Code added in functions.php: http://pastebin.com/raw/SvqfCkjx
Code added in functions.php: http://pastebin.com/raw/JJc5eZgB
http://d.pr/i/Jf1
Thanks Sridhar … works perfectly. NOt sure what happened to break it but it works now.
Thanks again.
Hi Sridhar, I followed this tutorial to add “Yelp” to the SSI and to reorder the list. Worked great. Was wondering though, do you know of an easy way to add rel=”nofollow” to the links other than editing the plugin itself? Obviously the changes will be negated with an update.
Thanks!
Hi Sridhar,
I’m having trouble displaying the icon for snapchat and the phone. I enqueued the most recent version of font awesome but I’m only getting a square where the icon should be. Any ideas?
Follow https://sridharkatakam.com/add-phone-snapchat-icons-simple-social-icons-widget/
[…] the comments section of How to replace, reorder and add new icons in Simple Social Icons a user […]
[…] Just be aware that if StudioPress adds a new social network to the plugin, you’ll need to update your array of glyphs with a new icon in order to use it, since you’re no longer using the icon font they are. And if you want to add a network that the plugin doesn’t support yet, check out this tutorial on how to add a new icon to Simple Social Icons. […]
I loved this tutorial and it worked for me for so long, but it seems to be incompatible with version 2.0.1 and WP 4.7. Is there any way you can update it for both reordering and replacing icons? Thank you so much!
Yes, I can confirm this… I did a couple custom icons for a client a few months ago, and just did an update for them this afternoon, and “broke” my custom icons…
It looks like the the update to SSIcons 2.0.1 is what did it … I restored, updated WP only, no problem, updated SSIcons to 2.0.1 – and my custom icons no longer show properly.
I’ll poke around at it, but no doubt Sridhar can figure it out much quicker (and better!) than I…. 🙂
Thanks!
Chris
Hi Sridhar,
I too am having some trouble with the new version breaking the code from this tutorial. I would love an update as well 😉
Thank you!