Best way to create a css file dynamically

It sounds like you have some competing goals as is usual in these situations. You should probably look at your objectives and prioritize them for your project.

On one extreme, bootstrap WordPress and dynamically generate CSS for simple management and ultimate flexibility in install configurations/locations.

On the other extreme, write custom code to directly access the database and pre-generate CSS that is minified, compressed and cacheable to squeeze every bit of performance on the server and for the client.

And then, there’s the gray area between the two.

Hiya Victor,

I have the same issue as you originally did. I can see your concern about referencing parent directories to load the bootstrap, but (as all wordpress themes are located 3 directories down from the main WP install directory) I do not see the
require '/../../../wp-load.php'; // load wordpress bootstrap
line causing any problems – unless this wp-load.php is renamed in a future version, which I’d guess is pretty unlikely(?).

I know it’s not a nice coding practice, but I am pretty confident that this technique is sturdy and future-proof.

Anyway, I’m also just wondering what solution you used in the end??

I know this is an old thread, but I was looking for a solution to this same problem and a search for “creating dynamic css with wordpress” returned this as the first result so, I thought I would post my solution here so that others can find it.

This can be done acceptably well by using admin-ajax.php which is designed to allow you to access WP and only load what is necessary to do so.

When you enqueue your style sheet, do it like this:

wp_enqueue_style('dynamic-css',
                 admin_url('admin-ajax.php').'?action=dynamic_css',
                 $deps,
                 $ver,
                 $media);

then create s function to load you dynamic css file

function dynaminc_css() {
  require(get_template_directory().'/css/dynamic.css.php');
  exit;
}

then add your ajax actions

add_action('wp_ajax_dynamic_css', 'dynaminc_css');
add_action('wp_ajax_nopriv_dynamic_css', 'dynaminc_css');

@hube2

thats the first answer that seems to be on the right track, I’d like the neatness of having styles set in options in a separate file without essentially loading WP twice,

the above looks like it might work, can you explain a little bit more ?

regards.

Paul

That’s pretty much the entire explanation. You basically enqueue an AJAX function as your css file. The AJAX function loads the script that will output your dynamic css. If you need additional information about using AJAX in WP you can see the codex page.

The file that I would require “dynamic.css.php” would look something like this:

<?php
  header('Content-type: text/css');
  // I can access any WP or theme functions
  // here to get values that will be used in
  // dynamic css below
?>
/* CSS Starts Here */

.example-selector {
  color: <?php echo $color; ?>;
}

@hube2

You are my savior at the moment ??
This has been racking my brain all day, and you set in motion the solution for my case, so thank you very much.

originally I figured the above would work. and it did to a point, yet I still could not define or access variables or use certain functions. (of_get_option in this case).
Then I remembered that if you are using a framework you have to make sure to require their framework options as well.

so my in my functions.php I added what you had mentioned.

wp_enqueue_style('dynamic-css',
                 admin_url('admin-ajax.php').'?action=dynamic_css',
                 $deps,
                 $ver,
                 $media);
function dynaminc_css() {
  require(get_template_directory().'/css/dynamic.css.php');
  exit;
}
add_action('wp_ajax_dynamic_css', 'dynaminc_css');
add_action('wp_ajax_nopriv_dynamic_css', 'dynaminc_css');

and I am using Options framework, so in the dynamic stylsheet I had to include this at the top.

<?require('../inc/options-framework.php');
    header("Content-type: text/css; charset: UTF-8");
//Now here, I can define any variables I need using the "of_get_option"
//That comes with the Options Framework (for example the below to get
//the background.
    $body_background = of_get_option('background_picker');
?>
/*--End PHP, Begin CSS---*/
body
{
background: <?php echo $body_background['color'] . ' url(' . $body_background['image'] . ') ' . $body_background['repeat'] . ' ' . $body_background['position'] . ' ' . $body_background['attachment'];?>;
}

I tip my hat to you, good sir. Thanks again…figured I would share that it worked for me. Maybe someone will find it useful.