0

I'm having trouble adding custom SVG icons to the Social Icon Menu in WordPress Twentyseventeen Child Theme.The menu works fine with all pre-packaged SVGs included with the theme, but I can't add custom SVGs to the child theme.

Here's what I've done so far to add the "Etsy" SVG to the Social Icons Menu:

  • Copy the /assets/img/svg-icons.svg file into the child theme
  • Pasted the Etsy SVG's path into the svg-icons.svg file with all the other icons

Screenshot adding Etsy SVG path to the svg-icons.svg file in WordPress TwentySeventeen child theme


  • Copy the /inc/icon-functions.php file into the child theme
  • Add 'etsy.com' to the array of social media sites

Adding etsy.com to the array of social media sites registered with the twentyseventeen_social_links_icons() function


  • Then I "called" the /inc/icon-functions.php at the bottom of the child theme's functions.php

add icon-functions.php to the functions.php file

This didn't work. WordPress Core recommended using the get_template_part function in New WordPress Functions and Hook Behaviors for WordPress4.7, but I've also tried:

  • get_theme_file_uri()

  • get_theme_file_path()

  • get_template_directory()

  • get_template_directory_uri()

  • get_stylesheet_directory()

  • get_stylesheet_directory_uri()


All to no avail. The only thing that displays on the site is the "broken link" icon.

I also tried using require instead of include but this threw a 505 error and said "Site Down For Maintenance"

All caches cleared. Any idea what I'm doing wrong?

These articles reference very similar issues but none of them solved mine in particular:

1

You don't need to copy the inc/icon-functions.php file and include/require it from the child theme — remember that the parent theme will also load the same file/functions and that would result in a PHP error if you did not rename the functions in the copied file.

So try these:

  1. (You've already done this properly, as I could see it. But just for completeness, I included this step.) Copy the SVG file (assets/images/svg-icons.svg) to your child theme and paste the Etsy's SVG path to that svg-icons.svg file.

    <!-- In wp-content/themes/your-theme/assets/images/svg-icons.svg -->
    <symbol id="icon-etsy" viewBox="0 0 24 24">
    <path ...></path>
    </symbol>
    
  2. Copy the twentyseventeen_include_svg_icons() function to your child theme functions.php file, then rename the function. Unhook twentyseventeen_include_svg_icons from wp_footer, then hook the renamed function to wp_footer:

    function my_theme_include_svg_icons() {
        // Define SVG sprite file.
        $svg_icons = get_stylesheet_directory() . '/assets/images/svg-icons.svg';
    
        // If it exists, include it.
        if ( file_exists( $svg_icons ) ) {
            require_once( $svg_icons );
        }
    }
    remove_action( 'wp_footer', 'twentyseventeen_include_svg_icons', 9999 );
    add_action( 'wp_footer', 'my_theme_include_svg_icons', 9999 );
    
  3. Use the twentyseventeen_social_links_icons hook to add the Etsy icon to the icons array:

    add_filter( 'twentyseventeen_social_links_icons', function ( $icons ) {
        $icons['etsy.com'] = 'etsy';
        return $icons;
    } );
    

Save the theme functions file, reload your browser's cache (if necessary) and check if the Etsy's icon now appearing as expected. ( It should, though.. :) )

And BTW, you don't have to save the SVG file in assets/images, but for testing purposes, just use that default path.

Also, make sure your Social Links Menu has a menu item with etsy.com in the link URL. But you can also manually display the 'E' symbol like so:

echo twentyseventeen_get_svg( array( 'icon' => 'etsy', 'title' => __( 'Testing Etsy symbol', 'my-theme' ) ) );
  • 1
    The function didn't work as it was written in the parent theme, but yours worked perfectly as you typed it. Where your function has "get_stylesheet_directory()", the parent theme function uses "get_parent_theme_file_path". Regardless, it worked, thank you very much. – Kelly Aug 25 at 2:19
  • 1
    Yes, sorry, I forgot to mention that your child theme should use get_stylesheet_directory() and not get_parent_theme_file_path().. :) – Sally CJ Aug 26 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.