Forum Replies Created
-
Posts
-
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.
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!
I'm confused. This is copied and pasted directly from the tutorial with no changes to the quotes:
add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' ); function custom_add_new_simple_icon( $icons ) { $icons[‘Goodreads’] = [ 'label' => __( ‘Goodreads’, 'simple-social-icons' ), 'pattern' => '<li class="social-goodreads”><a href="%s" %s><svg role="img" class="social-goodreads-svg" aria-labelledby="social-goodreads”><title id="social-goodreads”>’ . __( ‘Goodreads’, 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . ‘goodreads.svg#goodreads’ ) . '"></use></svg></a></li>', ]; return $icons; }Also, where in the PHP is the XML supposed to be placed?
Okay, I figured out how to extract the XML from the .svg file. It looked very different from the formatting mentioned in the tutorial, so I edited it to match. This is what I have:
<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <defs> <symbol id=“goodreads” viewBox="0 0 335.08 335.079"> <title>Goodreads</title> <path d="M311.175,115.775c-1.355-10.186-1.546-27.73,7.915-33.621c0.169-0.108,0.295-0.264,0.443-0.398 c7.735-2.474,13.088-5.946,8.886-10.618l-114.102-34.38L29.56,62.445c0,0-21.157,3.024-19.267,35.894 c1.026,17.89,6.637,26.676,11.544,31l-15.161,4.569c-4.208,4.672,1.144,8.145,8.88,10.615c0.147,0.138,0.271,0.293,0.443,0.401 c9.455,5.896,9.273,23.438,7.913,33.626c-33.967,9.645-21.774,12.788-21.774,12.788l7.451,1.803 c-5.241,4.736-10.446,13.717-9.471,30.75c1.891,32.864,19.269,35.132,19.269,35.132l120.904,39.298l182.49-44.202 c0,0,12.197-3.148-21.779-12.794c-1.366-10.172-1.556-27.712,7.921-33.623c0.174-0.105,0.301-0.264,0.442-0.396 c7.736-2.474,13.084-5.943,8.881-10.615l-7.932-2.395c5.29-3.19,13.236-11.527,14.481-33.183 c0.859-14.896-3.027-23.62-7.525-28.756l15.678-3.794C332.949,128.569,345.146,125.421,311.175,115.775z M158.533,115.354 l30.688-6.307l103.708-21.312l15.451-3.178c-4.937,9.036-4.73,21.402-3.913,29.35c0.179,1.798,0.385,3.44,0.585,4.688 L288.14,122.8l-130.897,32.563L158.533,115.354z M26.71,147.337l15.449,3.178l99.597,20.474l8.701,1.782l0,0l0,0l26.093,5.363 l1.287,40.01L43.303,184.673l-13.263-3.296c0.195-1.25,0.401-2.89,0.588-4.693C31.44,168.742,31.651,156.373,26.71,147.337z M20.708,96.757c-0.187-8.743,1.371-15.066,4.52-18.28c2.004-2.052,4.369-2.479,5.991-2.479c0.857,0,1.474,0.119,1.516,0.119 l79.607,25.953l39.717,12.949l-1.303,40.289L39.334,124.07l-5.88-1.647c-0.216-0.061-0.509-0.103-0.735-0.113 C32.26,122.277,21.244,121.263,20.708,96.757z M140.579,280.866L23.28,247.98c-0.217-0.063-0.507-0.105-0.733-0.116 c-0.467-0.031-11.488-1.044-12.021-25.544c-0.19-8.754,1.376-15.071,4.519-18.288c2.009-2.052,4.375-2.479,5.994-2.479 c0.859,0,1.474,0.115,1.519,0.115c0,0,0.005,0,0,0l119.316,38.908L140.579,280.866z M294.284,239.459 c0.185,1.804,0.391,3.443,0.591,4.693l-147.812,36.771l1.292-40.01l31.601-6.497l4.667,1.129l17.492-5.685l80.631-16.569 l15.457-3.18C293.261,219.146,293.466,231.517,294.284,239.459z M302.426,185.084c-0.269,0.006-0.538,0.042-0.791,0.122 l-11.148,3.121l-106.148,29.764l-1.298-40.289l34.826-11.359l84.327-27.501c0.011-0.005,4.436-0.988,7.684,2.315 c3.144,3.214,4.704,9.537,4.52,18.28C313.848,184.035,302.827,185.053,302.426,185.084z"/> </symbol> </defs> </svg>Does this look right to you? And in the following code, do I insert the XML in the place of FILE or in the place of my.svg?
<use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#goodreads' ) . '"></use></svg></a></li>It looks like you're using the Avada theme, which is not a Genesis theme. You might want to try the Theme Fusion community forum or fill out a ticket with ThemeFusion support.
Well, that would explain why I was confused. My SVG file is just an image I downloaded from the Flaticon database. I can't open it because I don't have Adobe Illustrator. I just assumed I could upload the .svg image file and it would work. Is there another way to extract the XML without Illustrator?
Okay, after comparing my code to other snippets that use plugin_dir_url I thought I saw how the link was improperly formatted. I edited it to this...
<use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . '/goodreads.svg#social-goodreads' ) . '"></use>...but it still doesn't work. I also tried /goodreads.svg#goodreads, /icons/goodreads.svg#social-goodreads, and /icons/goodreads.svg#goodreads.
Can you clue me into exactly what I'm doing wrong? I'm clearly not seeing where the error is.
Oh, I see. Okay, so with the code below the functions.php file updates without crashing my site and the space to add in a Goodreads link appears in the Simple Social Icons widget dashboard, but the icon itself is invisible. It links to Goodreads just fine, but I can't see the icon.
This is the code I have:
add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' ); function custom_add_new_simple_icon( $icons ) { $icons['Goodreads'] = [ 'label' => __( 'Goodreads', 'simple-social-icons' ), 'pattern' => '<li class="social-goodreads"><a href="%s" %s><svg role="img" class="social-goodreads-svg" aria-labelledby="social-goodreads"><title id="social-goodreads">' . __( 'Goodreads', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__/Downloads/goodreads.svg__) . 'my.svg#goodreads' ) . '"></use></svg></a></li>', ]; return $icons; }I placed the icon in the SVG folder in plugin>simple social icons directory where all the other simple social icons are.
Thanks for that link. I got icons arranged the way I want them easily enough, but I'm having a bit of trouble with adding a custom icon. I'm still a beginner with PHP and obviously, I'm doing something wrong because the code crashes my site.
This is what I have:
add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' ); function custom_add_new_simple_icon( $icons ) { $icons['Goodreads'] = [ 'label' => __( 'Goodreads', 'simple-social-icons' ), 'pattern' => '<li class="social-goodreads"><a href="%s" %s><svg role="img" class="social-goodreads-svg" aria-labelledby="social-goodreads"><title id="social-goodreads">' . __( 'Goodreads', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__~/Downloads/goodreads-letter-logo.svg__) . 'my.svg#social-goodreads' ) . '"></use></svg></a></li>', ]; return $icons; }I uploaded the SVG file to my theme's images folder and tried linking to the URL and local file, both to no avail.
Can you tell me what I'm missing here?
Oh, I didn't realize icon fonts had been depreciated in this update.
Do you know of a way to add a custom social button compatible with the update?
Yeah, I use WPRocket. I didn't know that would cause a problem, because it didn't before the update. I just disabled the minification/concatenating and cleared my cache, but the icons still are not showing up.
Thanks! That works. I would prefer my disclosure to be at the top of the post, but this is a great alternative. I think I will contact my theme developer to see why the simple link in the post info doesn't render in the front end.