front-page.php stylesheet

How to load a custom stylesheet for your Front Page

  1. Set up front-page.php (which you’ve done already).
  2. Create a stylesheet for your front page (you can copy style.css, but more likely, you’ll just want to override a few things). Let’s call it front-page-style.css.
  3. View the HTML source of one of your pages, and find the id of the style.css file (probably something along the lines of your-theme-css) Trimming the -css part will tell us what we need to use as a dependency in the code.
  4. Add the following to your theme’s functions.php file:

    add_action( 'wp_enqueue_scripts', 'wpse102732_front_page_styles', 20 );
    function wpse102732_front_page_styles() {
        if( is_front_page() ) {
            // Any dependencies go here:
            // if the style.css id in step 3 was 'your-theme-css',
            // then use 'your-theme'
            $deps = array( 'your-theme' );
            $handle="your-theme-front-page";
            $url = get_stylesheet_directory_uri() . '/front-page-style.css';
            wp_enqueue_style( $handle, $url, $deps );
        }
    }
    

You should now be able to modify styles in front-page-style.css for just the front page.

References

Leave a Comment