Code

Critical path CSS can’t use wp_enqueue_style, which leads to a messy . This post shows how to add inline critical CSS cleanly using wp_enqueue_scripts.

Setting a cookie in Wordpress the right way — using a PHP action rather than setcookie() in header.php. Useful for caching critical CSS after the first visit.

Centring a logo between navigation items in a Wordpress menu can seem tricky. This post shows a clean solution using flexbox, avoiding the need for two menus or JavaScript.

How to build a horizontal scrolling navigation using flexbox. A follow-up to the inline-block method, covering the advantages flexbox brings to this pattern.

Darkening a colour for gradients can look dirty. Using Sass’s adjust-hue and scale-color functions you can create gradients that look far more harmonious.

How to use the Wordpress customiser to create live-editable text and image regions. Real-time editing makes decisions about layout and content much easier.

The letter-spacing property adds space after the last letter, which causes misalignment on centred or right-aligned text. Here’s how to fix it.

How to set up Wordpress custom fields without a plugin. Covers adding them efficiently, applying custom CSS, changing placement, and using them in your theme.

How to add srcset support to Wordpress post thumbnails. A custom function mirroring the_post_thumbnail() that outputs the srcset attribute for responsive images.

Sass maps can provide some powerful functionality to make life easier and less repetitive. I’ll cover briefly how to use them and then detail some of the cases that I use them, as I don’t think the benefits are immediate.

Using CSS mix-blend-mode to apply vintage-style photo filters, much like you would in Photoshop. Includes a live demo to test the different filter options.

‘A few flexbox techniques you can use today without worrying about older browser knock-on effects. Handy when you don’t have time for a full flexbox layout.’