Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This question is for theme developers.

I know how to use the settings API to gather input data, but I was wondering what's the best way include the styles.

Let's say you have 4-5 versions of the design, each with its own CSS rules and images. Options:

  1. You stuff all the CSS in style.css and trigger the color change trough a body class. In this case you get the browser to load CSS rules and images that are not used (eg. selected option: "red", and you have rules for "blue", "green" as well).

  2. Create separate stylesheets for each variant, and enqueue the selected style in the page. This could make the theme hard to maintain, because if you change one CSS file, you need to revise all the others too.

  3. Create separate stylesheets for each variant, but only with the extra color styles. So you enqueue a big "common.css" file and the CSS for the selected color scheme (which is small). Here you make an extra HTTP request :P

  4. ?

share|improve this question
    
Wouldn't option 1 be just as much to maintain as option 2? Wouldn't common.css be included in the theme's style.css? If I were doing it, I would put all the common css in the theme's style.css (that's what it's for, right?), and create separate stylesheets for the color options. If you wanted to separate common.css from style.css you could @import common.css from the color option's sheet instead of enqueuing it separately. –  Evan Mattson Jun 7 '12 at 16:29

2 Answers 2

I would put all the common css in the theme's style.css, and create separate stylesheets for the color options.

I would also put color options in their own folder with the images for that style. This way you can keep the filenames the same between color options to make maintaining the code a little easier.

If you wanted to separate common.css from style.css you could @import common.css from the color option's sheet instead of enqueuing it separately.

share|improve this answer
1  
This is exactly what I do. Using a consistent naming scheme for {color}.css and all the related {color}-foo.png (etc.) images makes conditional enqueues especially simple. –  Chip Bennett Jun 7 '12 at 17:29

You could use LESS for that! Define a global stylesheet and one for each color. Set variables for color codes in the color sheets and use them in the global sheet, then @import the global stylesheet into each of the color stylesheets.

Example:

global.less

body{
    background: @bgColor;
}

red.less

@bgColor: red;

@import "global.less";

That gives you one standalone stylesheet per color, so you can go for option 2 but still maintain only one stylesheet! All of the advantages of all options combined, without any of the disadvantages :)

share|improve this answer
    
well, it does have the disadvantage of requiring another http request to load the less js file, and js obviously has to be enabled for it to work. –  Milo Jun 7 '12 at 17:02
    
You can compile the LESS file and include the CSS only. Dead easy with incident57.com/less –  kalarzo Jun 8 '12 at 12:09
    
Keep in mind that using default CSS @import is not recommended! You'd be better off just doing the second HTTP request. Using @import with LESS will merge the files on compilation. –  kalarzo Jun 8 '12 at 12:19
    
if you pre-compile the css file it defeats the entire purpose of using less in this instance. –  Milo Jun 8 '12 at 13:09
    
Don't really get why. The goal is to minimize maintainence, CSS rendering time and HTTP load. With my solution you have to maintain all the styles only once, the browser doesn't have to process a single unused line of CSS and you can put everything in to one single stylesheet (per color). –  kalarzo Jun 12 '12 at 19:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.