In this post I’ll show you how to add new social icons to the default 2020 theme for WordPress, TwentyTwenty. You need to hook into two filters:
- twentytwenty_social_icons_map
- twentytwenty_svg_icons_social
In this example I am using the “Steam” icon from FontAwesome.
Set the width and height on the SVGs to 24 pixels if you want them to fit nicely inside the social links. You could also use SVGOMG to clean the SVG-code.
Every code-snippet should be placed inside functions.php within a child theme of TwentyTwenty. Or, you could approach this differently, with classes and namespaces, but that’s a story for another time.
If you don’t know what a child theme is, please read this article about child themes. If you need help, or want to kickstart your own child theme, feel free to comment below and I’ll contact you.
Below you’ll find the code you need to add new icons.
<?php
/**
* Functions & definitions.
*
* @package TwentyTwenty
* @subpackage TwentyTwenty-Child
* @since 1.0
*/
/**
* Map social icons.
*
* @hooked twentytwenty_social_icons_map
*
* @param array $icons Mapped icons.
*
* @return array $icons Newly mapped icons.
*/
add_filter( 'twentytwenty_social_icons_map', function( array $icons ) : array {
$icons['steam'] = array(
'steampowered.com',
'steamcommunity.com',
);
return $icons;
}, 10, 1 );
/**
* Add social icons.
*
* @hooked twentytwenty_svg_icons_social
*
* @param array $icons Registered icons.
*
* @return array $icons Newly registered icons.
*/
add_filter( 'twentytwenty_svg_icons_social', function( array $icons ) : array {
$icons['steam'] = '<svg width="24" height="24" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0027.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z"/>
</svg>';
return $icons;
}, 10, 1 );
That’s all folks! I hope you enjoyed this article.
Have a great day! 😎