How to add CSS style sheet to a WordPress page?

5 Responses to How to add CSS style sheet to a WordPress page?

1. Andy says:

   September 15, 2015 at 11:56 pm

   (Background information, skip to (suggestion) if you want) Not a WP user, but I stayed in a $random_hotel last night while I played one on TV.
   Okay, the W3C technically doesn’t like for stylesheet link tags to be after . It won’t validate at their site because it’s not standards compliant.

   In the real world, (just about any browser that supports CSS) you can get away with putting them almost anywhere. You’ll see the element that would be styled flash suddenly from unstyled to styled once that link tag is hit and the additional stylesheet loads. It’ll be a little ugly in some edge cases (don’t stick globally applicable link tags just after , obviously) but for a form on a blog? As long as link comes before the form becomes visible, it’ll be fine.

   (Suggestion)
   The easiest (and likely standards compliant) method would probably be a plugin like “WP Add Custom CSS” (https://wordpress.org/plugins/wp-add-custom-css/) to slop in the contents of a custom stylesheet per-post. Though adding a plugin requires you to keep the plugin while you have the form available. (Done collecting data; edit the post to replace the form with with “Edit: survey complete”(or whatever) then pull the plugin.)
   • Oleg Volk says:

     September 15, 2015 at 11:58 pm

     Could you point me to an example of the syntax please?
     • Andy says:

       September 16, 2015 at 12:25 am

       Example of which syntax, noncompliant stylesheet inclusion use? compliant inclusion use? A quick and dirty proof of concept that noncompliant inclusion will work?

       Again, not a WP admin, and this kind of thing depends on some WP particulars. I have no idea if it’ll work, fail quietly while eating the tag and looking silly or fail while eating the tag and vomiting a warning in the logs while looking silly.

       The best bet is to use the custom CSS plugin in the link above.
2. Andy says:

   September 16, 2015 at 12:06 am

   Hmm, your blog doesn’t substitute (> and <) correctly: If you aren’t seeing a greater-than and a less-than symbol between the parens of this post, here’s what that odd floating comma in my previous post should have been read as” “(…Don’t stick globally applicable link tags after the closing body tag, obviously…)”
3. oooorgle says:

   September 16, 2015 at 8:42 am

   Assuming your style sheet file is called ‘style.css’. The following should be copied into your functions.php found within your themes folder.

   /**
   * Proper way to enqueue scripts and styles
   */

   $css_path = get_template_directory() . ‘style.css’;
   function theme_name_scripts() {
   wp_enqueue_style( ‘style-name’, $css_path );
   }
   add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );

   References:
   http://codex.wordpress.org/Function_Reference/get_template_directory
   http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Comments are closed.