Add Houzz Icon to Simple Social Icons Plugin

Howdy. I’m popping in today with a quick tutorial on how to add a custom icon to the Simple Social Icons plugin. For this example I’ll be adding an icon for Houzz, a website dedicated to home renovation and design.

Warning: There are affiliate links in the post. If you accidentally click on one and buy something, I instantly become independently wealthy and will retire (though I promise to keep writing tutorials in my retirement.

What you’ll need to follow along

To follow the steps in this tutorial you’ll need:

• A self-hosted WordPress website
• Simple Social Icons plugin installed and activated on your website (free from WordPress.org)
• A code editor

Before we get started, note that it’s best if you’re on a local development site or a staging site. NEVER MAKE EDITS TO A LIVE WEBSITE. If you need a refresher, here’s the proper way to edit a WordPress site.

Add a Houzz Icon to Simple Social Icons

Step 1: Get an SVG Houzz icon

The Simple Social Icons (SSI) plugin uses Scalable Vector Graphics (SVGs) to render its icons. Unlike other image formats, SVGs are rendered by the browser dynamically (vs simply being displayed by the browser “as is”).

Since the SSI plugin enables you to adjust the background color, icon color, hover color, and size of its icons, SVGs are perfect.

So, where do you get an SVG of the Houzz logo? Right here. 🙂 A big hat tip goes to Nathan Swartz for providing the original Houzz SVG on his website. Since his post, Houzz has rebranded, so here’s an SVG of the new logo:

If you’ve never seen an SVG before and are thinking this looks nothing like an image, don’t fear. SVGs are written in XML format. It renders as an image in a browser or in an image editor, such as Adobe Illustrator.

You can copy/paste that code into your code editor and name it houzz.svg. Note you can also download the icon file directly from Github.

Save this file to the /images folder in your WordPress theme.

Step 2: Add the code

The next step is for you to open your theme’s functions.php file in your code editor. You’ll want to add the following code somewhere in that file. I said it earlier, but it’s worth repeating: If you’re not sure what you’re doing here, beware: a single typo in functions.php can bring your entire site down. That’s why you don’t edit live sites. 🙂

If you’re not comfortable adding code to your theme’s functions.php AND you’re using a child theme for the Genesis Framework, you can add this custom code via the Genesis Extender plugin.

Step 3: Add the URL via the SSI widget

Once you’ve completed steps 1 and 2 (and made sure to save your files), you can go to either the Customizer for your WordPress site or go to Appearance > Widgets from your WordPress admin and add the Simple Social Icons widget to your desired widget area.

When you open up the widget settings, you’ll now see a field for Houzz where you can enter the URL you’d like the icon to link to. Don’t forget to click Save afterward.

 

Step 4: Admire your handiwork!

Once you save your changes in the widget, you can go to the front end of your website and see your beautiful new Houzz social icon. In this example, I’ve got it displayed along with a Facebook and Instagram icon.

It’s your turn

You’ve now got the full scoop for adding a Houzz icon to the SSI plugin. Of course, you can add any other custom icon that’s not included by default with SSI. You’d follow the same steps in this tutorial with the exception of finding the right SVG and replacing instances of “houzz” in the code with whatever the name is for your social icon.