front-page.php stylesheet

1 Views

I’ve googled and googled but I can’t seem to find out anything that’s understandable to me…

I want to have a static front page for my website, to this end I have created a front-page.php file in the active theme’s folder in my FTP server. I notice any edits I do in style.css are not reflected in front-page.php. I want to have a separate stylesheet for my front page anyway, so how do I go about linking front-page.php to a custom .css file, let’s say, front-style.css, so I can just edit the .css file to style the .php file? Or isn’t this the right approach?

Post Views: 1

Related posts

1 comment

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

Comments are closed.