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.

Customizing the code: limits and responsibilityRead this before you open a file. A change to the code moves responsibility for the consequences to whoever made it. If something stops working after your own edits, that is not a support ca...Customization

If you would rather not write it yourself, that is a paid service rather than a support ticket, and it is quoted separately.

Custom work and paid customizationSupport covers the product working as documented. Anything beyond that is custom work, which we do take on, under separate terms. Most requests that arrive as "I need custom work" are not cu...Support

#The four places

Additional CSS in the Customizer

A handful of CSS rules. The fastest route, with a live preview, and the one that needs no files.

A child theme

CSS of any size, JavaScript, template overrides and PHP. The right home for anything the Customizer box has outgrown.

A site specific plugin

PHP that is about your site rather than its design, such as a shortcode or a redirect. It is the only one of the four that survives changing theme.

The theme files

Nothing. Ever.

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.

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

Know its limits 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. It is a standard WordPress mechanism, and our themes are built to be extended through it: filters, actions and overridable templates are there so a child theme rarely has to copy much. The theme dashboard can generate one for you, so you do not have to build the folder by hand.

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 reason to use these routes rather than editing files directly. Getting a child theme A child theme is not shipped in the package. The download c...Hooks & Filters

#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.

There are 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 use a snippet plugin, which is the better route for anything you did not write, such as an analytics or chat tag, because it keeps the snippet with the site rather than with the theme. Free ones in the plugin directory that do this job: WPCode for head and footer tags, Code Snippets for PHP snippets with an on and off switch on each.

Those are ordinary third party plugins, not integrations of ours, so they come with the usual condition: what they do on your site is yours to own.

Third party plugins and where responsibility sitsA site running one of our themes has two kinds of plugin, and they are different things. An integration A first-party package we wrote, for our themes, usually to replace a general-purpose p...Best Practices

#Why not the theme editor in the admin

#Common questions

#Still stuck

Open a support ticket and say what you tried and where it stopped. Your product, your domain, a screenshot and the exact message you saw are usually enough to settle it in one reply.

Last updated 15 Sep 2026