Themes & plugins Practical
Decide the editable regions before you design them
A design the CMS cannot express stays up for negotiation long after it ships. Deciding what editors may change, first, removes the negotiation entirely.
Technote
WordPress know-how, from real work Technotes worth picking
34 articles· Themes & plugins · Designers
Themes & plugins Advanced
Interactions without JavaScript, and the rule that makes them safe
details, :target, :focus-within, :has() and scroll timelines cover a surprising amount of interaction. One rule keeps them safe: the default state must be the finished state.
Themes & plugins Practical
Icon fonts, SVG sprites or inline SVG?
All three draw the same picture on screen. What differs is how many colours you can use, what assistive technology hears, and how many icons actually ship to…
Themes & plugins Practical
Dark mode should be a decision, not a default
Dark mode is not one feature; it doubles the surface you must maintain and verify. Some sites have a clear reason for it, and some do not.
Themes & plugins Advanced
Why sticky quietly dies — one overflow line on an ancestor
position: sticky throws no error when it fails. Check three things in order — a threshold, room in the parent, an ancestor's overflow — and the cause is…
Themes & plugins Advanced
Measure and vertical rhythm: body text that gets read
How many characters sit on a line, and how the gaps between elements stack, decide whether a long article gets finished. Hangul is wider, so the Latin character-count…
Themes & plugins Practical
Mobile navigation beyond the hamburger
The hamburger is the answer when there are many destinations. If three or four carry the traffic, showing them always beats hiding them.
Themes & plugins Advanced
Vendor tokens, your tokens, and one bridge file
Modern themes arrive with hundreds of their own tokens. Edit them and updates erase your work; ignore them and the screen splits into two systems. The answer is…
Themes & plugins Practical
What a page builder costs: convenience against portability
A builder does one thing very well, and in exchange your layout moves into the database. Where you draw the line decides whether that trade is bearable.
Themes & plugins Practical
Reduced motion: the content has to survive it
The reduced-motion setting comes from symptoms, not preference. And the bug where the page turns up blank for those users appears most often in code that was trying…
Themes & plugins Practical
Tap targets — minimum size and spacing for fingers
A cursor is one pixel; a fingertip is not. How to grow the hit area without growing the visuals — and why hover-only affordances simply do not exist…
Themes & plugins Practical
Taking the colour picker away from editors
Leave the picker open and in six months the site carries colours a shade off the brand. That is not the editor's fault — the system asked.
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.