How to Add Custom CSS to WordPress Without Editing Theme Files

Custom CSS in WordPress: Customizer, inline styles, and enqueued files

When you need to add custom CSS to WordPress, editing the theme’s files directly is almost never the right call — your changes will be wiped out on the next theme update. WordPress 4.7 introduced a built-in CSS editor in the Customizer, and for more structured projects you can enqueue a separate stylesheet programmatically.

Problem: How do you add custom CSS to a WordPress site without editing theme files directly, so your changes survive a theme update?

Solution: The three methods below cover quick one-off tweaks via the Customizer, programmatic inline styles with wp_add_inline_style(), and enqueuing a fully separate custom stylesheet.

// Method 1: WordPress Customizer
// Go to Appearance → Customize → Additional CSS
// WordPress stores this automatically — no code required.

// Method 2: wp_add_inline_style() — appends CSS after an existing stylesheet
add_action( 'wp_enqueue_scripts', 'mytheme_custom_inline_css' );

function mytheme_custom_inline_css() {
    // The handle must match an already-enqueued style
    wp_add_inline_style( 'mytheme-style', '
        .site-header { background-color: #2c3e50; }
        .entry-title { font-size: 2rem; }
    ' );
}

// Method 3: Enqueue a dedicated custom stylesheet
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_css' );

function mytheme_enqueue_custom_css() {
    wp_enqueue_style(
        'mytheme-custom',
        get_template_directory_uri() . '/css/custom.css',
        [ 'mytheme-style' ],  // load after the main stylesheet
        '1.0.0'
    );
}

NOTE: Never edit a parent theme's style.css directly — a theme update will overwrite your changes. For site-wide tweaks, the Customizer's Additional CSS field is the easiest option. For anything more structured, enqueue a separate stylesheet or use a child theme.