0

From WordPress 4.9.2, I created a child theme for twentyseventeen. I noticed that it comes with its own SVG icon system for social media icons at the bottom of the page. I see some of that code initiated within the site-info.php file, in wp_nav_menu().

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
    wp_nav_menu( array(
        'theme_location' => 'social',
        'menu_class'     => 'social-links-menu',
        'depth'          => 1,
        'link_before'    => '<span class="screen-reader-text">',
        'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
    ) );
?>

I also see that svg-icons.svg is another file associated to the process.

I would like to use my own custom icons to talk with my custom links associated in the footer. What template techniques have worked well for replacing this SVG system? (again the goal if for me to use my own custom icons, which are .png images)

1

You could replace the function that is getting the svg image like so:

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_class'     => 'social-links-menu',
                            'depth'          => 1,
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span><img src="'.get_home_url().'/path/to/image.png">',
                        ) );
                    ?>
                </nav><!-- .social-navigation -->
1

You can use the wp_nav_menu_args filter.

namespace StackExchange\WordPress;

add_filter( 'wp_nav_menu_args', __NAMESPACE__ . '\wp_nav_menu_args' );
function wp_nav_menu_args( array $args ) : array {
  if( 'social' === $args[ 'theme_location' ] ) {
    $args[ 'link_after' ] = '</span>' . get_icon( [ 'icon' => 'chain' ] );
  }
  return $args;
}
function get_icon( array $args ) : string {
  return 'use-args-to-return-some-html-to-display-your-icon.png';
}

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.