[Resolved] Load Additional CSS file on home page

[Simon]

Hey Guys,

Just a quick one, I have a lot of styling that only applies to the home page as it runs off WP-show-post (which also only runs on the home page). So have created a separate css file for the home page.

What is the best way to load it? hook? functions? PHP Snippets?
Here are some examples of what I have so far:

<?php if ( is_front_page() ) : ?>
    <link rel='stylesheet'  href=‘/wp-content/themes/generatepress_child/home-style.css’ type='text/css' media='all' />
<?php endif; ?>

Or maybe:

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( ‘home-style’, '/wp-content/themes/generatepress_child/home-style.css', false, '1.0', 'all' );
}

[Leo]

Hi there,

Looks like the second snippet should work. Similar to what Tom provided here:
https://generatepress.com/forums/topic/add-external-css-file/#post-887094

It can be added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Simon]

Added using php snippets as is. Worked like a charm.

Thanks Leo.

[Leo]

No problem 🙂

[Simon]

Hey Guys,

Was just checking my PHP log and I am getting the below error caused by the above code I implemented:

PHP Warning: A non-numeric value encountered in /public/wp-content/themes/generatepress_child/functions.php on line 168

This is the line that resides on 168:
wp_enqueue_style( ‘home-style’, '/wp-content/themes/generatepress_child/home-style.css', false, '1.0', 'all' );

And this is the whole section:

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( ‘home-style’, '/wp-content/themes/generatepress_child/home-style.css', false, '1.0', 'all' );
}

Any thoughts on why thats triggering an error?

Cheers,
Simon

[Tom]

The only issue I’m seeing there is the curly quotes around home-style. I would also use the full URL to the stylesheet instead of starting with /wp-content/.

[Simon]

I think that has fixed it. Thank you Tommo.

[Tom]

You’re welcome 🙂

[Author]

Posts