WordPress Tutorials

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.

Liquid Web, one of my favorite web hosts, recently announced the addition of Managed WooCommerce Hosting to their product lineup.

It’s impressive (I’ll share why shortly), but first, let me loosely define a few terms so that we’re all on the same page.

Web Hosting – This term broadly applies to any web host (shared, dedicated, or virtual). Generally speaking, you can host any sort of website, regardless of the software used to create the website, with a web hosting company.

WordPress Hosting – All WordPress needs to run is a server (preferably Apache or Nginx) with PHP, MySQL (or MariaDB). You can install and run WordPress on a jillion different web hosts.

Managed WordPress Hosting – These are web hosts that are specifically configured and optimized to run WordPress sites. The work of keeping the software monitored, patched, and up to date is “managed” for you. Additionally, when you need support, you won’t be dismissed outright because “WordPress is third-party software and we don’t support third-party software.” Instead, you’ll be met with knowledgeable support people that are happy to help. I have personal experience with three Managed WP hosts: Liquid Web, WP Engine, and Flywheel.

Managed WooCommerce Hosting – Take Managed WP Hosting and then factor in a hosting environment specifically configured and optimized for WooCommerce, a major e-commerce platform that runs on top of WordPress. Then throw some nice features specific to e-commerce on top of that. That’s the topic of this post. Liquid Web is the first to offer managed hosting specifically for WooCommerce sites.

All clear?

Before we go further, you should know that I am an affiliate partner with Liquid Web. If you decide you want to sign up with them, I don’t care whether you use my affiliate link or not. But know that if you do use it, I’ll look like this.

** Liquid Web Coupon Code **

Get 35% off 3 months when you sign up for Liquid Web’s Managed WooCommerce Hosting using coupon code CARRIEWP

What you need to know about Liquid Web Managed WooCommerce Hosting

Depending on who you are, there are different details you want to know. Feel free to skip to the section that most interests you.

• Your experience as a Liquid Web customer
• Your experience as a shop admin
• Your experience as a shop owner
• Your experience as a developer (plus the nerdy technical details)

If you’re reading this and don’t care about WooCommerce, but want to know more about Liquid Web’s Managed WordPress, then skip the rest of this article and read my review.

Your experience as a Liquid Web customer

If you’ve used Liquid Web’s Managed WordPress hosting before, you’ll be familiar with the user interface. There’s no cPanel, it’s a customized experience tailored to the needs of someone managing WordPress sites. Other than the slight logo difference (see screenshot below), both dashboards are the same.

If you’re new to Liquid Web, you can get a feel from the screenshot of what account admin looks like. The learning curve to get familiar with (and using it) is minimal.

Once you’re inside /wp-admin, you’ll see some additional plugins not present in regular Managed WordPress that are specifically relevant to WooCommerce. Some are third-party and some are built by Liquid Web. If you care for a list of plugins, leave me a comment and I’ll pull them out.

For the most part, there’s nothing different about the user experience for a Managed WordPress customer and a Managed WooCommerce customer.

Your experience as a shop admin

I’m defining “shop admin” as the person who manages the store from within the WordPress install. That’s the person adding products, creating shop coupons, managing store settings (i.e. shipping, payment gateways), etc.

The good news is that if you’re already familiar with WooCommerce, your learning curve for working with Managed WooCommercce is approximately zero. If you’re new to WooCommerce, God bless you and grab yourself a full pot of coffee. Here’s the documentation.

The biggest difference you’ll notice is some cleaned-up admin columns on the product and order pages. You’ll get the ability to add custom tabs on products and print PDF invoices (or packing slips). You also get to specify a custom thank-you page on a per-product basis, something you can’t natively do with WooCommerce.

Your experience as a shop owner

This is really the most important part, right? This is the part where improvements to the hosting infrastructure literally translate to dollars in your pocket.

Hosting that grows with you (dynamically)

There are two surprises that no store owner wants to get:

1. Traffic spikes that result in overage charges on your hosting account (paying more money)
2. Or, even worse, traffic spikes that cripple your site’s performance (losing sales)

With traditional hosting, you’re either in a plan that fits just right 90% of the time or you’re in a plan that’s too big for you 90% of the time (but fits snug on big traffic days, like Black Friday). Either way is a bummer. If you’re on a  just right plan, you blow out your britches on Thanksgiving weekend and have to endure downtime while your host moves you into a bigger outfit. But if you’re on the big britches plan, then 90% of the time you’re paying for space you’re not using.

