I have a few CSS values on my WP site that I would like to change once a day on a daily basis using a random variable and I am trying to determine the most elegant way of doing this. For the sake of simplicity, in this example, I will attempt to automatically randomize, on a daily basis, the padding of a div with the id variablePaddingDiv.

I am pretty sure that I would want to use WP_cron, and using this codex page, I think I figured out how to do it, but I wanted to check it with the community. That way I can learn best practices and at the same time maybe provide an answer for someone else who may also be trying to figure out how to update CSS using a scheduled task.

My Best Guess

I think I the best way to do this would be to 1) schedule a daily revision of some CSS and then 2) enqueue that CSS file every time I load the page.

Part 1: Modifying Daily a CSS file

I think this is the code I would add to my functions.php to run the daily update of the CSS file (i.e. part 1):

function change_padding_activation() {
  if ( ! wp_next_scheduled( 'change_padding_hook' ) ) {
    wp_schedule_event( time(), 'daily', 'change_padding_hook' );

function change_padding_function() {

   $min = 20;  // the minimum value of padding
   $max = 40;  // the maximum value of padding
   $var_padding = rand ( $min , $max );  // pick a random number between the min and the max

   $css_string='#variablePaddingDiv { padding: ' . $var_padding . '%;}'; // write the CSS using variable created above.
   $a = fopen("my_css_file_written_with_php.css", 'w');                 // open the file
   fwrite($a, $css_string); // write to the file
   fclose($a); //close the file
   chmod("my_css_file_written_with_php.css", 0644);             // <---- also, do I need this?

add_action( 'wp', 'change_padding_activation' ); // hook calls the activation function
add_action( 'change_padding_hook', 'change_padding_function' ); //hook calls the function that changes the file

Part 2: Enqueuing the CSS file

Then I believe I would add this code to enqueue the updated CSS file to my functions.php file (part 2):

add_action( 'wp_enqueue_scripts', 'parentThemeName_child_enqueue_styles' );

function parentThemeName_child_enqueue_styles() {
    wp_enqueue_style( 'parentThemeName-style', get_template_directory_uri() . '/style.css' ); //my parent theme style
    wp_enqueue_style( 'parentThemeName-child-style', get_stylesheet_directory_uri() . '/style.css'  );  //my child theme style
    wp_enqueue_style( 'parentThemeName-child-style', get_stylesheet_directory_uri() . '/my_css_file_written_with_php.css'); // the updated CSS file from part 1 (above)

Can someone please tell me if they think that there are any problems with this approach, and if so, perhaps tell me what they are and suggest a better way to go about the task? Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.