Optional Styles

April 18th, 2011 – 18 Comments

A WordPress plugin or theme should never have to output inline styles, especially not in the frontend. Inline styles will prevent some doctypes from validating and they are actually a factor to slow down your page loads.

If your plugin outputs a piece of code that needs styling, add an ID to the output and output the style using a style tag in the <head>. Next to that you should add an option to remove the style altogether, and tell users how to add the CSS to their own theme’s stylesheet.


18 Responses to Optional Styles

  1. GWP
    By GWP on 16 July, 2012

    I would prefer in some cases a system WYSIWYG, than to enter CSS code, which is not always so easy. I now try to add some code, I hope everything goes well.

  2. Max Pen
    By Max Pen on 8 February, 2012

    I just remove the plugin if it would do this if I don’t really need it. However if its a must have plugin I need for my site to work I’ll accept it.

  3. M.K. Safi
    By M.K. Safi on 10 May, 2011

    Would be nice if WordPress had a mechanism for plugin developers to add small bits and pieces to a virtual plugin-styles.css file.

    Like add_css($my_css) and maybe that function can also accept other parameters, which allow for specifying posts and pages where the CSS should be added (or maybe not, for better caching)…just some thoughts…

  4. Jaitra
    By Jaitra on 21 April, 2011

    I just came here as a front end developer myself to applaud this best practise. Thanks.

  5. Eunus Hosen
    By Eunus Hosen on 20 April, 2011

    Allowing user to use their own style a good thing. But it’s quite difficult for them those who don’t know CSS.

  6. Jay Tillery
    By Jay Tillery on 19 April, 2011

    Good call. I spend a lot of my time battling plugins that sloppily add and abuse inline styles. Wake up plugin/theme developers.

  7. Jesus
    By Jesus on 18 April, 2011

    but to survive to the IE float/margin bug using the breadcrumbs from your (amazing) WordPress SEO plugin, there’s no other option that using a “display: inline”… isn’t it?
    even using an inline style yoast breadcrumbs just go crazy in IE… :-(

    jesus.

    • ilman
      By ilman on 19 April, 2011

      Display:inline and inline css is different things ;)

      This article recommend us to load external css files rather than put inline css code directly in the html/template files.

    • Joost de Valk
      By Joost de Valk on 18 April, 2011

      That has more to do with your theme than with the plugin. There are literally tens of thousands of people using it without any inline styles without any issue whatsoever.

  8. Antonio
    By Antonio on 18 April, 2011

    And if, per instance, the plugin just works on certain pages or posts, the css added by the plugin shouldn’t load in all the pages/posts of a website!

    • Gigi ?
      By Gigi ? on 19 April, 2011

      and also the js, i’m deregister css and js via functions.php but this is an hard work!

    • Mark "Chief Alchemist" Simchock
      By Mark "Chief Alchemist" Simchock on 19 April, 2011

      Yes, good point. This is why, as suggested (or at least implied), the CSS should be in one file, that gets cached, and then there’s nothing to worry about. More or less, eh?

    • Joost de Valk
      By Joost de Valk on 18 April, 2011

      Agreed, though I have to say that is hard to do at times, for instance with shortcodes…

  9. Nilesh Shiragave
    By Nilesh Shiragave on 18 April, 2011

    Yes its better to not us inline styles in your plugin files.. My question if my plugin is providing options in wp-admin to change background color or width of a slider.. How should i add these kind of styles in tag? using in tag? or anything else you will suggest?

    • Nilesh Shiragave
      By Nilesh Shiragave on 18 April, 2011

      Yes its better to not us inline styles in your plugin files.. My question if my plugin is providing options in wp-admin to change background color or width of a slider.. How should i add these kind of styles in head tag? using style tag in head tag? or anything else you will suggest?

  10. Anand Kumar
    By Anand Kumar on 18 April, 2011

    I am one of the person who uses Shared hosting, So minimizing load on server is essential to me!

    Thanks for sharing the small but useful post. :)

  11. Michael Kjeldsen
    By Michael Kjeldsen on 18 April, 2011

    … or even better, when it’s adding a load of generic named styles in the head that overwrites the stylesheet’s styles.

    Please. Use. Unique. Style. Identifiers. kthxbye!

  12. Jeremy Oduber
    By Jeremy Oduber on 18 April, 2011

    Seriously. I get so annoyed when a plugin doesn’t allow me to add its CSS to my own stylesheet.


Check out our must read articles about Analytics