Limiting WordPress Gutenberg blocks

The default editor in WordPress is somewhat crude. It is just a single (WYSYWIG) text area. All content is added here. Of course you can extend WordPress with custom fields or meta boxes to provide a more structured way of putting content in. You can code them by hand. Or use some plugin to do…

Lazy loading Google Maps with the IntersectionObserver API

For business web sites it is quite common to have a map on the site. In most cases clients want to add a Google Map, because that is what a lot of people use. The problem is that such a map loads a lot of JavaScript and images. These maps are often placed at the…

Using text-decoration-color and text-decoration-skip with underlined links

Currently, I am creating a new WordPress theme and I had to think about which colours to use. I eventually went with a palette based on Abstraction Blue by Georgia O’Keeffe. Part of any web design is the styling of links. One of the goals is to have a good level of accessibility. And it…

Changing the default settings for the WordPress Media Player

WordPress offers the possibility to add videos and audio files. To play these files a default media player is available. It is based on MediaElement.js and has been included since WordPress 3.6. For a project, I recently worked on, videos were used on the web site. By default WordPress displays videos with the control buttons…

Making your WordPress header image responsive

A lot of web sites have a large header image, also known as a hero image. WordPress provides out-of-the box functionality to use these type of images in the design of your web site. Unfortunately most themes put out the full-sized image on every screen size. This wastes bandwidth, because in a lot of cases…