AnswerBun.com

How can I force Dynamic CSS via ACF values to update on page load?

WordPress Development Asked by rconrad41 on December 16, 2020

I’m trying to dynamically change the background color of a post on scroll to colors set in post options via an ACF color picker. I was able to source enough code examples to get it working (I thought) when developing locally, but now that I’ve moved it to a real server, it doesn’t function the same way.

Problem: The color changing works on the first post I look at, but when I go to another post, the background color that should be displayed (or changed to) is the same as the first post. The only way to get it to display the correct color is to do a hard refresh.

Test it by viewing these two pages. You’ll notice they both have the same color to start at the top of the page as well as at the very bottom when you scroll (color changes again). But doing a hard refresh will change that. (first link should be peach background, second link blue).
https://www.conrad-design.com/dev/cd2020/projects/blush-salon-spa-website-design/
https://www.conrad-design.com/dev/cd2020/projects/pantel-business-systems-website-design/

Here’s how I have it set up so far:

JS for color changing on scroll effect:

jQuery(document).ready(function($) {
    
    $(window).scroll(function() {

  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      $body.removeClass(function (index, css) {
        return (css.match (/(^|s)color-S+/g) || []).join(' ');
      });

      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
    
});

It’s enqueued like this in my functions.php file:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/cdscripts.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

PHP file to generate custom CSS file:

.color-accent {
  background-color:<?php the_field('accent-color');?> !important;
}
.color-initial {
  background-color:<?php the_field('initial-color');?> !important;
}

Function to convert PHP to CSS and enqueue it:

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'generate_options_css' );

In the post template, the sections I want to change background colors on when they’re scrolled to are assigned the "panel" class and data-color="XXXXXXX" value depending on what color from ACF I want to use.

Is there any other way for me to accomplish this that will force the new CSS values to be loaded for every page/post?

One Answer

Per Tony's suggestion, adding a random string to the CSS version did the trick. Here's the code I used to do that.

First this code to generate the random number.

// get theme version
function cd_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = cd_get_version();
global $theme_version;

// get random number
function cd_get_random() {
    $randomizr = '-' . rand(100,999);
    return $randomizr;
}
$random_number = cd_get_random();
global $random_number;

And this this updated code to add that random number to the dynamic CSS file.

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . '/inc/custom-styles.php';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . '/inc/custom-styles.css', $css, LOCK_EX); // Save it as a css file
    
    global $theme_version, $random_number;
    if (!is_admin()) {
        wp_register_style('custom_styles', get_stylesheet_directory_uri() . '/inc/custom-styles.css', false, $theme_version . $random_number);
        wp_enqueue_style('custom_styles');
    }
}
add_action( 'wp_print_styles', 'generate_options_css' );

Answered by rconrad41 on December 16, 2020

Add your own answers!

Related Questions

Add Featured Image and Title to wp_nav_menu items

1  Asked on November 19, 2020 by red5

   

Google Analytics – add script to functions.php

0  Asked on November 19, 2020 by szachmat

   

Modify Maximum upload file size text in WordPress Media

0  Asked on November 15, 2020 by tacker

   

How to display fields from the loop in two separate divs

1  Asked on November 3, 2020 by pual

   

Correct permalinks and 404-error

1  Asked on November 1, 2020 by vlad

   

Add custom field to Posts and sort by it

1  Asked on October 27, 2020 by nikname

     

How to generate the COOKIEHASH from JavaScript

1  Asked on October 26, 2020 by zeth

   

Custom permalink variable on single post

1  Asked on October 20, 2020 by quyet

   

get_terms (or tax_query) for term of current post?

2  Asked on October 18, 2020 by fntc

     

How to customize the Lost Password URL?

0  Asked on October 17, 2020 by radu

   

How to add one time a new page?

1  Asked on October 17, 2020 by zed93

 

Woocommerce tables not responsive mobile

1  Asked on October 8, 2020 by rickmorty

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP