YMMV

How to Add Custom CSS to Your WordPress Theme

Custom CSS modifications can enhance your WordPress theme’s appearance and functionality. There are several ways to add custom CSS to your WordPress site. This guide will help you choose the most appropriate method for your specific situation. Our team recommends the following methods for implementing CSS customizations on your website.

1. Using a Child Theme

Adding CSS directly to a child theme’s style.css file is the most reliable approach:

  1. Create a child theme if you don’t already have one
  2. Access your child theme’s style.css file through your hosting file manager or FTP client
  3. Add your custom CSS code to the file
  4. Save the changes and upload the file to your server

This method is ideal for permanent site-wide CSS changes as it:

  • Preserves your customizations during parent theme updates
  • Follows WordPress best practices
  • Provides better organization of your custom code

2. Using the functions.php File

For advanced users, CSS can be added through the functions.php file. Access your theme’s functions.php file (preferably in a child theme), and then add a function that includes the CSS:

function ymmv_custom_theme_styles() {
    wp_enqueue_style('custom-style', get_stylesheet_uri());
    wp_add_inline_style('custom-style', '
        /* Your custom CSS here */
        .example-class {
            color: #ff0000;
        }
    ');
}
add_action('wp_enqueue_scripts', 'ymmv_custom_theme_styles');

or you can enqueue a separate CSS file:

function ymmv_enqueue_custom_theme_styles() {
    wp_enqueue_style('custom-css', get_stylesheet_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'ymmv_enqueue_custom_theme_styles');

You then just need to create a CSS file called custom-style.css to match the file name above and any CSS in the file will be loaded.

3. Use a plugin to add the CSS

We recommend using the Simple Custom CSS and JS plugin. It’s free and simple to use.

  1. Install and activate the plugin
  2. Navigate to Custom CSS & JS in your WordPress dashboard
  3. Click Add Custom CSS
  4. Enter your CSS code in the provided editor
  5. Configure options like loading position and device targeting
  6. Click Publish to apply your changes

This plugin works with all WordPress themes and provides additional features like code validation and selective loading.

4. Using the Customizer (for Classic Themes)

The WordPress Customizer works well with classic themes:

  1. Navigate to your WordPress Admin dashboard
  2. Go to Appearance > Customize
  3. In the Customizer sidebar, locate and select the Additional CSS option
  4. Enter your custom CSS code
  5. Click Publish to save and apply your CSS modifications

Note: This method may not work with block-based or Full Site Editing (FSE) themes.

5. For Page-Specific CSS: Block Editor Method

If your site is using a block theme or FSE theme, and you just need a one-page solution, you can use the Custom HTML block.

  1. Create or edit a page/post
  2. Add a “Custom HTML” block
  3. Insert your CSS code within <style> tags: <style>your CSS here</style>
  4. Update or publish the page

While this approach works for isolated cases, it’s not recommended for site-wide CSS changes.

Published: