Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Social Icons Broken
Tagged: add, simple social icon, strava
- This topic has 25 replies, 5 voices, and was last updated 7 years ago by Victor Font.
-
AuthorPosts
-
December 22, 2016 at 9:44 pm #198023parchmentgirlMember
Thanks for your assistance! I did end up hiring someone to do it for me. The person I hired told me there was something wonky about the code in the tutorial and she had to include the SVG code in the PHP for it to work properly, so I probably wouldn't have been able to figure it out anyway.
Have a nice holiday!
January 5, 2017 at 9:58 pm #198837Ameya BarveMemberI'm trying to do the same which is to add a custom icon for Strava to the Simple Social Icons. I have a relatively new install of WordPress 4.7, with Simple Social Icons v2.0.1. Here's what I did:
(1) First I copy-pasted facebook.svg as strava.svg in the simple-social-icons/icons/SVG folder just so I would have a new SVG file. I then edited the new strava.svg to add the id, so it now looks like this:
<svg width="32" height="32" viewBox="0 0 32 32 version="1.1" xmlns="http://www.w3.org/2000/svg" "> <defs> <symbol id="social-strava" viewBox="0 0 32 32"> <title>Strava</title> <path d="M23.738.214v4.714h-2.804c-1.023 0-1.714.214-2.071.643s-.536 1.071-.536 1.929v3.375h5.232l-.696 5.286h-4.536v13.554h-5.464V16.161H8.309v-5.286h4.554V6.982c0-2.214.62-3.932 1.857-5.152S17.607 0 19.666 0c1.75 0 3.107.071 4.071.214z"/> </symbol> </defs> </svg>
(2) Then, following instructions from the site I added the following code to my functions.php:
//* Add Strava Simple Social Icons widget add_filter( 'simple_social_default_profiles', 'add_strava_simple_icon' ); function add_strava_simple_icon( $icons ) { $icons['strava-icon'] = [ 'label' => __( 'Strava URI', 'simple-social-icons' ), 'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#social-strava' ) . '"></use></svg></a></li>', ]; return $icons; }
This seems to work partly, as I do see a new entry for Strava in the widget where I can enter the Strava URI, however, the image that shows up is plain black, and not the facebook SVG I copy-pasted. Is there another place where I need to upload/create an icon?
I am using the eleven40 theme. I have published the widget changes to my website in case anyone needs to see the actual behavior.
January 5, 2017 at 10:06 pm #198838parchmentgirlMemberIf you get stuck and can't figure it out, I highly recommend hiring Shaylee Smith to do it for you. I eventually gave up trying and hired her. She charges $75 and will do multiple tweaks on your website for that price, including adding custom icons to Simple Social Icons.
January 8, 2017 at 10:07 am #199012Ameya BarveMemberJust as an update, for folks reading this thread, I did manage to fix my issue. There were two problems with my settings:
1. Location of the SVG file
I had created a file named 'strava.svg' under wp-content/plugins/simple-social-icons/icons/SVG. However, in the PHP 'add' function the 'strava.svg' file was expected to be in esc_url( plugin_dir_url(__FILE__) folder which resolves to the root folder of the plugin, which is wp-content/plugins/simple-social-icons/. So I needed to copy my 'strava.svg' file to this plugin root folder.2. Where I placed the PHP code
The instructions aren't clear about where to place the PHP code. Being a newbie I placed it in the 'functions.php' of my theme. Placing it here will work but only if you replace 'plugin_dir_url(__FILE__) . 'strava.svg#social-strava' with the full path to the file e.g. 'http://ameya.net/wp-content/plugins/simple-social-icons/strava.svg#social-strava'. This is because when the function runs from within the context of a theme, the plugin_dir_url does not get resolved correctly as there is no context of a plugin here.The correct place to put the PHP code is actually in the plugin's simple-social-icons.php file. Here the plugin_dir_url(__FILE__) . 'strava.svg#social-strava' will resolve correctly as it is running in the context of the plugin.
So to recap:
1. Place your SVG in the plugin root folder: wp-content/plugins/simple-social-icons/
2. Place the code snippet in the plugins/simple-social-icons/simple-social-icons.php file.Here is the code snippet from plugins/simple-social-icons/simple-social-icons.php that worked for me:
add_filter( 'simple_social_default_profiles', 'ameya_add_strava_simple_icon' ); function ameya_add_strava_simple_icon( $icons ) { $icons['strava-icon'] = [ 'label' => __( 'Strava URI', 'simple-social-icons' ), 'pattern' => '<li class="social-strava"><a href="%s" %s><svg role="img" class="social-strava-svg" aria-labelledby="social-strava"><title id="social-strava">' . __( 'Strava', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'fitness.svg#social-strava' ) . '"></use></svg></a></li>', ]; return $icons; }
March 18, 2017 at 5:37 pm #203370joe1515ParticipantI am using Simple Social Icon widget on two different widgets the footer, and Side Bar. Whenever I make a change to one of the widget background colors it overrides the other widgets background color. I am using the smart passive income theme.
Website address is http://www.socialsecurityteacher.com
March 19, 2017 at 4:52 am #203382Victor FontModerator@nangmuikr, please open a new thread for your question.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.