Categories
How-tos WordPress

[How-to] Add new social icons to TwentyTwenty-theme

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.

You can follow one of the examples below (click = jump to example):

  1. Classes and namespaces (OOP-ish).
  2. Functional programming.

Example 1: Classes and namespaces (OOP-ish)

Create a folder called classes and a file called SocialIcons.php inside that folder within your child theme. Paste the code below inside the newly created file.

<?php
/**
 * SocialIcons Class.
 *
 * PHP version 7.4.1
 *
 * Example 1: Classes and namespaces (OOP-ish)
 *
 * @category   WordPress_Theme
 * @package    TwentyTwenty
 * @subpackage TwentyTwenty-Child
 * @since      1.0.0
 */

declare ( strict_types = 1 );

namespace Henjak;

defined( 'ABSPATH' ) || exit;

/**
 * Setup social icons.
 *
 * @since 1.0.0
 */
class SocialIcons {

	/**
	 * Initialize class methods.
	 */
	public function init() {
		$this->setup_filters();
	}

	/**
	 * Setup filters.
	 *
	 * @see init()
	 *
	 * @return void
	 */
	private function setup_filters() {
		\add_filter( 'twentytwenty_social_icons_map', array( $this, 'map_social_icons' ) );
		\add_filter( 'twentytwenty_svg_icons_social', array( $this, 'add_social_icons' ) );
	}

	/**
	 * Map social icons.
	 *
	 * @hooked twentytwenty_svg_icons_social
	 *
	 * @param array $icons Mapped icons.
	 *
	 * @return array $icons Modified icons.
	 */
	public function map_social_icons( array $icons ) : array {
		$icons['steam'] = array(
			'steampowered.com',
			'steamcommunity.com',
		);

		return $icons;
	}

	/**
	 * Add social icons.
	 *
	 * @param array $icons Registered icons.
	 *
	 * @return array $icons Modified icons.
	 */
	public function add_social_icons( 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;
	}
}

Then, in functions.php:

<?php
/**
 * Functions & definitions.
 *
 * Example 2: Classes and namespaces (OOP-ish)
 *
 * @package    TwentyTwenty
 * @subpackage TwentyTwenty-Child
 * @since      1.0.0
 */

// Require the file.
require_once get_stylesheet_directory() . '/classes/SocialIcons.php';

// Instantiate the class.
$social_icons = new Henjak\SocialIcons();

// Initialize class methods.
$social_icons->init();

Example 2: Functional programming

If you are approaching this with functional programming, copy the snippets below to your functions.php file.

<?php
/**
 * Functions & definitions.
 *
 * Example 2: Functional programming
 *
 * @package    TwentyTwenty
 * @subpackage TwentyTwenty-Child
 * @since      1.0.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! 😎

Leave a Reply

Your email address will not be published. Required fields are marked *