WordPress.org

Ready to get started?Download WordPress

Forums

Code Snippets
Suggestion - Custom CSS (13 posts)

  1. Joan Boluda
    Member
    Posted 1 year ago #

    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/

  2. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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's implementation of the feature leaves little to be desired.

  3. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  4. Joan Boluda
    Member
    Posted 1 year ago #

    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 :)

  5. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. Joan Boluda
    Member
    Posted 1 year ago #

    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! :D It'll be very usefull!

    Joan!

  7. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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 uses, where you use WordPress conditional tags like is_page() and is_admin().

  8. Joan Boluda
    Member
    Posted 1 year ago #

    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 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...

  9. another-webmaster
    Member
    Posted 1 year ago #

    @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.

  10. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  11. Joan Boluda
    Member
    Posted 1 year ago #

    @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 Bunge right you are! Is the best solution for not depending on the theme. Is that how Custom CSS Manager or My Custom CSS works?

    We appreciate your feedback!

  12. Shea Bunge
    Member
    Plugin Author

    Posted 1 year ago #

    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 <link> 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, adding stylesheets with a <link> element is preferable over directly injecting it into <style> tags or using @imports performance-wise.

  13. Joan Boluda
    Member
    Posted 1 year ago #

    My Custom CSS writes to its own file in the plugin directory and then adds it as an @import in style.css.

    That seems fine, but maybe a <link> tag would be better.

    Custom CSS Manager injects the styling directly into the page head.

    Bad idea... bad, bad idea.

    I think that the best solution is the one that Jetpack uses: adding a <link> tag pointing to a single, dynamically generated stylesheet containing all of your CSS snippets.

    Yeah, that's the best option! And if it's implemented by Automattic itself, that's a guarantee ;)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.