Themes & plugins Practical
Labels and errors: a placeholder is not a label
Text that vanishes the moment you type cannot be a label. Forms that hide labels and forms that signal errors with colour alone lose people in much the…
Technote
WordPress know-how, from real work Technotes worth picking
34 articles· Themes & plugins · Designers
Themes & plugins Practical
Hunting horizontal overflow — the number will not find it
scrollWidth matches the viewport and yet the screen is visibly clipped. An ancestor absorbed the overflow — so measure element rectangles instead.
Themes & plugins Practical
What theme.json does: handing your palette to the block editor
theme.json is not a stylesheet, it is a channel. It hands your palette to the editing screen so editors choose from your system instead of a free colour…
Themes & plugins Practical
Beating theme styles without !important
You wrote the rule and nothing changed. The cause is usually order rather than specificity — and order is fixable without !important.
Themes & plugins Practical
Walking the site by keyboard: where the order breaks
Take your hand off the mouse and Tab through a page once; five minutes exposes most of it. Nearly always, the culprit is CSS having reordered the screen.
Themes & plugins Practical
When a grid track swells to fit its content — minmax(0, 1fr)
repeat(3, 1fr) does not promise three equal columns. One code block or unbroken string inside pushes its track wider, and the whole layout leaves the screen.
Themes & plugins Practical
Putting tokens into the theme with CSS custom properties
Declare the tokens in one :root block, have components reference nothing else, and the colour and spacing of the whole site move from a single file.
Themes & plugins Practical
Template overrides: the copy freezes the moment you make it
Copy a parent file into your child theme and yours wins. It also stops receiving the parent's fixes — you have taken on its maintenance.
Themes & plugins Practical
Never delete the focus ring: what outline: none removes
The default focus ring genuinely does not suit most designs. Delete it, though, and keyboard users lose their cursor entirely — the answer is to replace it, not…
Themes & plugins Practical
One clamp() instead of re-declaring sizes at every step
Re-declaring heading sizes at every breakpoint only adds maintenance. clamp() puts the minimum, the fluid middle and the maximum on one line and removes it.
Themes & plugins Practical
What keep-all gives Korean, and takes from other languages
One CSS line stops Korean words splitting mid-word. That same line, in Japanese or Chinese, means "there is nowhere to break" — and produces horizontal scrolling.
Themes & plugins Intro
A spacing scale, and what one exception costs
Eyeballing spacing puts 12, 13, 14 and 15 on the same screen. A scale makes the decision faster and tidies the layout for free.
Cited
Technotes worth reading next
Topics outside WordPress are collected on Dongji Communication Tech Insights, run by the same team. The summaries below are quoted from the originals; the titles link to them.
-
Working with AI
Writing a CLAUDE.md — teaching an AI coding assistant your project
AI coding tools such as Claude Code, Cursor and Copilot do better work the more precisely they know your project. Here is a structure and a set of principles that hold up.
-
Working with AI
Prompting an AI for UI design — drafting with Claude and GPT
Asking an AI to "make a nice button" gets you a disappointing button. Structured prompts that carry constraints, references and a defined role get you the design you meant.
-
Themes & plugins
SCSS from the ground up — variables through module structure
The core syntax of SCSS (Sass) and what it solves that plain CSS cannot: variables, nesting, mixins, @use and module structure — organised around patterns you can use immediately.
-
Themes & plugins
Design tokens and theme colour systems — brand identity in SCSS variables
How to turn a colour palette from a pile of hex codes into a system that means something — semantic token structure and SCSS variable patterns, from a real project.
-
Performance optimization
Designing a responsive typography system — the science of readability
Hard-coded pixel font sizes are over. Type scales, fluid sizing with clamp(), Korean webfont optimisation and line-height ratios — building typography that reads well on any screen.
-
Development workflow
From Figma to SCSS — a designer-developer handoff guide
Minimising what gets lost between a Figma file and the code: extracting tokens, naming components, keeping the spacing system in sync — the whole workflow, step by step.