Liquid Web’s Managed WooCommerce is specifically designed to dynamically scale with your site’s traffic. That means that if you get an unexpected shout-out on LIVE with Kelly & Ryan and people are adding hundreds (or thousands) of items to your cart by the second, your site will seamlessly respond to make sure every order gets through. No downtime, no loss. And, no surprise fees for the trouble.

Plan ahead for promotions

In the previous example of an unexpected traffic spike, Liquid Web is working behind the scenes to make sure you’re covered. Now, what about when you have expected traffic spikes (think Black Friday or Cyber Monday)? You’re covered here, too.

You get access a variety of performance tests you (or your development team) can request at any time to simulate various scenarios on your site. That gives you the ability to address potential issues or make improvements ahead of time so that when the people come, you’re ready to take their money. 🙂

If you’re migrating an existing WooCommerce site over to Liquid Web (which they help with), those performance tests are automatically run after your site is moved.

Data you can do stuff with

Google Analytics is awesome, no doubt,  but if you’ve ever tried to decipher the data and turn that into actionable information, you know that “difficult to do” is an understatement.

Liquid Web partnered up with Glew, an e-commerce analytics company, to deliver business intelligence you can act on to increase your profits. You know, data you can do stuff with. I’ve never played around with Glew so I can’t comment on the specifics, but access to meaningful data that’s easy to interpret is always a good thing.

After you create a new Liquid Web Managed WooCommerce account, you’ll receive access to your Glew account. You’ll then need to connect it to your Google Analytics account (its pretty straightforward to do, but Liquid Web will help you as needed). It costs $$ to use Glew, but the good news is it’s included in the cost of the hosting account.

Cart recovery

Research shows that nearly 70% of shoppers put something in their cart and never complete the purchase. That’s Cart Abandonment in web jargon.

Liquid Web partnered with Jilt, the leader of abandoned cart technology, to give you a way to reach out (via an email sequence) to those customers who jump ship. According to Jilt’s Head of Product, Beka Rice, around 15% of customers come back and complete their purchase after getting an email nudge. That’s money just laying on the table. With zero effort after the initial setup of a Jilt campaign (which took me 30 seconds to set up based on their pre-existing templates), you could recoup 15% of those lost sales*.

* Your mileage may vary

As with Glew, you’ll get access to your Jilt account after your Managed WooCommerce Hosting is set up. The cost of using Jilt is also included in your hosting, so no extra payout for cart recovery! Although Glew and Jilt are automagically tied to your Liquid Web account, you’ll still need to login into their respective dashboard to set up your services and access data.

Basically, if you make money with your WooCommerce website, everything in Liquid Web’s Managed plan is designed to help you make more of it. You can find cheaper (lesser) hosting plans elsewhere, but you’re gambling with your revenue. At the time of this writing, there is not a comparable hosting product on the market.

Your experience as a developer

With Liquid Web’s Managed WP Hosting, you get features like site staging, 1-click restore from backup, SSH access to the server, and stencils (think “blueprints” you can use to punch out a new site identical to an existing site). With Managed WooCommerce you get all of those same features.

There’s nothing new to “see,” per se, but there’s some really cool stuff happening under the hood.

Dynamic resizing without downtime

More RAM, more disks, more CPUs – Liquid Web’s throwing resources at a Managed WooCommerce site dynamically, as needed. But you’re a developer, so I know you want to know what that really means, so I asked Liquid Web to expound. 🙂

Here’s what they said: The platform is a Kubernetes-managed container-based cluster.

Pour some milk on that and eat it for breakfast. There are integrations running so that things like image compression, reporting and analytics, and search indexing aren’t running on the store’s servers. The heavy lifting is done elsewhere. That’s one of the ways Liquid Web is able to keep WooCommerce sites so performant.

High performance under heavy load

If you’ve done any back-end development with WordPress, you’ve probably cringed at the data structure. Dump WooCommerce on top of that and you’ve got a ridiculous amount of queries clogging up the airwaves.

How do you make that better? You go around it.

Liquid Web’s Managed WooCommerce uses a custom table to store order data, reducing query loads by 95% and increasing capacity by more than 75%. The logic behind this is out in the open on Github.

Pre-written performance tests

