add custom CSS to a single page or template

8 Replies ·

  1. Hi Justin. I’m creating a single page within my Stargazer child theme that will have special content that needs a lot of additional CSS formatting. I would prefer to not add to all that to my style.css since it is only for one page.

    I will probably also have a custom template for that page, and I will want all Stargazer’s and my style.css formatting to be applied first. The custom CSS will just be for this added content.

    What is the best way to add the custom CSS to the page without adding it to style.css? Thank you!

  2. Bill Seymour

    I generally add a Class for each page. Then I can target the particular page (.page-xyz .bleh {})

    I left the references in the code below – I think I first saw this here in the previous forum, one of Brian’s posts. –Bill

    add_filter('body_class','my_body_class_add');
    
    /*
    - ref: krogsgard.com/2012/wordpress-body-class-post-meta/
    - ref: wordpress.stackexchange.com/questions/42117/how-to-retrieve-the-slug-of-current-page
    */
    function my_body_class_add($classes) {
     
      global $post;  // use Global $post
      
      // ref: wordpress.stackexchange.com/questions/42117/how-to-retrieve-the-slug-of-current-page
      if ( is_page() ) { 
        $post_slug = $post->post_name;
      }
      
    	$classes[] = 'myclass-' . $post_slug;
    	return $classes;
    }
  3. Dan at Porkopolis

    @marty
    Thanks for the good suggestion. I read and followed the directions on Justin’s documentation page that you suggested. This worked, though it seems intended as a way to add a completely new style sheet for a specific page and skip the child theme’s style.css or style.mim.css.

    I wanted to have my child theme styles load first, then the custom stuff, so in my custom style sheet I started with:

    /* add child theme styles   */  
     @import url('../style.min.css');

    I have been testing this on my Localhost so far and it seems to be just what I needed. Cool!

    @Bill Seymour
    Thank you for your suggestion, too, Bill. Alas, I an just a DIY user and just designing for my personal use. I only know enough to be dangerous most of the time. I am sure your suggestion would also work. But after reading all the references you gave, I decided to pick the low-hanging fruit first and tried @Marty’s.

  4. Justin Tadlock

    You can also do this based on the post type (not mentioned in the docs). This will make styles available for all post types:

    `
    Style Name: Example
    `

    But, you can change that header to this for pages only:

    `
    Page Style: Example
    `

    Or, posts only:

    `
    Post Style: Example
    `

  5. marty

    Yeah I do the @import as well porkopolis.

    That’s great Justin. I had know idea. I like the idea of targeting post-types.

  6. Dan at Porkopolis

    @Marty
    Thanks for confirming the @import was a good idea

    @Justin
    I see that my existing Custom Post Types now have the style sheet meta box in the edit post screen, but the meta box does not show up during bulk edit. Would I have to go through my current CPTs one at a time to apply a custom style sheet?

  7. Justin Tadlock

    Yes, you have to go through one at a time to add a stylesheet to a post. There’s no bulk edit feature for post stylesheets.