Add Houzz Icon to Simple Social Icons Plugin


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

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:

<svg id="social-houzz" viewBox="0 0 54 60" xmlns="http://www.w3.org/2000/svg">
<path d="M-20-20h94V80h-94z" fill="none"/>
<path d="M34 60h20V25.5L14 14V0H0v60h20V40h14z"/>
</svg>
view raw houzz.txt hosted with ❤ by GitHub

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. 🙂

<?php //remove this line
add_filter( 'simple_social_default_profiles', 'biw_add_new_simple_icon' );
/**
* Add Houzz icon to Simple Social Icons plugin.
*
* @param array $icons Social icons to include in widget options.
*
* @return array Updated icon set.
*/
function biw_add_new_simple_icon( $icons ) {
$icons['houzz'] = [
'label' => __( 'Houzz', 'simple-social-icons' ),
'pattern' => '<li class="social-houzz"><a href="%s" %s><svg role="img" class="social-houzz-svg" aria-labelledby="social-houzz"><title id="social-houzz">' . __( 'Houzz icon', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( get_stylesheet_directory_uri(__FILE__) . '/images/houzz.svg#social-houzz' ) . '"></use></svg></a></li>',
];
return $icons;
}
view raw functions.php hosted with ❤ by GitHub

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.

19 thoughts on “Add Houzz Icon to Simple Social Icons Plugin”

  1. I worked it out!! Found the SVG code on iconify.design and had to change the code aria-hidden=”true” to false and it works! Thanks so much for this post.

  2. Hi Carrie,
    Great article indeed! I wanted to let you know that I applied the code in one of my sites and it worked great.
    Thanks for sharing such an amazing article.

  3. Pingback: Código personalizado - Iconos sociales simples - Agregar 'Houzz' - Fixing WordPress Wordpress en español

  4. Pingback: Codice personalizzato - Icone social semplici - Aggiunto "Houzz" - Sistemare WordPress Wordpress in Italiano

Leave a Comment

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

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.