Twenty Twenty is WordPress’ default theme for 2020 and it includes a Social Icons Menu. You can add links to your social media profiles, and they’ll be displayed as logos in your footer. By default, it supports only 35 social media websites, and lacks Telegram, WhatsApp, and other messenger icons. In this tutorial we will learn how to add custom icons to the Social Links Menu for our Twenty Twenty child-theme.
First, read here how to create a Social Links Menu.
How to add a custom icon (Telegram example):
/* add this to your functions.php inside Twenty Twenty child theme */
function mychildtheme_twentytwenty_social_icons_map( $icons ) {
$icons['telegram'] = array(
't.me',
// list domains here
);
return $icons;
}
add_filter( 'twentytwenty_social_icons_map', 'mychildtheme_twentytwenty_social_icons_map' );
function mychildtheme_twentytwenty_svg_icons_social( $icons ) {
$icons['telegram'] = '<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 300 300"><path d="m5.299 144.645 69.126 25.8 26.756 86.047c1.712 5.511 8.451 7.548 12.924 3.891l38.532-31.412a11.496 11.496 0 0 1 14.013-.391l69.498 50.457c4.785 3.478 11.564.856 12.764-4.926L299.823 29.22c1.31-6.316-4.896-11.585-10.91-9.259L5.218 129.402c-7.001 2.7-6.94 12.612.081 15.243zm91.57 12.066 135.098-83.207c2.428-1.491 4.926 1.792 2.841 3.726L123.313 180.87a23.112 23.112 0 0 0-7.163 13.829l-3.798 28.146c-.503 3.758-5.782 4.131-6.819.494l-14.607-51.325c-1.673-5.854.765-12.107 5.943-15.303z"></path></svg>';
return $icons;
}
add_filter( 'twentytwenty_svg_icons_social', 'mychildtheme_twentytwenty_svg_icons_social' );Source: “Themes field guide: WordPress 5.5“
Where to get icons?
Just google "your icon name svg" or check iconmonstr. Use SVGOMG to optimize your SVG files.
Default icons
Twenty Twenty’s Social Icons Menu by default supports following websites:
- Behance
- Codepen
- DeviantArt
- DockerHub
- Digg
- Dribbble
- Dropbox
- Flickr
- Foursquare
- GitHub
- Google+
- Meanpath
- Medium
- Periscope
- Skype
- SlideShare
- Snapchat
- SoundCloud
- Spotify
- StumbleUpon
- Tumblr
- Twitch
- Vimeo
- Vine
- VK
- WordPress
- Yelp
- YouTube