Imagine you’re the developer for a client running a WooCommerce site. Imagine that client is announcing a huge product launch (to a huge customer base) and it’s happening right now. Imagine that you’re sleeping soundly and your phone/inbox are quiet because everything’s going perfectly with that product launch. 🙂

No matter how hard you plan for contingencies ahead of time, there’s always the chance that everything will go to hell in a hot minute on a client’s site. Liquid Web gives you the ability to run performance tests on the site at any time in a like environment so that you can troubleshoot the heck out of issues before they become problems.

And if you’re not sure which performance tests to write and scenarios to test, Liquid Web’s pre-written 20+ of them for you (i.e. load tests for thousands of concurrent users). You’re the hero on launch day.

Schema Dreama

I wasn’t sure to mention this as a treat for developers or store owners. I guess it’s both. As a developer, you already know that schema plays a huge role in helping Google (and other search engines) accurately index site content.

Steve Grunwell (a Liquid Web developer and all around really nice guy) is working on a plugin called Schemify, which is meant to streamline the process of creating JSON-LD objects for WordPress content (as an alternative to Schema markup). Liquid Web is leveraging this plugin to add structured data to its WooCommerce sites.

The SEO benefit is definitely something you can use as a selling point with clients.

More than just a plugin…

I’ve come to expect certain features from a Managed WordPress host, things like auto-updates, staging sites, and performance tweaks to the server (and of course Liquid Web does all of that well).

When I saw the first headline fly by about the announcement for Liquid Web’s Managed WooCommerce Hosting, I thought maybe it was just Managed WordPress hosting with the WooCommerce plugin bolted on.

After digging into it, I know that’s definitely not the case.

Changes to the admin interface are minimal (and subtle). Those changes are nice, but the real part to get excited about is what’s happening in the background. If Liquid Web can deliver on what they’re promising, store owners should see a marked improvement in site speed and overall performance, even when a site’s under stress. If you earn your living with your website, do yourself a favor and checkout Liquid Web’s platform.

My Experience with Liquid Web and their Managed WooCommerce Hosting

I’ve had a client running on the Shopp plugin for WordPress for several years, but had been repeatedly running into issues. I wanted to move her over to WooCommerce as it’s just my preferred e-commerce plugin for selling physical goods.

Anyhow, she was already hosting on LiquidWeb, so I approached their team about helping me figure out how to migrate her store from Shopp to WooCommerce.

Here’s what I got:

When we say our goal @LiquidWeb is to be the most helpful humans in hosting, we’re talking about folks like @stevegrunwell who created a custom WP-CLI command for @cdils so that her customer could easily move from #shopp to #woocommerce. That’s helpful!

— Chris Lema (@chrislema) March 2, 2018

A big win for my client in terms of ease of store management and a big win for me (I was expecting a very difficult migration and the LiquidWeb crew made it easy). If you’d like to learn more, I wrote a case study.

Staging sites are to WordPress hosting as responsive design is to the web: At this point, there’s an expectation that those things just are.

Not all WordPress hosts have gotten on the staging site bandwagon yet, but the best of them have. If you’re not familiar with what a WordPress staging site is, here’s my definition:

A staging site is an exact duplicate of your live site – it’s a place where you can safely install new plugins or try different configurations without the danger of messing up your live site. Once you’ve made any changes you want to your staging site, you can “push” it to your live site.

We good?

I’ve written before about how to use site staging with Flywheel, but in this post, I’d like to cover what it’s like to work with WP Engine staging. At the end of this article, I’ll also tell you how developers can use it for free.

There are affiliate links for some products mentioned in this post. I only recommend things I use and find valuable to my business.

WP Engine Staging Sites

There is only one way to stage sites with WP Engine, but you’ll hear it referred to differently based on whether you’re working on an existing site OR spinning up a new site for a client.

Staging = you already have an existing live site with WP Engine and you want to work on a staged version of it.

Transferable install = you want to spin up a new site, but intend to transfer that site to your client’s account in the future. And you want to work on a staged version of it.

WP Engine Staging for existing sites

If you need to do a plugin update or make a quick change, you can use WP Engine’s staging feature inside of /wp-admin to quickly spin up a copy of the site to test changes and updates. You can then push to production with one click and roll back changes if things go wrong.

Is this hard to set up? Nope!

