functions - Proper way to load styles using a child theme

admin管理员组

文章数量:1126130

I decided to start using Elementor Hello theme for building my websites. In the past, I always edited style, templates and other theme files directly from the original theme directory, but I decided it was time to learn how to use a child theme properly. I just downloaded a child theme from here: . Everything works fine.

I tried to work with child themes in the past and also did research in the past days. I came across THIS VIDEO. He writes his child functions.php code in a specific way "to avoid loading a stylesheet twice and slowing down load time". If I understand correctly, he "writes" the original style on top of the style in child theme and loads it to frontend user in one file. I would also like to achieve that with my child theme, but at the moment it loads all the styles from parent theme plus the new one from child theme.

I understand how to create a new directory, style.css and options.php file, but I am not very good with functions. If somebody could help me with writing the code, or even better, help me to also understand the code, that would be great.

---

Elementor developers theme site

WP Child themes, developers

I decided to start using Elementor Hello theme for building my websites. In the past, I always edited style, templates and other theme files directly from the original theme directory, but I decided it was time to learn how to use a child theme properly. I just downloaded a child theme from here: https://github.com/elementor/hello-theme-child. Everything works fine.

I tried to work with child themes in the past and also did research in the past days. I came across THIS VIDEO. He writes his child functions.php code in a specific way "to avoid loading a stylesheet twice and slowing down load time". If I understand correctly, he "writes" the original style on top of the style in child theme and loads it to frontend user in one file. I would also like to achieve that with my child theme, but at the moment it loads all the styles from parent theme plus the new one from child theme.

I understand how to create a new directory, style.css and options.php file, but I am not very good with functions. If somebody could help me with writing the code, or even better, help me to also understand the code, that would be great.

---

Elementor developers theme site

WP Child themes, developers

• functions
• child-theme
• performance
• wp-enqueue-style

Share Improve this question asked Feb 29, 2024 at 20:54 Martin PeternelMartin Peternel 3111 silver badge88 bronze badges 1

• "at the moment it loads all the styles from parent theme plus the new one from child theme" This is also what the example in the video would do. Can you clarify your goals? Do you wish to only load styles from the child theme? – Jacob Peattie Commented Mar 1, 2024 at 1:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you want to prevent HELLO from loading it's own styles, this is the code to paste and adjust in your child theme's functions.php :

function hello_elementor_scripts_styles() {
    // Dequeue parent theme stylesheets
    wp_dequeue_style( 'hello-elementor' );
    wp_deregister_style( 'hello-elementor' );
    
    wp_dequeue_style( 'hello-elementor-theme-style' );
    wp_deregister_style( 'hello-elementor-theme-style' );
    
    wp_dequeue_style( 'hello-elementor-header-footer' );
    wp_deregister_style( 'hello-elementor-header-footer' );

    // Enqueue only child theme stylesheets or custom stylesheets as needed
    // Example:
    wp_enqueue_style(
        'child-theme-style',
        get_stylesheet_directory_uri() . '/style.css', // Adjust the path to your child theme stylesheet
        array(), // Dependencies
        HELLO_ELEMENTOR_VERSION // Version
    );
}
add_action( 'wp_enqueue_scripts', 'hello_elementor_scripts_styles', 20 ); // Set priority to 20

But unless you want to rewrite the whole theme's styling, I dont' see any valid reason to do so. Just let the parent theme load its stylesheets, and if you're running after performance to the point where you want to prevent a single stylesheet from loading, you should avoid elementor altogether.

本文标签： functionsProper way to load styles using a child theme