Why WordPress custom CSS disappears when you switch themes

Published Updated View as Markdown

Additional CSS belongs to the theme, so it disappears when you switch. Where WordPress keeps custom CSS, why it vanishes, and how to keep styles theme-proof.

Custom CSS disappears when you switch themes because WordPress saves Additional CSS with the theme, and only loads the active theme’s CSS. Nothing is deleted: switch back, and it returns. To keep CSS through a theme change, store it with the site instead, for example with a custom CSS plugin.

You spend an afternoon getting the site right. The header border is thinner, links have a proper underline, the buttons have softer corners, the site title stops wrapping on phones. Months later you try a new theme, and every one of those tweaks is gone. Most places you can add custom CSS in WordPress tie CSS to the theme this way, and it is rarely explained up front.

This guide covers where WordPress custom CSS can live, which of those places are tied to a theme, and how to keep site-wide styles that stay put whatever theme you run.

Where custom CSS can live in WordPress

There are four common homes for custom CSS, and they differ in one way that matters here: what they are attached to.

The Customizer’s Additional CSS. On a classic theme, Appearance → Customize → Additional CSS is the box most people find first. WordPress stores what you type there as a post of its own, of the custom_css type, one for each theme, keyed to the theme’s stylesheet (its folder name). Only the post belonging to the active theme is printed on the page.

Styles → Additional CSS in the Site Editor. On a block theme, such as Twenty Twenty-Five, the Customizer usually no longer appears in the Appearance menu. The CSS box moved into the Site Editor: Appearance → Editor → Styles, then Additional CSS. What you type there is saved in your global style changes for that theme, which WordPress also keeps per theme.

A child theme’s style.css. A child theme is a small theme that inherits everything from a parent and adds its own files. CSS in its stylesheet survives updates to the parent, which is what child themes are for. But it only loads while that child theme is the active theme, so moving to a different theme leaves it behind.

A plugin. CSS stored by a plugin belongs to the plugin, not to the theme. As long as the plugin is active, it can print the CSS on every theme.

WhereTied toSurvives a theme switch
Customizer → Additional CSSThe theme that was active when you saved itNo
Site Editor → Styles → Additional CSSThe block theme’s global stylesNo
Child theme style.cssThe child themeNo
A pluginThe pluginYes, while the plugin is active

Why custom CSS disappears when you switch themes

WordPress treats Additional CSS as part of a theme’s look, next to its colours, header image and layout choices. That makes sense for rules written against one theme’s markup: CSS that fixes a gap under one theme’s header means nothing to another theme, and could break it.

But a lot of custom CSS is not like that. Link underlines, button corners, a brand colour on selected text, a readable font size on phones: these belong to the site, and you want them on any theme. WordPress has no separate box for that kind of CSS, so it goes in the theme’s box and leaves with the theme.

The old CSS is still in the database. Switch back to the old theme and it comes back. What WordPress doesn’t do is carry it across to the new one, or tell you it stayed behind. The usual fix is to copy it by hand before switching, and remember to do that every time.

The same goes for a redesign that moves from a classic theme to a block theme. The CSS box moves from the Customizer to the Site Editor, and the CSS you wrote in the Customizer stays with the old theme.

Site-wide CSS with Adminkeep

Adminkeep is a free plugin made of small features that each have one switch. Its Custom CSS feature works as a standalone custom CSS plugin: it gives your site one stylesheet that belongs to the site rather than to a theme.

  1. Go to Settings → Adminkeep and switch on Custom CSS in the Appearance group. If you don’t have the plugin yet, installation takes a minute.
  2. Open Appearance → Custom CSS. It sits in the Appearance menu on classic and block themes alike, not several clicks deep in the Site Editor.
  3. Add your custom CSS and press Save CSS.

The editor is WordPress’s own code editor, the one core uses for its CSS box, with line numbers, syntax highlighting and CSS linting that flags mistakes as you type. If you have switched syntax highlighting off in your user profile, you get a plain text box instead.

Custom CSS screen under Appearance with a code editor for site-wide CSS and a Live preview box that opens the live editor
Appearance → Custom CSS: one stylesheet for the site, whatever the theme.

Prefer to see the page while you type? The Customizer’s CSS box works that way, and so does Adminkeep’s live editor, on any theme: click Edit CSS in the admin bar on any page of your site, and a code panel opens beside the page, which restyles as you type. Only you see the change until you press Save. The Custom CSS docs cover it in full.

What it does once saved:

Switching the feature off stops the CSS printing and removes the menu item. The CSS itself is kept, so switching it back on brings it back, and deleting the plugin keeps it too unless you have asked Adminkeep to delete its data.

A few safe starting rules

Rules that belong in site-wide CSS are the ones that should look the same on any theme. These three use plain selectors most themes share. Adjust the numbers to taste.

Give links a clearer underline, set a little below the text so it doesn’t cut through letters:

.entry-content a {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

Soften the corners of buttons made with the Buttons block:

.wp-block-button__link {
	border-radius: 6px;
}

Stop a long site title from taking over a phone screen:

@media (max-width: 600px) {
	.site-title {
		font-size: 1.25rem;
	}
}

Class names like .site-title and .entry-content are common, not universal. If a rule does nothing after a theme switch, right-click the element, choose Inspect, and see what the new theme calls it. Adding a second selector for the new theme is usually all it takes. If your CSS isn’t showing up at all, WordPress Additional CSS not working goes through the usual causes, cache first.

From the command line

If you manage sites with WP-CLI, the same CSS is available there. Switch the feature on first:

wp adminkeep feature enable custom_css

Print the stored CSS, and nothing else, so it can be saved straight to a file:

wp adminkeep css get > site.css

Replace it from a file, or from standard input when you leave the file out:

wp adminkeep css set site.css
cat site.css | wp adminkeep css set

css set checks for HTML the same way the screen does, and replaces the stored CSS in full rather than adding to it. Setting empty CSS clears it; if CSS is already stored, you’re asked to confirm first, and --yes skips the question. If the feature is off, the CSS is still saved, and the command reminds you to switch it on before it prints.

That makes it simple to keep one stylesheet in version control, or to copy it from one site to the next. The WP-CLI docs list every Adminkeep command.

The same theme problem hits tracking snippets pasted into a theme’s header.php: they go when the theme updates or changes. How to add Google Tag Manager to WordPress shows where those snippets go instead.

Questions people ask

Why did my custom CSS disappear after switching themes?

The Customizer's Additional CSS box, and the Site Editor's on a block theme, is saved per theme, and WordPress only prints the CSS of the active theme. Switch back to the old theme and it returns.

Is the old CSS deleted when I switch themes?

No. It stays in the database, attached to the old theme. WordPress just doesn't carry it across to the new theme or tell you it stayed behind.

How do I keep custom CSS through a theme change?

Store it somewhere that belongs to the site rather than to a theme. Adminkeep's Custom CSS feature keeps one stylesheet in a site option and prints it on every theme.

Does Adminkeep's Custom CSS replace my theme's Additional CSS?

No. The theme's own CSS is left alone and you can use both. Adminkeep's CSS is printed after the Customizer's, so when both set the same property with equally specific selectors, the site-wide rule wins.

Switch on what you need. Forget the rest.

A free WordPress plugin — GPL, instantly reversible, and updates come to you.

Type to search the whole site.