Articles & Tutorials
Check out the latest articles about WordPress development tips and techniques.
How to build place-anywhere blocks with container queries
Container queries let your blocks and template parts adapt to wherever they’re placed, no media queries required. In this post I’ll show you three practical ways to use them, from basic queries to fluid typography with container units.
Building with Synced Patterns and Pattern Overrides
Synced patterns make reusing code across your site a lot easier and since WordPress 7.0 they’ve gotten even more useful. In this post I’ll explain how they work and how to build one.
How contentOnly editing works for patterns and blocks in WordPress 7.0
WordPress 7.0 makes contentOnly mode the default for unsynced patterns, which changes how editors interact with anything you build. Here’s what that means, how to make your blocks play nicely, and how to opt out if it’s not for you.
How to configure the Block Editor with PHP
In this post, I’ll show you ways you can use PHP to filter the block editor’s settings beyond simply editing theme.json. We’ll break down how the block editor settings layers are resolved and go over some practical ways you can adjust settings using PHP.
Intro to the Block Bindings API
If you’ve ever built a custom block just to display a single piece of dynamic data, the Block Bindings API is the feature you didn’t know you were waiting for. You can use this new API to bind dynamic data to specific block attributes.
How to cache queries and API responses with transients
Once you start building more complex things, you may find that you need to implement some kind of caching of your own. In this article I’ll explain how to do so with transients and how this compares to using the options or wp_cache_* methods directly.
How to Build a Custom Mobile Menu Overlay in WordPress 7.0
The navigation block overlay has never been directly customizable in the editor. But as of WordPress 7.0 you’ll have more options to edit the overlay than ever before. Here’s how to register a custom navigation-overlay template part, wire it up to the Navigation block, and handle the accessibility work WordPress doesn’t do for you.
How I Make Colors Easier to Deal With in WordPress Themes
Naming your theme.json colors after what they look like feels natural, but it falls apart fast. Here’s how I use semantic, role-based names, custom properties, and a few lessons learned to keep color manageable.
How I edit WordPress sites with AI using MCP
Turn your WordPress site into an MCP server that AI tools like Claude and Cursor can interact with directly. Learn how to set it up using the Abilities API and MCP Adapter and I’ll share a handy abilities plugin you can use to get started.
How I made the Interactivity API finally click
I struggled with understanding the WordPress Interactivity API until I actually built something with it. I build a dark mode toggle block that made the whole thing click for me. I’ll show you how to build one and how using semantic colors makes dark-mode styling a breeze.
How to set default block styles in a block theme
In this post I’ll walk you through how to style blocks using the Site Editor’s Global Styles interface, how to use “Additional CSS” for more advanced customizations (like hover states and targeting descendant elements), and how to persist everything back to your theme files using Create Block Theme.
How to create a post selector using ComboboxControl for the block editor
Learn how to build a reusable post selector for the WordPress block editor using ComboboxControl and TanStack Query, complete with lazy-loaded pagination for sites with thousands of posts.
Building a Custom Block Part 10: Bringing the Notice Block into the Site Editor
In this final post of the series, we implement the Notice block in the site editor using template parts and modern WordPress theme features.
Building a Custom Block Part 9: Adding Block Toolbar Controls
In Part 9 of Building a Custom Block, we’ll add a custom controls to the block toolbar so users can toggle the dismissible state or choose a block style directly from the editor canvas.
Building a Custom Block Part 8: Restricting Inner Blocks
In Part 8 of Building a Custom Block, we’ll restrict which blocks can be inserted inside our Notice block and use template locking to enforce a consistent inner block structure.
Building a Custom Block Part 7: Styling Inner Blocks
In Part 7 of Building a Custom Block, we’ll add default styles to the inner blocks inside our Notice block while making sure they remain fully customizable in the block editor.
Building a Custom Block Part 6: Block Variations
In Part 6 of Building a Custom Block, we’ll use the Block Variations API to create preconfigured versions of our Notice block. Instead of inserting a generic notice and then picking a style, users will be able to drop in a ready-to-go “Error Notice” or “Success Notice” directly from the block inserter.
Building a Custom Block Part 5: Adding Block Styles
In Part 5 of Building a Custom Block, we’ll use the Block Styles API to register different visual styles for our Notice block that represent common notice types: info, success, warning, and error.
Building a Custom Block Part 4: Adding Styles and Custom Interactivity
In Part 4, we’ll make our Notice block actually look and act like a notice. We’ll add some baseline CSS to style the block and then write frontend JavaScript in view.js to handle dismissing the notice when users click that close button we added in Part 3.
Building a Custom Block Part 3: Inner Blocks and Inspector Controls
In Part 3 of Building a Custom Block, we’ll update our Edit component to support child blocks (InnerBlocks) and add our own custom Inspector Controls to toggle the dismiss button.
Building a Custom Block Part 2: Attributes and Supports
In Part 2 of Building a Custom Block, we’ll go through adding block supports and attributes and explore how they work in some more detail.
Building a Custom Block Part 1: Scaffolding block files
In Part 1 of the Building a custom block series, we look at how you can quickly set up a new custom block from scratch using the create-block package provided by WordPress and the anatomy of a block.
How to set up @wordpress/scripts
The @wordpress/scripts package makes it easy to bundle your JavaScript for a plugin or theme and is especially helpful when developing custom blocks. In this post, I’ll show you how you can easily set up @wordpress/scripts and take advantage of the dependency management benefits it offers.
How to add a gradient text effect to specific words in a block
Gradient text effects are pretty nifty and can add a nice element of visual flair to your posts (if I do say so myself). Adding this effect is pretty easy with CSS, but what if you want to only apply it to certain words inside a paragraph, heading, or similar block? In this post I’ll…
4 new essential modern CSS features for WordPress Development
CSS has been around for a while, but modern features are being added faster than ever. In this post, I’ll show you 4 essential CSS capabilities: color manipulation, smart selectors, container queries, and aspect-ratio that will save you time and effort on your WordPress projects, with no JavaScript or complex workarounds required.
How to set up custom fonts in block themes
In this post I’ll show you how you can easily add Google Fonts or your own custom fonts to a block theme and how you can customize the generated @font-face rules if needed.
How to add multiple block areas to a single block theme template
In this post I’ll show you how you can add multiple post-specific block areas to a single template in a block theme. I’ll explain when you may want to do this as well as the technical reasons why it needs to be done a certain way.
How to easily parse and alter HTML markup with WP_HTML_Tag_Processor
When you’re building with WordPress you will almost definitely need to modify HTML output at some point or other. This type of thing is pretty easy to do with JavaScript (which is pre-built with tools for manipulating the DOM) but historically it’s been much more challenging when using PHP. In this post I’ll show you…
How to use Dependency Extraction in webpack to make your scripts smaller
WordPress makes it really easy to reduce the size of your scripts when you’re using common packages. In this post, I’ll show you how Dependency Extraction works and how you can use it even if you’re not using @wordpress/scripts.
Setting up a child theme for hybrid or block themes
If you’ve been building with WordPress in the past, you may have used or heard of a “child theme” before. In this post I explain how child themes work and why you may (or may not) need one for your project.