A life in the day

3/15/2005

Stylesheets Plugin

Filed under: — site admin @ 12:52 pm

I’ve created my first WordPress plugin. It allows you to add your own stylesheets independent of the chosen theme. You can download it at http://scott.sauyet.com/php/wp-plugins/stylesheets/. Install is the standard, unzip, drop it in the plugins directory, and activate. It adds a panel to the managment page.

The genesis of this plugin was a little itch I had to scratch: I’ve been playing with themes for my blog. Someday I’ll get around to writing my own, but for now I’m working with many of the beautiful options available online. The trouble is that I kept having to patch the stylesheets with a little extra CSS that I was using on my site. I have some health issues that I’m tracking with markup that looks like this:

    I’m at <strong class="good reading">78</strong>, which is in the
    target range of below <strong class="target reading">100</strong>.

which in this blog looks like:

I’m at 78, which is in the target range of below 100.

and of course sometimes there’s a "class='bad reading'" too. :-( To go along with this, I’d been adding a tiny bit of CSS to the stylesheet for each theme I tested. This is tedious and error-prone, and seems to be against the spirit of WordPress.

So when I started to understand the plugin architecture, I created a tiny plugin that added the necessary CSS to the head of the document. Then I switched to an extenal call to the stylesheet. After that, I arranged for the call to the stylesheet to call through the plugin itself. At this point I realized that these techniques could be useful to others. So I’ve generalized it quite a bit, and tried to reasonably bulletproof it.

I think it’s straightforward to use, and self-documenting. It allows you to create as many separate stylesheets as you like, each one including as much CSS as you choose, linked or imported (maybe later I’ll add the option to include the CSS directly in the head), and associated with whatever collection of media you wish. You can also choose to hide any of these stylesheets.

I’m pretty happy with the results, but so far I am the only user. I would love to hear feedback from WordPress users.

I would also love to hear from others who know more about building WordPress plugins about whether anything I’m doing is considered somehow incorrect. I really would prefer to make this a more OO design, but my PHP skills are only so-so, and I don’t know much about how to convert it. I’ve created my own namespace by prefixing all variables and functions with “stylesheets_” but that’s clearly not an ideal option. Beyond that, are there better ways to accomplish what I’ve done here? Please let me know. It’s also quite possible that WP has some technique built-in that I don’t know to accomplish the same thing.

To the user of the web site, all they will get is additional calls in the document head for something like either

    <link rel="stylesheet" type="text/css" media="screen, projection"
          href="http://my-blog.com/wp-content/plugins/stylesheets.php/my-styles.css" />

or

    <style type="text/css">
        @import url(http://my-blog.com/wp-content/plugins/stylesheets.php/my-styles.css) screen, projection;
    </style>

The stylesheets are stored in the options table, along with meta information including their names and the media to which they apply. This means that there is no need to add a table to the database to support the plugin. I don’t know if that is in keeping with the normal use of the options table. Perhaps not.

In the management page, you can edit an existing stylesheet and its meta information, add a new stylesheet, or delete one.

The code is entirely undocumented. It’s clear enough to me, but I don’t know how others would see it. I’m more than willing to answer any questions.

Comments are welcome either as responses to this post or via email, at scott AT sauyet DOT com.

13 Responses to “Stylesheets Plugin”

  1. PaulaO Says:

    Downloaded it and dropped it into the site. However, got a weird problem.

    I took a screenshot since it will explain better than I can.

    As you can see, the tab next to the Stylesheet tab is all screwy. I’ve deactivated the plug in for now (yours) and the page looks fine now.

    I am using the Gila theme and the other plug in is the Donkey Quote. I don’t know if it is a conflict of plugins or a conflict of tabs. Let me know what you think. - Paula

  2. Blogging Pro » Blog Archive » WordPress Plugin: Stylesheets Says:

    […] March 16th, 2005 WordPress Plugin: Stylesheets Stylesheets Plugin allows you to add your own stylesheets independent of […]

  3. Scott Sauyet Says:

    Paula, thanks for trying this out.

    I am using the Gila theme and the other plug in is the Donkey Quote. I don’t know if it is a conflict of plugins or a conflict of tabs. Let me know what you think.

    I had trouble getting Donkey Quote to work with Gila. I don’t quite understand why. Once I did get them installed, though, everything is working together for me. The stylesheets plugin works with almost every theme I tried, and Donkey Quote seems not to run into any interference. In other words, I don’t know why.

    One thing I do suspect is that the call to wp_head() that should be in the section of the Gila file header.php is missing. That would explain the unfortunate look of the Stylesheet plugin (and points me to a tweak I forgot to make, as well.)

    If you don’t know PHP, there should be a line in “wp-content/themes/gila/header.php”, most likely before the line that reads

    </head>

    This line should read

        <?php wp_head(); ?>

    But this does not explain why there is interference between DonkeyQuotes and Stylesheets. That’s plain bizzare.

    I’m sorry not to have a more definitive answer, but I’m stumped.

    — Scott

  4. Kenshi Says:

    Thanks Scott, this is exactly what I have been looking for!

  5. Kenshi Says:

    What would be really great would be to enable stylesheets to be alternate, so they may be selected by the client.

  6. Lauren Says:

    wordpress is making strides wvery day.. I will get soon one of wordpress blog.i shall incorporate the wordpress plugin of yours in it… I hope you will be available for help when the time comes.

  7. Diabetes Information Says:

    I was searching for ‘diabetes information’ at google and got this your post (’Stylesheets Plugin’) in search results. Not very relevant result, but still interesting to read :)

  8. Scott Sauyet Says:

    I started this blog when I was diagnosed as diabetic. The blog is not very active at all, but there are a number of posts related to my being diabetic:

    http://scott.sauyet.com/thoughts/archives/category/diabetes/

    I don’t know why Google would list this page except that it is one of only two on the blog that really have any wide interest, and perhaps because it links to that page above, it’s page ranking is relatively high.

  9. johny why Says:

    this is exactly the plugin i needed, because i use the theme switcher, and i need to put some css in all themes. thanks!
    i worked around my original need, since ii didn’t have your plugin, so i dont need to use it now. will let you know if i use it!

  10. Scott Sauyet Says:

    Well, I hope it does work for you if needed. I haven’t thought much about this plugin since I wrote it. The blog is pretty inactive and this plugin really is behind the scenes.

    Let me know if you have any problems with it.

  11. Al Virani Says:

    Well your blog may be inactive, but maybe this is a topic to reinvigorate your blog now? Maybe? In any case this is just what I needed. Right now I’m experimenting with different themes, and have to reenter the styles each time I change the theme. Even after I settle on one theme, if I ever decide to change it, I have to read the code again. This plugin now effectively removes all that pain and suffering! Great stuff. I’ll go install it right now.

  12. Al Virani Says:

    Opps, I meant ‘re-enter the code again’, not ‘read it’.

  13. play free Says:

    play free…

    A life in the day » Stylesheets Plugin…

Leave a Reply

Powered by WordPress