fbpx
NeONBRAND Marketing & Business Development Experts
Contact Us
Site Navigation
  • Home
  • SEO
  • Social Media
  • Websites
  • Consulting
  • Contact Us
    • Las Vegas, NV
    • St. George, UT
    • Cedar City, UT
    • Provo, UT
  • Extras
    • About
    • Team
    • Portfolio
    • Website Hosting
    • Blog
    • Ebooks
    • Digital Marketing Dictionary

How to add Slack to Genesis Simple Social Icons Plugin

Originally posted: May 3, 2017 by Kenny Eliason. Leave a comment
Scroll to Next
Slack-Desktop-Screenshot
Get Updates to Your Inbox!
This field is for validation purposes and should be left unchanged.

Home » Websites » Website Design » How to add Slack to Genesis Simple Social Icons Plugin

Reading Time: 2 minutes
  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn

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.

  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn
Published: May 3, 2017
Updated: September 18, 2021
Headline: How to add Slack to Genesis Simple Social Icons Plugin
Image: Slack Logo Height: Width:

Image: Height: Width:

Publisher: NeONBRAND https://neonbrand.com
NeONBRAND https://neonbrand.com/app/themes/neonbrand/dist/images/logo-gray_280c67fe.png 98 120

« Twitter 101: This is How We Do
Content Marketing Basics »

Leave a Reply Cancel reply

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

About the Author
Kenny Eliason
Kenny Eliason
Having grown up the son of a marketer, the skills of the trade are pumping through his blood. When you couple that with his programming and computer knowledge, you get an explosive combination. Kenny has been an avid digital marketer for over 9 years now, often being the first to recognize the hottest trends coming to the market. In his free time, Kenny loves downhill mountain biking. He calls it his "old man sport" since BMX was what he did as a teenager and it's not quite as easy to ride those little bikes anymore. Kenny is also a huge technology enthusiast, specifically when it comes to Apple products - did someone say, fanboy? Those close to him are often asking for help solving tech-related problems which often results with them saying, "man, you can fix anything!"
Search
Search
Blog Categories
  • Instagram Marketing (6)
  • E-Commerce Support (1)
  • Keywords for SEO (3)
  • WordPress Tips and Tutorials (17)
  • LinkedIn Marketing (2)
  • Consulting (15)
  • Websites (12)
  • Content for SEO (33)
  • Link Building for SEO (6)
  • Marketing Strategy (60)
  • Twitter Marketing (6)
  • Facebook Marketing (33)
  • Local SEO (13)
  • Business Consulting (35)
  • The Kurt & Kenny Podcast! (13)
  • Web Development (4)
  • Video Marketing (10)
  • Uncategorized (1)
  • Website Design (21)
  • Social Media Marketing (94)
  • Search Engine Optimization (82)
  • Home
  • Search Engine Optimization
  • Social Media
  • Website Design
  • Business Consulting
  • Digital Marketing
  • Video Marketing
  • Email Marketing
  • WooCommerce Development
  • Traditional Advertising
  • Retail Marketing
  • Dentist Marketing
  • Hotel Marketing
  • Medical Marketing
NeONBRAND Newsletter
Don't live with FOMO. Get subscribed to our newsletter and never worry about missing the awesomeness ever again.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

(702) 706-NeON
  • Las Vegas, NV
  • St. George, UT
  • Cedar City, UT
  • Provo, UT
  • NW Las Vegas, NV
  • Sitemap
  • © 2023 NeONBRAND. All Rights Reserved.