If you’ve already got a live website hosted on WP Engine, then you already have site staging set up. To use it is go to the WP Engine menu item from your WordPress admin, click the Staging tab and then click the Copy site from LIVE to STAGING button.

Once you click that button, it’ll take a few minutes (or longer, depending on the size of your site) to set up your WP Engine staging site. You’ll see a status notification like this once your site is ready. Note that the URL is specific to your staging site.

To edit your staging site, go to that URL and tack on /wp-admin to login (just as you would with your live site) and use the same credentials as your live site.

Once your changes to the staging site are complete, click the Deploy site from STAGING to LIVE button and you’re all set!

WP Engine Staging for NEW sites (Transferable Installs)

The other type of staging is for new sites and WP Engine calls these “transferable installs.” The idea is that you set up a new site for a client to review (or whatever) and then when the site is complete, you transfer the payment and the install to your client’s account.

This is awesome, by the way. Flywheel was the first to roll out billing transfer in the managed WordPress space and I’m so glad to see WP Engine offering it as well. It takes so much headache out of those early conversations with the client, which used to go like this:

• Give me your credit card and I’ll set up your account! (awful)
• OR – You, dear client, can wade through all the options on a hosting site and create your account and then send me your login! (terrible)

Transferable installs are awesome because they leave the nerdy parts (like account creation/setup) to the developer and the payment part to the client. Also, if you’re a WP Engine affiliate, any transferable installs you create for a client (that are eventually paid) can earn you an affiliate commission.

I describe this process in more detail below.

How you should use site staging

WP Engine staging sites are not an ongoing playground for changes. Every time you want to make a new round of revisions, you should start with a “fresh” staging site. The workflow would ideally go like this:

1. I have a live site and I want to update some plugins or make some other changes so…
2. I copy the site from LIVE to STAGING and then…
3. I make whatever changes I want on the staging site and then…
4. I then deploy the site from STAGING to LIVE

If a week goes by and there are more changes to make, repeat those steps above (i.e. don’t skip to #3). The reason for this is that things have likely changed on your live site in the interim, such as a new user comment, a new post, or maybe an auto-update to WordPress. If you skip to #3 and dive into making changes on your staging site, you lose whatever new things are on your live site.

So, always start fresh with copying the live site to staging.

WP Engine’s Developer Program

I love free things. From t-shirts to meals to beer, I love free stuff. I also love that WP Engine is offering free unlimited staging to freelancers and agencies via their Developer Program.

Here’s how it works.

Step 1

Apply to join the developer program.

If you’re approved, you’ll get free WP Engine Personal account ($29/mo value). Typically this would come with staging for the 1 live site on your personal account, but with the developer program, you get as many staging sites as you want.

Note that these are password-protected WordPress installs (the staging sites, not your 1 live site). Flywheel does the same thing and this bugs me because it makes it difficult to work with certain deployment tools or use 3rd party sites for performance testing. WP Engine does at least offer nice speed performance tools that will work with staged sites. I get why they use password protection, but let the record reflect my annoyance. 🙂

Step 2

Create a brand new site: Spin up a new site in your WP Engine dashboard and get to work for your client.

OR migrate an existing client site: Same as with a brand new site, spin up a new install. Then use the WP Engine migration plugin to move a new customer’s site into your free account. All the customer needs to do is give you /wp-admin access and then you can use the plugin to move the site.

There’s also “site migration” link in your dashboard you can use to get all the credentials you’ll need for migrating the site. That’s a nice touch to have that info in one spot for easy access.

Step 3

Add free SSL. Use Git Push. Run performance tests. Make an awesome website.

Step 4

When you’re ready to launch…

Within the WP Engine portal, you can select to “transfer the site” to any email address you’d like. If your client is an existing WP Engine customer, they can “accept” the transfer via a link in a confirmation email. Non-WP Engine customers can sign up for a new account and have the site you built for them automatically transferred. Existing customer or not, it’s a pretty hassle-free experience for your client (which makes you look awesome)/

WP Engine will also co-brand notification emails with your logo and can automatically insert your affiliate link for new customer sign-ups (Did I mention WP Engine pays a minimum of $200 per referral?).

And if your client doesn’t want to host with WP Engine for some reason? You can transfer client sites to 3rd party hosts using typical FTP workflows.

Go get on stage!

Whether you’re an existing WP Engine customer or not, if you create websites for clients, go join the developer program.