0

I am trying to figure out how to assign a seperate stylesheet for different pages? I wan't to use the same stylesheet for my front page, and page template and a different stylesheet for my blog and it's related pages.

My theme only consists of a front page, a page template and a blog. So I would somehow need to figure out how to differentiate from the actual pages. It would need to be applied to all blog pages.

So I am wondering if I could do something like this(added to the header):

<?php if ( 'front-page.php' ) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); type="text/css" media="screen" />
<?php } elseif ( 'page.php' ) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" />
 <?php } ?>

If it is front page or the page template it uses the normal stylesheet. If it is anything else, it uses the blog stylesheet. If it can be done like that, can anyone help me with the syntax?

0

The correct method is to enqueue the stylesheets, via callback hooked into wp_enqueue_scripts. You can add the contextual conditionals inside the callback:

function wpse124258_enqueue_scripts() {
    if ( ! is_admin() ) {    
        // Conditionally enqueue
        if ( is_front_page() ) {
            // Front page stylesheet
            wp_enqueue_style( 'front-page-style', get_template_directory_uri() . '/front-page-stylesheet.css' );
        } else if ( is_page() ) {
            // Static page style
            wp_enqueue_style( 'static-page-style', get_template_directory_uri() . '/front-page-stylesheet.css' );
        } else {
            // Default style
            wp_enqueue_style( 'default-style', get_stylesheet_uri() );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wpse124258_enqueue_scripts' );

For more information, refer to the Codex for wp_enqueue_style().

  • 'wp_enqueue_scripts' is not fired in backend, so checking for ! is_admin() is unnecessary. – gmazzap Nov 24 '13 at 2:04
  • Ah, yeah; it's wp_print_* that fire in both places. – Chip Bennett Nov 24 '13 at 10:32
1

What you are looking for are the conditional tags, especially is_front_page, is_page or is_page_template

Your code should probably look like:

if ( is_front_page() ) { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"type="text/css" media="screen" /><?php 
} elseif ( is_page() ) { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" /><?php 
} else { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  type="text/css" media="screen" /><?php 
}

Though if you want to target a particular template you can use is_page_template:

if (is_page_template('some-template.php')) {
  • 1
    Scripts and stylesheets should always be enqueued rather than hard-coded in the document head. Also, use get_stylesheet_uri() in place of get_bloginfo( 'stylesheet_url' ). – Chip Bennett Nov 24 '13 at 0:38
  • @chipbennett is correct. You should be enqueueing the scripts – s_ha_dum Nov 24 '13 at 1:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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