[Resolved] Load child theme css after plugin stylesheets

[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 8 years, 3 months ago by Tom.

[Tom]

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.

[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!

[Tom]

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 🙂

[Hftt]

That’s brilliant move. It works!

Thank you very much Tom. You are amazing.

[Tom]

You’re very welcome 🙂

[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?

[Tom]

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 🙂

[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

[Tom]

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 8 years ago by Tom.

[Jessica]

Excellent, thanks so much!

[Tom]

You’re welcome 🙂

[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.

[Tom]

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 🙂

[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?

[Author]

Posts