Category: WordPress

Docker WordPress

Almost a year ago now, I started a Docker image for WordPress so I could guarantee there would be new builds available immediately after new WordPress releases.

Since I was working on an image anyway, I decided to build in support for Memcached. Object cache plugins like Memcached Object Cache are pretty common on high traffic WordPress sites.

I also set up wp-config.php to load some of the configuration options from environment variables. To make the image a little more extensible, I also have it automatically loading PHP files in the /var/www/html/wp-config directory. You can mount a volume with all your extra config files in the container to automatically load them.

After the initial setup, maintenance was super easy. Docker Hub automatically builds every time I push to GitHub. I’ve also got a script that checks for new WordPress and WP-CLI releases and automatically pushes updates to GitHub.

There are currently PHP 7.3 builds for WordPress core (PHP-FPM) and WP-CLI available.

I moved this site over to an awesome new .blog domain a few weeks ago. You can get your own at or any number of other registrars.

Today I decided to build a new WordPress theme to go along with the new domain. It’s been a while since I built a WordPress theme. For the last few years I had been using the default themes that ship with WordPress. It was fun to play designer again for a few hours.

I’m starting with something very simple — there’s not even support for comments yet.¬†Though, I have a few ideas I’d like to experiment with if I have time. If you would like to use the theme or contribute, it’s over on GitHub.

Lossy Compression with Photon

Photon, the image service hosted by Automattic, does lossless compression automatically. Page Speed¬†will probably still complain that images aren’t compressed enough. Luckily, Photon has a way to fix that.

There are a couple of parameters, quality and strip, that will further reduce the file size of JPEG images. Quality is pretty straight forward. The strip parameter will let you strip EXIF and color data. I use a snippet like this to set the quality to 80% on my site.

The results can be pretty dramatic. At full size, this image of downtown Madison goes from 16MB to 2.7MB by setting the quality to 80%.¬†That’s a big deal on a mobile connection and it’s pretty hard to spot the difference on most images unless you’re looking at them side by side.


Listless Nav Menu in WordPress

Chris Coyier recently posted an article about using lists in navgiation on CSS Tricks. I tend to agree that they’re unnecessary. The first time I built a menu with a nav wrapping a ul wrapping a bunch of li‘s wrapping a bunch of a‘s it felt gross, but I did it because I thought that was easier for screen readers to understand.

I just redesigned my site and decided that I wanted a simpler structure for my menu this time. Since WordPress builds menus in lists, I created a custom walker class for wp_nav_menu that formats the menu the way I want.

That looks like a lot. It’s mostly just a copy of the Walker_Nav_Menu class with a few things changed:

  • Change the default container to ”
  • Change the default wrapping element to nav instead of ul
  • Disable a fallback1
  • Change the sub-menu element to div instead of ul
  • Remove the li wrapping each link
  • Put the id and class‘s that would normally go on the li on the a instead.

Of course, you have to tell your nav menu to use this walker. Since this disables the fallback if you don’t have a menu set, you’ll have to specify a menu.

  1. Unfortunately the fallbacks generally aren’t compatible with custom walkers ‚ÄĒ at least not the same custom walker that can be used for wp_nav_menu