Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Load child theme css after plugin stylesheets

Home Forums Support Load child theme css after plugin stylesheets

  • This topic has 15 replies, 5 voices, and was last updated 11 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #165156
    Hftt

    Hi Tom

    Is there way to load child theme css before parent stylesheet?

    I’d love to see my child css without !important patches. Please help me.

    Always THANKS!

    Paris

    • This topic was modified 4 years, 10 months ago by Tom.
    #165157
    Tom
    Lead Developer
    Lead Developer

    Placing your child theme CSS before the parent CSS will require you to use !important.

    Loading your child CSS after the parent CSS makes your child CSS more important, so you don’t need to use !important or be more specific.

    #165168
    Hftt

    Arr … my bad. Wrong question. SORRY.

    I’d like to ask you to load child theme css before plugin stylesheets. If possible, I can override WooCommerce styles in child theme without using !important.

    Long ago, when I was Genesis devotee (not anymore after using GP 😉 ) – there was a plugin – let me search – oh it still exists – “Genesis Style Trump” – https://wordpress.org/plugins/genesis-style-trump/.

    If I can do that in GeneratePress, that will be awesome!

    #165194
    Tom
    Lead Developer
    Lead Developer

    Ah, I gotcha 🙂

    You should be able to do it like this:

    add_action( 'wp_enqueue_scripts', 'generate_remove_scripts' );
    function generate_remove_scripts() 
    {
        wp_dequeue_style( 'generate-child' );
    }
    
    add_action( 'wp_enqueue_scripts', 'generate_move_scripts', 999 );
    function generate_move_scripts() 
    {
        if ( is_child_theme() ) :
            wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
        endif;
    }

    Let me know 🙂

    #165329
    Hftt

    That’s brilliant move. It works!

    Thank you very much Tom. You are amazing.

    #165345
    Tom
    Lead Developer
    Lead Developer
    #183512
    Jessica

    Would there be a way to do this with GP hooks? I am attempting to avoid creating a child theme.

    For us, we are using a custom CSS plugin which works great, except that there’s just 1 for the whole site. I’d like to set up a homepage .css file that I can call with a hook so that it doesn’t load on all pages. Is this possible?

    #183546
    Tom
    Lead Developer
    Lead Developer

    You could do something like this in the wp_head hook:

    <?php if ( is_front_page() ) : ?>
        <link rel='stylesheet'  href='URL TO YOUR CUSTOM STYLESHEET' type='text/css' media='all' />
    <?php endif; ?>

    That will load it only on the home page 🙂

    #184042
    Jessica

    Hi Tom,

    Thank you for the suggestion. The CUSTOM.css style sheet did appear in the header as needed, but it appears that it is de-prioritized. The CUSTOM.css is being overwritten by site-wide style sheets. Is there a way to add a function, for only the home page, that prioritizes CUSTOM.css?

    Thank you!
    Jessica

    #184107
    Tom
    Lead Developer
    Lead Developer

    Absolutely!

    add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 500 );
    function my_custom_scripts() 
    {
        // Bail if we're not on the front page
        if ( ! is_front_page() )
            return;
    
        wp_enqueue_style( 'my-custom-style', 'URL TO YOUR STYLESHEET', false, '1.0', 'all' );
    }

    Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

    Let me know if you need more info 🙂

    • This reply was modified 4 years, 8 months ago by Tom.
    #184110
    Jessica

    Excellent, thanks so much!

    #184115
    Tom
    Lead Developer
    Lead Developer
    #184127
    Jessica

    This worked beautifully! Thanks again!

    A quick note: the redirect for editing custom PHP in the Generate Simple PHP plugin did not take me to the correct place to edit within the WP interface (it took me to Plugin editing, but to the first alpha plugin not to Generate Custom PHP).

    I ended up just editing custom.php within Notepad++ FTP and that worked great, but I wanted to let you know about the redirect. We are running multisite, so that may have caused the issue.

    #184138
    Tom
    Lead Developer
    Lead Developer

    That’s very weird – I just checked and it’s working on a regular install, so it must be a multi site issue.

    I’ll see if I can figure it out 🙂

    #1125148
    Gabriela

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

    Some styles from child are ineffective in Woocommerce pages.

    Is there a function so that I load my child-theme style last of all?

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