Display SVG social icons in menu

navigation.php

/** * Display SVG icons in social links menu. * * @param string $item_output The menu item output. * @param WP_Post $item Menu item object. * @param int $depth Depth of the menu. * @param array $args wp_nav_menu() arguments. * @return string $item_output The menu item output with social icon. */ function ea_nav_menu_social_icons( $item_output, $item, $depth, $args ) { // Change SVG icon inside social links menu if there is supported URL. if ( 'site-footer' === $args->theme_location ) { $svg = ea_get_social_link_svg( $item->url, 16 ); if ( ! empty( $svg ) ) { $item_output = $svg . $item_output; } } return $item_output; } add_filter( 'walker_nav_menu_start_el', 'ea_nav_menu_social_icons', 10, 4 );

social-icons.php

<?php /** * Social Icons * * @package ClientName * @author Bill Erickson * @since 1.0.0 * @license GPL-2.0+ **/ /** * Detects the social network from a URL and returns the SVG code for its icon. * */ function ea_get_social_link_svg( $uri, $size = 24 ) { return EA_Social_Icons::get_social_link_svg( $uri, $size ); } class EA_Social_Icons { /** * Detects the social network from a URL and returns the SVG code for its icon. */ public static function get_social_link_svg( $uri, $size ) { static $regex_map; // Only compute regex map once, for performance. if ( ! isset( $regex_map ) ) { $regex_map = array(); $map = &self::$social_icons_map; // Use reference instead of copy, to save memory. $icons = scandir( get_template_directory() . '/assets/icons/social' ); $icons = array_diff( $icons, array( '..', '.' ) ); $icons = array_values( $icons ); foreach( $icons as $i => $icon ) { $icons[ $i ] = substr( $icon, 0, -4 ); } foreach ( $icons as $icon ) { $domains = array_key_exists( $icon, $map ) ? $map[ $icon ] : array( sprintf( '%s.com', $icon ) ); $domains = array_map( 'trim', $domains ); // Remove leading/trailing spaces, to prevent regex from failing to match. $domains = array_map( 'preg_quote', $domains ); $regex_map[ $icon ] = sprintf( '/(%s)/i', implode( '|', $domains ) ); } } foreach ( $regex_map as $icon => $regex ) { if ( preg_match( $regex, $uri ) ) { return ea_icon( array( 'icon' => $icon, 'size' => $size, 'group' => 'social' ) ); } } return null; } /** * Social Icons – domain mappings. * * By default, each Icon ID is matched against a .com TLD. To override this behavior, * specify all the domains it covers (including the .com TLD too, if applicable). * * @var array */ static $social_icons_map = array( 'facebook' => array( 'facebook.com', 'fb.me', ), 'feed' => array( 'feed', ), ); }
Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk