Where to put custom CSS and JavaScript

You want to change something the settings do not cover, and you have a few lines of CSS or a script to add. Where those lines go decides whether they survive your next theme update.

#The short answer

A few lines of CSS go in AppearanceCustomizeAdditional CSS. Anything larger, and anything involving JavaScript, goes in a child theme.

Never edit the theme files. An update replaces them, and your changes go with it, silently and completely.

#The four places, and what each one survives

The last row is the one that matters. Editing style.css or a template inside the parent theme works until the day you update, and then it is gone with no warning and no copy.

#Additional CSS

WordPress ships a CSS box in the Customizer. Open AppearanceCustomizeAdditional CSS and type into it. The preview updates as you type, so you can see the rule land before you save.

What it is right for: overriding a color, adjusting spacing on one element, hiding something the settings do not have a switch for.

Its limits are worth knowing up front. It holds CSS only, it is stored per theme so switching theme leaves it behind, and it has no syntax checking, so one missing brace can break every rule after it. If your CSS box is over a hundred lines or so, it has outgrown the box.

#A child theme

A child theme is a small theme of your own that inherits everything from the real one. Your files sit in a separate folder, so the parent can update as often as it likes and nothing of yours is touched.

This is the right home for a stylesheet longer than the Customizer box comfortably holds, for any JavaScript, and for changing a template rather than restyling it.

Child themes, template overrides and hooksEverything here survives updates. That is the whole reason to use these routes rather than editing files directly. Getting a child theme Two ways. By hand, as a classic WordPress child theme...Hooks & Filters

White label and the child theme generatorThe tool does one thing: it creates a child theme. What differs is why you want one. Most people come for the first reason below, so that is where this starts. Use one: a child theme for you...Customization

#JavaScript, and why it does not go in the CSS box

The Customizer CSS box stores CSS. It will not run a script, and pasting one there does nothing.

Two correct routes:

Enqueue it from a child theme. Put the file in the child theme folder and register it in the child theme's functions.php, so WordPress loads it in the right order alongside everything else.

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'my-custom-script',
		get_stylesheet_directory_uri() . '/js/custom.js',
		array(),
		'1.0.0',
		true
	);
} );

Or, for a third party snippet such as an analytics or chat widget, use a plugin whose job is inserting code into the page head or footer. That is the better route for anything you did not write, because it keeps the snippet with the site rather than with the theme.

#Why not the theme editor in the admin

#Common questions

#Still stuck

Open a support ticket with the rule you are trying to apply and a link to the page.

Last updated 6 Sep 2026