The best way to create dynamic CSS for your WP theme
| January 24, 2011 | Posted by Ivan under WP For Developers |
When you design your own WordPress theme you probably use an option page with options that affect your theme appearance. If so, you need to create dynamic css for the theme and insert it into pages. There are several ways to do that but only one is the best. Firstly let’s enumerate them:
- Insert entire css into <style> tag using wp_head call
- Write dynamic CSS to a file, link to the file in the head.
- Using template_redirect hook to create CSS output based on a special GET variable.
- Style.php, which is linked to from the head, and outputs dynamic css.
They are listed in that order because they go from “best” to “worst”.
Some time ago I thought that the best way is the 3rd one but Otto (WordPress support forum moderator) has recently explained why is this order right.
Method 1 has the lowest server impact. When you make the call to get the page, it creates the page and outputs all the dynamic stuff in one shot. Some people find the CSS in the html to be aesthetically displeasing, but the fact of the matter is that this is the fastest, simplest, and best way to do it.
Method 2 has a problem in that you’re doing file writing from the theme. This is bad because you cannot guarantee that you have permissions to even write files. Assuming you try to write them to the uploads folder, then part of your theme is now outside the theme directory, which is confusing. Also, by including the CSS as a separate file, you’re creating another call to the server, which even Google Webmaster Tools will tell you is a thing to avoid.
Method 3 is the same as method 2, except now instead of writing the file, you make a call to http://example.com/?css=whatever and then your code intercepts that and produces the CSS on-the-fly, via whatever means, then exits. This avoids the file writing problem, but now it’s not only making an extra server call, but it’s also loading all of WordPress up again, which creates a higher server CPU impact.
Method 4 is the same as method 3, basically, except that you’re referencing some PHP file directly, which now has to:
- a) find wp-load,
b) load WordPress,
c) produce the resulting CSS output. Worst of all cases: two calls to the server, WordPress loads twice, and you’re
now having to search around to figure out how to load WordPress again just so you can access the database.
So the best way to create dynamic CSS is…
The end statement here is to always use method 1. Okay, so you find CSS in the HTML header code to be unpleasant. My advice: get over it. Every other way of doing things not only requires an extra HTTP request to the server, but most of them also require a whole lot of extra PHP processing. Think about it this way: You’ve already got WordPress loaded up to generate the page. The most sensible thing to do is to go ahead and generate the dynamic part of the CSS right now as well. Just make that dynamic part as small as possible. Minify it into one-line if you want.
Note that WordPress itself uses method 1 for the custom background image and custom header image stuff. It does it this way because it’s the best way to do it.
I think you have a point, but you did not elaborate as should, I find. Method 1 doesn’t look very attractive I have to admit because I used it a couple of times!
Method 1 is not very attractive, that’s true, but others are worse. That is what I’ve written about.
Thank you Ivan, I was about to try method 4 for my theme but there are not that many css modifications available in my optionspanel so why bother. Thanks to you I don’t have to :)