How to add Slack to Genesis Simple Social Icons Plugin

Recently needed to add a new icon to the Genesis Simple Social Icons plugin and hadn’t ever done it before. Specifically, I was trying to add the Slack icon to the list of icons. Here’s what I figured out:

Adding a New Field to the Widget – Step 1

The first step in adding a new icon to the Simple Social Icons plugin is to add the field to the widget to allow for a new URL to be entered.

You complete this step by adding the following code to either your themes functions.php file or a newly created plugin file.

Here’s the code to add Slack as one of those options. I put this at the bottom of my theme’s functions.php file:

add_filter( 'simple_social_default_profiles', 'ky_add_new_simple_slack_icon' );

function ky_add_new_simple_slack_icon( $icons ) {
$icons['slack-icon'] = [
'label'   => __( 'Slack URI', 'simple-social-icons' ),
'pattern' => '<li class="social-slack-icon"><a href="%s" %s><svg role="img" class="social-slack-icon-svg" aria-labelledby="social-slack-icon"><title id="social-slack-icon">' . __( 'Slack icon', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( get_stylesheet_directory_uri() . '/images/slack.svg#social-slack-icon' ) . '"></use></svg></a></li>',
];

return $icons;
}

add_filter( 'simple_social_default_styles', 'ky_add_new_slack_icon_default' );

function ky_add_new_slack_icon_default( $defaults ) {
$defaults['slack-icon'] = '';

return $defaults;
}

Adding the Slack SVG file to your Theme Folder – Step 2

I searched high and low for a proper SVG file to use here, so if you have one let me know. What I ended up doing was creating an svg from the brand documents found here.

I’ve included my SVG file of the slack icon for convenience, here.

I learned the SVG needed to be 32px high and wide in order to display properly. Also that there could be no reference to colors found in the SVG file either.

Enter the URL of your New Icon – Step 3

After the above has all been added, go to your widget settings and add the appropriate URL to the newly added box.

Pro-tip – Hack

I decided to have this page direct to an application on my site to get access to our slack channel, so I didn’t want this link to open in a new tab like the Facebook and Twitter links did.

If you look closely at the above code and find this line:

<li class="social-slack-icon"><a href="%s" %s>

And replace that string with this string, removing the second “%s”:

<li class="social-slack-icon"><a href="%s">

A link click will now open in the current window, even when the setting is to open in a new tab.