0

I building a landing page in WordPress, as I have done several times before. Locally, I can see my style updates to the new page; however, the styles are updating on my dev or prod site. My process is to create a slug in WordPress, in VSCode I create a class in my style sheet with .post-'slug', then write my styles. I use sourcetree for version control, and Azure for the build. Usually, I create my branch, commit my changes and then once my pull request is approved, I can see my changes on staging. Now, I can see that the build is successful in the pipeline, and I see the correct class in the body of page when I inspect it; however, none of the styles are being applied. Really unsure how to go about fixing this and any help would be appreciated.

UPDATE: I have tried adding a manual tag to the end and a time-stamp version. Initially, this worked both times. After adding the tag, my style updates were applied; however, it only worked once. When I inspect the page and look at the network tab I see the version is changed after updating, but the styles are not being applied.

/css/sections.css?ver=1706112313 -initial /css/sections.css?ver=1706114554 -after update

This is how I currently have it setup:

add_action('wp_enqueue_scripts', function () {

    global $post;

    $newAbspath = str_replace('\\', '/', ABSPATH);
    $newAbspath = str_replace('wp/', '', $newAbspath);
    $version = time();

    wp_register_style(
        'sections-styles',
        home_url() . '/css/sections.css' . '?ver=' . $version,
        [],
       filemtime($newAbspath . 'css/sections.css')
    );

   if (
        is_page_template('single-sections.php') ||
        is_page_template('page-sections.php')
    ) {
        wp_enqueue_style('sections-styles');
    } 

}.

Thanks in advance

3
  • The class is present in the production stylesheet file? Jan 23 at 9:21
  • instead of using a ?ver= in the URL, use the version parameter when registering the script. Also have you verified that it's not the if statement at the end causing the issues? Does removing that and always enqueing make the styles show? That would provide valuable information! Also are you trying to store CSS assets outside your theme folder? That's extreme bad practice and can cause other issues
    – Tom J Nowell
    Jan 24 at 19:02
  • Hi Tom. I have several different style files and different pages/templates requiring different styles. I've tried updating a style not inside an if statement and it did not work either, so it seems unlikely that the if statement is the problem. All of my css assets are outside my theme folder. I inherited this WP project and it was already set up that way. Everything has been working fine, until Monday, when suddenly my styles stopped updating. I am fairly new to WP and am learning on the fly. Can you explain how to use the version parameter when registering the script." TY Jan 24 at 20:22

1 Answer 1

0

I usually append a random number to the end of the stylesheet while in development mode, if I upload the file to the production server I manually change the version number like this:


// Version - to prevent caching
$version = mt_rand(1000, 100000);
// $version = 1.0.0.0;

// Enqueue CSS
function wpb_enqueue_styles() {
    global $version;
    $plugin_dir = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'wpb-stripe-style', $plugin_dir . 'includes/css/style.css', [], $version );
}
add_action( 'wp_enqueue_scripts', 'wpb_enqueue_styles' );

// Enqueue JS
function wpb_enqueue_scripts() {
    global $version;
    $plugin_dir = plugin_dir_url( __FILE__ );
    wp_enqueue_script( 'wpb-stripe-script', $plugin_dir . 'includes/js/script.js', ['jquery'], $version );
}
add_action( 'wp_enqueue_scripts', 'wpb_enqueue_scripts' );

Or, you can use this method that checkes the file timesamp Enqueue the Stylesheet with Versioning: In WordPress, you typically enqueue stylesheets in your theme's functions.php file. You can add a version parameter there. Here’s an example:

function wpb_enqueue_styles() {
    wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/includes/css/style.css', array(), filemtime(get_template_directory() . '/includes/css/style.css'));
}
add_action('wp_enqueue_scripts', 'wpb_enqueue_styles');

OR Manually Adding Versioning: If you're not enqueuing the stylesheet through WordPress functions but including it directly in the HTML (which is less common and not recommended in WordPress), you can manually add a version:

<link rel="stylesheet" href="/includes/css/style.css?v=1.0.0">

In the ladder I manually change the 1.0.0 to 1.0.1 when I push to the production server.

1
  • Hi. Thanks for the quick reply. I have tried adding in a manual version and a time-stamp version. Both times it worked once, and then not again. When I inspect the page in the Network tab, I see that the version is changed, but the styles are not being updated. I updated my question with what I currently have with the time-stamp as version. Jan 24 at 17:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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