WordPress Development Tutorials & Code

Code I use on real WordPress sites, written up so you can use it too. Responsive layouts with CSS Grid and Flexbox, an accessible navbar, an email sign-up modal that doesn’t annoy people. Most posts come with the full code and a working demo, so you can skip straight to the finished version if you’d rather.
I build custom themes by hand, without page builders. So these lean towards plain HTML, CSS and a little JavaScript, not another plugin. For speed fixes, see Performance & Core Web Vitals, and for the decisions that come before any code, Design & Planning. If something here doesn’t work on your site, or you’d rather hand the job over, drop me a message.

17 November 2025

A respectful email capture modal for WordPress (that your visitors don’t hate)

What a respectful email capture modal should do You’ve probably seen the bad ones: they slam over the content the second the page loads, ignore the Escape key, and keep reappearing even after you’ve clearly said “no thanks”.This post walks through the email capture modal I use on my own site. It’s:Accessible, like my responsive...

16 October 2025

Build a Responsive Navbar with Flexbox: an accessible, mobile-first pattern

For good reason A responsive navbar with Flexbox should be simple to scan, easy to operate on mobile, and friendly to screen readers. This pattern gives you a clean, accessible header that collapses to a tidy mobile menu with a small, smooth animation. No libraries. Minimal CSS. A dash of JavaScript to toggle state correctly.If...

26 August 2025

How to Use CSS Grid and Flexbox for Clean & Responsive Layouts

Grid vs. Flexbox for real-world responsive layouts When it comes to building modern websites, two CSS tools dominate responsive layout work: Flexbox and CSS Grid. Both are powerful, but they solve different problems. In this guide, I’ll show you how to use each one, when to choose one over the other, and how to combine...