Custom CSS without painting yourself into a corner
Small visual tweaks belong in Additional CSS or theme.json; lasting design systems belong in a child theme or a tiny custom plugin.
Custom CSS is still the fastest way to adjust colors, spacing, and component polish – if you choose a method that survives theme updates.
Verified: July 2026 – examples below assume WordPress 7.0.2 with PHP 8.3+ on staging before production.
Classic vs block vs WordPress 7 paths
Know which UI your theme exposes before pasting selectors that never load.
- Classic themes – Appearance → Customize → Additional CSS. Good for quick fixes.
- Block themes – Site Editor styles, theme.json, and sometimes Additional CSS depending on setup. Global style changes often belong in theme.json / style variations rather than long CSS dumps.
- WordPress 7 – same split, plus richer Site Editor tooling; still prefer child theme or custom plugin for CSS that is part of your product, not a one-off hotfix.
When to use which method
Match durability to the change.
- Additional CSS (Customizer / site CSS UI) – tiny overrides, marketing experiments, emergency fixes. Easy to lose track of; document what you add.
- theme.json – design tokens (palette, font sizes, spacing) on block themes.
- Child theme
style.css– structured overrides that must survive parent updates. Guide: WordPress child theme. - Custom plugin – enqueue CSS when the rule set is a feature (brand kit, Woo tweaks) independent of the theme. Related snippets: Login page CSS, WooCommerce CSS.
Back up before large style experiments: Backups guide.
Debugging CSS that “does nothing”
DevTools first – then cache – then specificity. Reach for !important last.
- Inspect the element; confirm your selector matches the live DOM (block markup changes often).
- Check load order and whether the stylesheet is even requested (404, wrong handle, conditional enqueue).
- Raise specificity cleanly (
.entry-content .price) instead of scattering!important. - Purge page cache, CDN, and optimized CSS from performance plugins.
- Verify media queries on real mobile widths.
Classic theme example (Additional CSS)
/* Classic themes - Additional CSS */
.site-header .menu-item a {
letter-spacing: 0.02em;
}
Block theme lean override
/* Prefer theme.json for tokens; use CSS for one-off layout fixes */
.wp-block-button__link {
border-radius: 0;
}
Mark overrides as classic vs block in your internal notes so the next developer does not hunt ghosts.
FAQ
Will Additional CSS survive a theme switch?
Often yes for Customizer CSS stored in the database, but selectors usually break because markup changed. Plan a rewrite.
Is a CSS plugin better than a child theme?
Plugins are fine for small teams wanting UI fields. Child themes/plugins you control are better for versioned, reviewable code.
Does custom CSS improve SEO?
Only indirectly, if it improves readability or fixes CLS. It is not a ranking lever by itself.
