Simple Social Icons Broken

[parchmentgirl]

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!

[Ameya Barve]

I'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.

[parchmentgirl]

If 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.

https://www.shayleesmith.com

[Ameya Barve]

Just 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;
}

[joe1515]

I 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

[Victor Font]

@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?

[Author]

Posts