Prevent WordPress Emails in Stage or Local Environments

When you’re developing a WordPress site locally or testing in staging, you’ll generally want to prevent the site from sending out emails to customers or users.

I’ve noticed that a number of other WordPress developers are fans of MailHog (great write up by Jonathan Christopher), but in many cases it’s easier if you don’t have to install anything additional on the server.

I use two plugins to block and then log emails:

“Disable Emails” prevents the emails from sending from WordPress, and “Email Log” is able to capture their contents in case you need to view them.

Since I sync my production environment to staging and local quite frequently, I have a script in my theme that activates these plugins when it detects the new environment.

Using Scroll Reveal for Animation Effects

I’ve been rebuilding a WordPress site that was originally set up using a popular ThemeForest theme and Visual Composer. The theme made it really easy to add animation effects that occur on scroll (as specific elements come into view), but extracting the code for animations wasn’t super easy (it’s part of a 600kb javascript included by theme and mixed with inline styles from Visual Composer).

However, after testing a few different libraries, I found Scroll Reveal worked best as a replacement (3k minified & gzipped). Continue reading

Automated WooCommerce Testing with Ghost Inspector

WooCommerce sites are made up of a complex set of integrated parts. There’s WordPress, WooCommerce itself, other third-party plugins, and a theme. Each of these components require frequent updates and has the potential to break critical functionality on your site. This is why it’s critical to have automated tests.

For a WooCommerce site I used to work with, we had a checklist of items we would manually run through after any major update:

  • Verify products on home page look correct and load
  • Test “Add to Cart” button
  • Test removing item from cart
  • Verify all product on /shop page look correct
  • Test complete checkout with Stripe for guest checkout
  • Test complete checkout with PayPal for guest checkout
  • Test complete checkout with Stripe with coupon for guest checkout
  • etc.

Needless to say, this took a lot of time. Thankfully, tests like this can all be automated using Ghost Inspector.

Continue reading

How to Set JSON Endpoints in WordPress to Access an External API

There’s a lot of JSON-based APIs that only provide access through server-side methods. If you want to use client side javascript with one of these external APIs, you’ll need to have your server access the data and serve it through ajax requests or your own JSON endpoint. Thankfully, this is really easy to do with WordPress.

In this example project, I’ll show how to get shipping rates from the Easy Post API with a custom WordPress endpoint. Continue reading

Multiple Domains, Tracking and Third-Party Cookies

Tracking anonymous visitors across multiple domains is difficult because cookies can’t be shared across domains. One way around this is to use an iframe to set the cookie, which works well in Chrome, Firefox, and Edge. However, Safari prevents a challenge because it prevents third-party cookies from being set.

I haven’t found a solution for the Safari issue yet, but thought I’d share the method I’ve worked out for cross domain tracking with Mixpanel for the remaining browsers.

For the example, I’ll use domains a A.com and B.com. A.com is the primary website and B.com is a marketing website that refers traffic to A.com.

On domain A.com you’ll need to set up an URL that loads the tracking code when it’s called inside of an iframe. We can pass tracking data from B.com to the iframe using a query string, and an efficient method for passing that data is by base64 encoding an JSON object. Continue reading

Working with the Mixpanel API

We use Mixpanel at Cratejoy to track a lot of user interactions across the sites. However, there was a lot of profile data we were storing (and paying for) that we weren’t actually doing much with. So, I decided to see if it was possible to back up this data locally, create re-import files (in case we ever needed it again), and then delete in bulk.

Here’s some notes and tips about that process. Continue reading

How to Overwrite a Theme

If you’re trying to install a theme update manually, you might get this message:

Installing the themeā€¦
Destination folder already exists.
Theme install failed.

In order to update the theme, you’ll actually need delete the current version before you can upload the new one.

Here’s how to do that:

  • Go to “Appearance > Themes”
  • Temporarily switch to an alternate theme
  • Then, click “Theme Details” for the theme you are trying to replace
  • Click the “Delete” link in the bottom right
  • Now click the “Add New” button and upload the new theme version
  • Switch to the new version of the theme you uploaded