Title: Suggestion – Custom CSS Last modified: August 20, 2016 --- # Suggestion – Custom CSS * [Joan Boluda](https://wordpress.org/support/users/boluda/) * (@boluda) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/) * Most of times when I add a snippet, then I have to add some extra CSS in the style.css of the current theme related to that snipet. It would be great if we could do that with Code Snipet too. * Code Snippets _add_ code to the functions.php… it would be terrific if I could also _add_ CSS to style.css in another area text like the “code” one? * Thaaaanks a lot! * [http://wordpress.org/extend/plugins/code-snippets/](http://wordpress.org/extend/plugins/code-snippets/) Viewing 12 replies - 1 through 12 (of 12 total) * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3584979) * Is suppose that would be possible… maybe as an addon plugin? However, other plugins exist for the sole purpose of adding Custom CSS. For example, [Jetpack](http://wordpress.org/extend/plugins/jetpack)‘ s implementation of the feature leaves little to be desired. * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3584982) * The other issue is that: where should the CSS be used? On _all_ admin pages? Just on the front-end? On specific pages? Defining _what_ form a feature such as this might take would be more difficult then actually implementing it. * Thread Starter [Joan Boluda](https://wordpress.org/support/users/boluda/) * (@boluda) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3584987) * Yeah, you are right. * Now when I use a class in one snippet, I add the related css in the style.css( or a new custom.css file that I load in the header), so it is used on all the front end. * I’m gonna check out Jetpack! But it would be nice be able to active or deactive the code snippet and the related css modifications in just one click 🙂 * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585292) * I’ll have a think about it. A feature like this wouldn’t be bundled into core, rather I’d release it as an extension plugin like the [tags feature](http://wordpress.org/extend/plugins/code-snippets-tags). * Thread Starter [Joan Boluda](https://wordpress.org/support/users/boluda/) * (@boluda) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585293) * Great! Thanks a lot! It would save me a lot of time, since now I’m using the “ description” field to note down the snippet related CSS. Then, when I active a snippet, I have to copy paste manually the CSS code to the style.css, and remove it if I deactivate it. * By the way, I didn’t know the tags plugin. I’ll install it right now, since I have more than 50 snipets in my repository! 😀 It’ll be very usefull! * Joan! * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585294) * Do you have any idea how you could define _where_ should the CSS be used? Such as: on all admin pages? Just on the front-end? On specific pages? How could you let the plugin know where to apply this CSS? Right now, I’m thinking something like what [Widget Logic](http://wordpress.org/extend/plugins/widget-logic/) uses, where you use WordPress [ conditional tags](http://codex.wordpress.org/Conditional_Tags) like `is_page()` and `is_admin()`. * Thread Starter [Joan Boluda](https://wordpress.org/support/users/boluda/) * (@boluda) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585295) * Hi! * Almost all of my nippets affects the front-end, but you are right. If the snippet affects the admin area, it should be added there too. A “css logic” would be very appreciated then! So the css is loaded only if it’s useful. Pretty, pretty nice solution. * The problem of plugins like [My Custom CSS](http://wordpress.org/extend/plugins/my-custom-css/) is that they load all the custom code everywhere, so there is a lot of unused css selectors in all pages. * The CSS snippets will be somewhat “added” to the style.css or are you thinking of loading a “css-snippets.css” into the header, after the style.css? The less. css stylesheets loaded, the better… * [another-webmaster](https://wordpress.org/support/users/another-webmaster/) * (@another-webmaster) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585301) * [@boluda](https://wordpress.org/support/users/boluda/) * Till I find a solution (same you are looking for, mentioned above), I add the specific css file with the additional css lines in a _separate header_ which is called from the template that needs the additional css lines.(working with 3 different templates for postings therefore it works as a temporarily solution) * _Having also a code snippet (in sandbox) which enqueue an external css file but that loads it just (same as you mentioned above)in same style.css Looking for a fancy way so it only loads in templates which need that specific css. * Shea is master in doing real code so I am curious and hoping 🙂 His code-snippets plugin is also awesome so who knows. * note: didnt want to interfear but had same question in mind. * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585302) * It would be possible to actually physically write to the theme’s style.css file but this presents many difficulties. Not only do some hosts disallow write access to files, but then the CSS would be bound to the theme, and when you change the theme, the CSS goes with it. * I probably won’t get around to writing this plugin for a while, but when I do, the CSS would have to be served through a query var or a PHP file which is registered as a stylesheet. If anyone has any better ideas, then please let me know. * Thread Starter [Joan Boluda](https://wordpress.org/support/users/boluda/) * (@boluda) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585303) * **[@another-webmaster](https://wordpress.org/support/users/another-webmaster/)** Thanks for the idea! But I am using so many snippets, I would need 6 or 7 enqueued css files, and that’s bad for SEO and performance. MOreover, I don’t wan’t to depend on files for every project. Just import my code snippets library, activate the ones I need for that project, and boom! 🙂 * **[@shea](https://wordpress.org/support/users/shea/) Bunge** right you are! Is the best solution for not depending on the theme. Is that how [Custom CSS Manager](http://wordpress.org/extend/plugins/custom-css-manager-plugin/) or [My Custom CSS](http://wordpress.org/extend/plugins/my-custom-css/) works? * We appreciate your feedback! * Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/) * (@bungeshea) * [13 years, 1 month ago](https://wordpress.org/support/topic/suggestion-custom-css/#post-3585304) * Looking at the code of the two plugins you mentioned, My Custom CSS writes to its own file in the plugin directory and then adds it as an `@import` in `style. css`. Custom CSS Manager injects the styling directly into the page head. * I think that the best solution is the one that Jetpack uses: adding a `` tag pointing to a single, dynamically generated stylesheet containing all of your CSS snippets. Of course, caching of some sort would need to take place. [According to Google](https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead), adding stylesheets with a `` element is preferable over directly injecting it into `