css - Styles not showing up in WordPress site

admin管理员组

文章数量:1125909

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

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

• css
• staging

Share Improve this question edited Jan 24, 2024 at 17:47 jessturner711 asked Jan 22, 2024 at 20:29 jessturner711jessturner711 111 bronze badge 3

• The class is present in the production stylesheet file? – Suraj Khanal Commented Jan 23, 2024 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 ♦ Commented Jan 24, 2024 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 – jessturner711 Commented Jan 24, 2024 at 20:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： cssStyles not showing up in WordPress site