Support » Themes and Templates » How to properly add stylesheet to my child theme

  • Hi there !

    I have a question about child theme with multiple css files. I know, there already are a lot of threads about it, but I haven’t found a working answer so far !

    I’m using the great Tortuga theme, and I’m currently creating a child theme. The style.css file is working fine, but I’ve encountered an issue with other files. This theme use the Flex Slider, and has a flexslider.css file located in tortuga/css/flexslider.css . This files is being called in inc/slider.php :

    wp_enqueue_style( 'tortuga-flexslider', get_template_directory_uri() . '/css/flexslider.css' );

    I want to add a few css rules for the slider, but none of what I’ve tried is working. This is my child theme functions.php file :

    <?php
    
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    
    	wp_enqueue_style('flexslider', get_stylesheet_directory_uri(). '/css/flexslider.css');
    
    }

    In firefox, I can see both the child and parent flexslider.css files, but the CSS rules for the child theme are not applied. Since all the child theme files seem to be loaded, I guessed that the parent flexslider.css was “overwriting” the child flexslider.css. I use the !important attribute in my child stylesheet, and it worked fine. I would not like to use this on each of my CSS rules, so I’m asking for your help in order to enqueue my child theme files the proper way.

    Do i have to dequeue the flexslider.css of the parent theme, and enqueue it in my child theme function.php file ? Is this about enqueueing the files the proper way ?

    Thanks a lot !

Viewing 1 replies (of 1 total)
  • I was able to find a working solution. I explain it, in case it might be useful for someone. This is the functions.php file of my child theme :

    <?php
    
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    	wp_enqueue_style('tortuga-flexslider', get_template_directory_uri(). '/css/flexslider.css');
    	wp_enqueue_style('flexslider', get_stylesheet_directory_uri(). '/css/flexslider.css');
    }

    I enqueue my parent theme flexslider.css file, and then in enqueue the flexslider.css of the child theme, using get_stylesheet_directory_uri().

    I still have a question though : I’m enqueueing the parent flexslider.css file, but it was already enqueued in the inc/slider.php file. Is this redundant ? Is there another way to do this, or is my solution acceptable ?

Viewing 1 replies (of 1 total)
  • The topic ‘How to properly add stylesheet to my child theme’ is closed to new replies.