0

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

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? Mar 1 at 1:09

1 Answer 1

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.

1
  • I think I misunderstood the instructions in the video. Thank you for helping me understand and for the code! Mar 2 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.