How to Add Custom CSS in WordPress (5 Methods, Beginner to Advanced)

This guide covers “custom css in wordpress” in plain language. You can add custom CSS to WordPress in several ways, and the right one depends on your theme and how much control you need. This guide covers five methods, from the quickest to the most developer-friendly, and when to use each.

Method 1: The Customizer’s Additional CSS

This is the easiest option on classic themes.

1. Go to Appearance, then Customize.
2. Open Additional CSS.
3. Type your CSS, check the live preview, and click Publish.

The CSS is stored with your theme settings and loads on every page. It is ideal for small tweaks.

Method 2: The Site Editor (block themes)

Block themes have no Customizer, so the Site Editor handles it.

1. Go to Appearance, then Editor.
2. Open Styles, click the three-dot menu and choose Additional CSS.
3. Add your rules and save.

Method 3: A child theme’s stylesheet

If you edit a theme’s own stylesheet directly, an update will erase your changes. A child theme avoids that.

1. Create a child theme folder with a style.css and a functions.php.
2. Enqueue the parent and child styles in functions.php.
3. Put your rules in the child’s style.css.

Best for larger amounts of CSS that you want in version control.

Method 4: A plugin

Code snippet and custom CSS plugins let you add CSS without touching theme files, and the code stays when you change themes. Many also let you load CSS only on certain pages. This suits site owners who switch themes or manage multiple small tweaks.

Method 5: Enqueue a stylesheet with PHP

For full control, load your own file from a child theme or small plugin:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-custom-css',
        get_stylesheet_directory_uri() . '/custom.css',
        array(),
        '1.0'
    );
} );

For example, this keeps CSS in a real file, which is cacheable, easy to diff and easy to maintain.

Which method should you choose?

Situation	Best method
A few quick tweaks on a classic theme	Customizer Additional CSS
A block theme	Site Editor Additional CSS
Lots of CSS, developer workflow	Child theme or enqueued file
You may change themes later	Plugin

Tips for writing CSS that works

• Use your browser’s inspector. Right-click an element and choose Inspect to find the selector and test changes live.
• Beat specificity, don’t fight it. If your rule is ignored, use a more specific selector rather than reaching for !important.
• Test on mobile. Wrap tablet and phone changes in media queries. See common CSS media query breakpoints.
• Clear caches. If a change doesn’t show, clear your caching plugin, server cache and browser cache.
• Keep it tidy. Comment sections and avoid duplicating rules.

Troubleshooting

My CSS doesn’t apply

As a result, check the selector in the inspector, look for a more specific rule overriding yours, and clear caches.

My CSS disappeared after an update

You probably edited a parent theme file. Also, move the CSS to Additional CSS, a child theme or a plugin.

Can CSS slow my site down?

Large stylesheets can. Remove unused rules and avoid loading big CSS files on pages that don’t need them.

Related reading

• beginner guide to creating a WordPress website
• website guides by industry
• MDN CSS documentation