Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
Edits to style.css should be reflected in your front page, unless you're already loading a custom stylesheet. –  Pat J Jun 12 '13 at 13:27
add comment

1 Answer

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.