Extend the Simple Social Icons plugin and reorder the icons
I frequently use Simple Social Icons to display social media icons on a site. In a recent redesign I had to add icons for Apple App Store and Google Play. The plugin’s wiki has a post about adding an additional icon with a link to a good example by Nick Cernis on GitHub but I still had some issues.
Get the icons
Copy the config
The wiki page on adding an icon shows the final markup. There is a lot of repetition of the icon ‘slug’ so Nick’s config file makes it easy to ensure you have the right values.
Single SVG files
I tried using the downloaded SVG files but they wouldn’t display on the front end. After a lot of experimenting I found that the the markup had to present the svg as an img element rather than a svg one. My code examines the path to the file and determines its type based on that. This allows for the use of single svg files or a svg file with multiple icons in it, like the Simple Social Icons does it.
Let’s randomly pick an icon to add and see how to do it: The ambulance icon.
Click on the Raw button and save the displayed text to a file.
We can simply use the file as is or, if we are adding multiple icons, put it into a file along with other icons (Nick’s readme.md describes how to extract the ‘path‘ element of the svg to copy it into another svg file)
Then add the icon details to the $new_icons array in my simple-social-icons-add-icons.php file.
Now you should be seeing the Ambulance URI field at the bottom of the Simple Social Icons widget.
If you put a url (or even a #) into the Ambulance URI field the icon will display on the front end. The black background is part of the site footer.
Reorder and/or remove icons
Simple Social Icons provides 23 icons. You will probably only use a small subset of these. We can remove some icons and set the order of the others by using the same filter that is used to add the new icons (‘simple_social_default_profiles‘).
The plugin’s wiki shows how to reorder icons. Omitting some elements of the $new_icon_order array will remove those elements from the widget.
To set the order but leave the other icons in the widget, even those that may have been added by another plugin, needs another pass through the incoming $icons array. In the code below the Phone and Email icons will be placed first.
On the front end you will see the phone and email icons in that order, with the ambulance icon after them.
Available on GitHub
When I used the code on a second site and then it was needed on a third one, I decided to put the code into its own repository on GitHub. It’s available at damiencarbey/ssi-extra-icons. It adds icons for App Store, Google Play, TripAdvisor, WhatsApp and Google My Business. You can add your own code to omit or reorder them.
The best way to install and use it on your own WordPress is to install and activate the latest release of the GitHub Updater plugin and then add the url to my plugin into the Install plugin settings area. When I release a new version then it will be available in the Updates area of the Dashboard just like any wordpress.org hosted plugin.