👋 I'm Mike, a software developer at Automattic, building things with PHP & React, for WordPress & WooCommerce. I write about my hobbies and the projects I work on.

Mario Lego came!

Switching from Vagrant to Docker

I've been experimenting with Docker as an alternative to Vagrant (and VVV) for WordPress development.

I had looked into Docker in the past, but given how easy Vagrant and VVV were, I was in no hurry to switch. VVV still is awesome (there is an excellent getting started guide here), but since settling on Vagrant, the tools and ecosystem around Docker have significantly improved.

Mainly to satisfy my own curiosity, but also hoping to use less system resources (since I currently code on a Macbook Air) I finally gave Docker a fair chance. I wanted to share some of the things I’ve learned over the past week whilst switching.

Continue reading “Switching from Vagrant to Docker”

Building a cross-browser compatible, multi-handle range slider

Range Inputs are HTML elements which let users select a numeric value between a specified minimum and maximum value. They support single values by default.

As part of the WooCommerce Blocks project we’ve been working on converting WooCommerce widgets to Gutenberg blocks. One of those happens to be a price slider which currently uses jQuery UI. For blocks we’re using React.

Rather than use a library, we were really keen to use native range inputs to keep our dependencies to a minimum, and so the range inputs were semantic and keyboard accessible. Our idea was to overlay 2 range sliders to form a single component. I’d like to share some of my findings.

Continue reading “Building a cross-browser compatible, multi-handle range slider”

I made a Super Mario Themed Nursery

Last year, before the birth of my first son, I was able to get creative and decorate the nursery. Being a huge fan of video games (and retro style graphics!) logically I chose a Super Mario theme for the room and set about making plans to create a large wall mural and other themed objects (as well as doing the boring adult stuff like flooring and painting the walls).

Continue reading “I made a Super Mario Themed Nursery”

WooCommerce 3.3 – Hide uncategorized category from the shop page on the frontend

<?php // Do not include this if already open!
* Code goes in theme functions.php.
add_filter( 'woocommerce_product_subcategories_args', 'custom_woocommerce_product_subcategories_args' );
function custom_woocommerce_product_subcategories_args( $args ) {
$args['exclude'] = get_option( 'default_product_cat' );
return $args;

view raw


hosted with ❤ by GitHub

Small drop-in plugin to fix double-serialized product attributes (they are no longer double-unserialized in WC Core)

* Plugin Name: Double serialized attributes fixer
* Description: Adds a tool to fix double serialized attributes in WooCommerce.
* Version: 0.0.9
* Author: Mike J
* Requires at least: 4.4
* Tested up to: 4.7
if ( ! defined( 'ABSPATH' ) ) {
add_filter( 'woocommerce_debug_tools', 'double_serialized_attributes_fixer_tool' );
function double_serialized_attributes_fixer_tool( $tools ) {
$tools[ 'double_serialized_attributes_fixer' ] = array(
'name' => 'Double-serialized attributes',
'button' => 'Fix double-serialized attributes',
'desc' => 'This tool will attept to fix all double-serialized attributes for products.',
'callback' => 'double_serialized_attributes_fixer',
return $tools;
// Fixes double-serialised values – #14824.
function double_serialized_attributes_fixer() {
global $wpdb;
$product_ids = wp_parse_id_list( $wpdb->get_col( "SELECT ID FROM {$wpdb->posts} WHERE post_type = 'product';" ) );
foreach ( $product_ids as $product_id ) {
$attributes = get_post_meta( $product_id, '_product_attributes', true );
if ( is_serialized( $attributes ) ) {
$attributes = maybe_unserialize( $attributes );
update_post_meta( $product_id, '_product_attributes', $attributes );