Josh Betz

Engineer, Wisconsinite, coffee addict.

josh.blog

I moved this site over to an awesome new .blog domain a few weeks ago. You can get your own at get.blog 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.

Donald Trump Dangit

Last week Wired published an article with references to Donald Trump replaced with ‘someone with tiny hands’. Since this is obviously a problem, I have a solution, donald_trump_dangit. It will replace ‘someone with tiny hands’ with Donald Trump, so you can use the handy Drumpfinator extension without worry.

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.

Madison

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