[Support request] Child-theme styles ineffective

Home Forums Support Child-theme styles ineffective

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1125197
    Gabriela

    Hi!
    I am working on a child theme from Generatepress with Woocommerce plugin, and many other plugins.

    Many styles from child-theme are ok, but some are ineffective. They are only effective from Customizer CSS panel.

    Well I wish I could load all my styles from child-theme stylesheet.

    Is there a function that assures my child-theme’s styles to load last of all other styles?

    #1125208
    Leo
    Staff
    Customer Support
    #1125963
    Gabriela

    Hi Leo,
    I don’t like the idea of being more specific. It is too complicated. Loading the CSS after every other styles is effective, since from Customizer it works.

    I am considering this solution from your second link thread:

    add_action( 'wp_enqueue_scripts', 'tu_child_scipts', 999 );
    function tu_child_scipts() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array( 'generate-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }

    Look below, I have substituted some text there ☝. But it is still not working for me. I am using the child theme you provide, so here’s my function.php:

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    add_action( 'wp_enqueue_scripts', 'ervas_magicas_scipts', 999 );
    function ervas_magicas_scipts() {
        wp_dequeue_style( 'generatepress-child' );
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array( 'generatepress-style' ), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }

    Now I have deployed it to a dev domain, so you ca see what’s going on:
    https://ervasmagicas.kilate.pro

    Do you think it’s better using “Snippets” plugin than writing in child’s functions.php?

    #1126267
    Tom
    Lead Developer
    Lead Developer

    That last function should work, but you need to dequeue generate-child instead of generatepress-child.

    You can keep generatepress-child as your new enqueue (or name it something else).

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );

    That should make it so the child theme CSS loads after everything else.

    #1127318
    Gabriela

    Hi Tom,
    Look what is my functions.php now:

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );

    Still not loading a lot of the child’s style.css…

    Nevertheless, if I put all the child’s style.css content in Customizer CSS, everything comes alive!

    #1128014
    Tom
    Lead Developer
    Lead Developer

    Strange, can you disable your caching plugin for now while we debug?

    #1132268
    Gabriela

    Hi,
    Sorry for the delay.

    Yes, I have disabled it now for you.

    #1132332
    Tom
    Lead Developer
    Lead Developer

    That is super strange.

    Can you try this as a test? It should remove the child CSS file completely:

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
    }, 999 );
    #1132373
    Gabriela

    Hi Tom.

    Look how functions.php is now:

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    /*
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );
    */
    
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
    }, 999 );
    #1132378
    Tom
    Lead Developer
    Lead Developer

    So that worked.

    Now let’s try adding this:

    add_action( 'wp_head', function() {
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );
    #1133357
    Gabriela

    Oh my Gosh,
    Still the same error.

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
    }, 999 );
    
    add_action( 'wp_head', function() {
        wp_enqueue_style( 'generatepress-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
    }, 999 );

    Maybe it’s a script that’s being loaded in the footer that’s messing it all?

    Maybe I shall try to disable all the plugins and enable each one, step by step?

    #1133540
    Tom
    Lead Developer
    Lead Developer

    It looks like the file is loading in the footer right now – did you adjust the function?

    #1134479
    Gabriela

    Hi Tom,
    The function is still the last you see above.

    The child stylesheet is loading in the footer, but there are many other scripts loading after it. Maybe the scripts are interfering.

    I have turned off almost all plugins.

    Still the same error…

    #1134599
    Tom
    Lead Developer
    Lead Developer

    My function above would add it to wp_head, not in the footer.

    I don’t love this, but it seems like the only way to do what you’re wanting:

    add_action( 'wp_head', function() {
        echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/style.css" type="text/css" media="all">';
    }, 99 );
    #1137081
    Gabriela

    Hi Tom,
    I can’t explain, but suddenly the child’s stylesheet became functional. And I didn’t put your last function (the one you don’t love).

    A couple of days ago I had turned off almost all the plugins. And still most of the child’s styles were not loading from its folder. But now they are! Maybe it takes a while for the changes to propagate?
    But still the child’s stylesheet is loading in the footer. And the function’s rule is that it loads in the head.
    I would not like to keep things strange…
    I am a designer, not very smart in development. But I am in the path to become a better developer, and I love clean code. I would love to discover why these strange things are happening. This is the first woocommerce site I am developing.
    I wish to find the right way to do things. I am loving GeneratePress, and I want to become the smartest in developing upon it.

    Have you any clues? Would you like to get into the wp-admin to look after?

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.