Load CSS optimally in the WordPress Child Theme

If you’re using a child theme in WordPress, you’ll want to make sure your CSS loads optimally. Incorrectly integrated stylesheets can lead to performance problems or missing styles . Here’s how to efficiently integrate your CSS into the child theme.

1. The right method: Load CSS with `wp_enqueue_style()`

The recommended way to load CSS in a WordPress child theme is to use the wp_enqueue_style(). This ensures that styles are loaded correctly and in the correct order.

Steps for optimal integration:

Open the functions.phpfile of your child theme.
Add the following code:

function my_child_theme_styles() {
    // Parent-Theme-CSS laden
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Child-Theme-CSS laden
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_child_theme_styles');

Explanation of the code:

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
→ Loads the style.css of the parent theme.
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
→ Loads the style.css of the child theme and ensures that it loads after the parent theme.
wp_get_theme()->get('Version') ensures that the current theme version is always used to avoid caching problems.

2. Alternative method: Avoid CSS with @import

In the past, CSS was often included @import in the style.css child theme:

@import url("../parent-theme/style.css");

Why is this problematic?

It can slow down the page load time.
WordPress no longer recommends this method.

Using is wp_enqueue_style() the better solution!

3. Load additional stylesheets (if necessary)

If you want to add more stylesheets (e.g. for custom customizations or external styles), you can easily add them:

function my_child_extra_styles() {
    wp_enqueue_style('extra-style', get_stylesheet_directory_uri() . '/extra-style.css', array('child-style'), '1.0.0');
}
add_action('wp_enqueue_scripts', 'my_child_extra_styles');

Here, the file extra-style.css is also loaded after that style.css of the child theme.

4. CSS only load on certain pages or conditions

If you only want to load CSS on certain pages or under certain conditions, you can use WordPress features:

function my_custom_page_styles() {
    if (is_page('kontakt')) { // Nur auf der Kontaktseite laden
        wp_enqueue_style('contact-style', get_stylesheet_directory_uri() . '/contact.css');
    }
}
add_action('wp_enqueue_scripts', 'my_custom_page_styles');

Other conditions:

is_front_page() → Only on the home page
is_single() → Only on post sites
is_category('news') → Only in a specific category

Load 5. CSS for the WordPress admin area (optional)

If you want to add your own styles in the admin area:

function my_admin_styles() {
    wp_enqueue_style('admin-style', get_stylesheet_directory_uri() . '/admin.css');
}
add_action('admin_enqueue_scripts', 'my_admin_styles');