Wordpress wont display up to date css

Question

I do not have any cache plugins, css is

    #featured { border-bottom: 1px solid #ffffff; background: #000000; height: 300px; overflow: hidden; }
div.slide { height: 300px; position: relative; }
    div.overlay, div.top-overlay { background:url("images/dropshadow.png") repeat-x bottom left; bottom:0; height:22px; left:0; position:absolute; width:100%; }
    div.top-overlay { background:url("images/top-overlay.png") repeat-x bottom left; top: 0px; height: 43px; }
    .slide .description { background:url("images/overlay.png") no-repeat scroll 0 0 transparent; float:right; height:276px; margin-top:6px; padding:18px 68px 0 50px; width:342px; }
        .description h2.title { font-weight: bold; font-size: 36px; padding-top:3px; }
            .description h2.title a { color: #ffffff; text-shadow: 2px 2px 2px #000000; }
                .description h2.title a:hover { color: #eeeeee; text-decoration: none; }
        .description p.tagline { font-size: 14px; font-family: Georgia, serif; font-style: italic; color: #4f4f4f; padding: 7px 0px 4px; }
            .description p.tagline a { color: #4f4f4f; }
                .description p.tagline a:hover { color: #7c7c7c; text-decoration: none; }
        .description p { line-height: 19px; }

        .slide a.readmore { background:url(images/featured-readmore-right.png) no-repeat scroll right bottom; display:block; float:left; height:31px; line-height:32px; padding-right:11px; color: #ffffff; text-shadow: 1px 1px 1px #0080bd; margin-top:8px; }
            .slide a.readmore span { background:url(images/featured-readmore-left.png) no-repeat; display:block; padding: 0px 4px 0px 15px; }

  a#prevlink, a#nextlink { position:absolute; bottom:-2px; right:0; height: 40px; text-         indent: -9999px; display: block; z-index: 1000; }
  a#prevlink { right: 80px; background: url(images/arrow-left.png) no-repeat; width: 81px; }
  a#nextlink { width: 80px; background: url(images/arrow-right.png) no-repeat; }

Ofcourse nothing is wrong with the code. It just seems to be im missing a function which updates the web cache. The code is how its supposed to be but when my browser reads it off my webpage I get this link wp-content/themes/TheSource/style.css:284 rather than wp-content/themes/TheSource/style.css which is my main problem as I can't edit simple images off my slider to do what I want. I know that this happened to me with a widget i looked on google and found a function to add becuase I was getting something like wp-content/themes/TheSource/style.css?ver:248 before and now it took off the ?ver but I need something that will allow me to update my theme so that I can customize it.

Answer 1

During development process you can append the following code to your CSS:

/wp-content/themes/TheSource/style.css?ver:248&t=<?php echo time(); ?>

It generates different timestamp on every page reload and this way it avoids browser caching.

I highly recommend that you remove this part once you put the website live! Then if the site is live and you need to adjust the CSS, you can manually change the version (+1) to force all new page reloads use the new styles:

/wp-content/themes/TheSource/style.css?ver=249

...And same applies when you want to change images in the CSS, i.e:

.class123 {
    background-image: url(images/slider1.jpg?v=2);
}

Alternatively, if it's confirmed I understood you correctly and it's a browser caching issue, you can use a plugin for your browser, which prevents the caching (for Firefox - web developer toolbar).

EDIT 1: Avoid browser caching of CSS (and JS) files in Wordpress (usually used during theme development or after changes in the css/js files)

Goals: 1. Remove the CSS (and JS) 'ver' parameter from the query string. (you already have this functionality in your theme) 2. Add custom 'ver' (v) parameter to the CSS and JS files. 3. Add custom 'timestamp' (t) parameter during the development process to avoid browser caching on each page reload. (DEV mode only)

Here is a modified code from your theme, which removes the version from the CSS (and JS if needed), and adds specific parameters!

/* Removes the 'ver' parameter from the query string of the CSS (and JS) */
function remove_cssjs_ver( $src ) {
    // Goal 1 - Remove the CSS (and JS) 'ver' parameter from the query string. (you already have this functionality in your theme)
    if( strpos( $src, '?ver=' ) ) {
        $src = remove_query_arg( 'ver', $src );
    }
    // Goal 2 - Add custom 'ver' (v) parameter to the CSS and JS files. (useful for Live sites, when you change the styles or functionalities)
    $src = add_query_arg( 'v', '25', $src ); // you can use increment by 1 after every change
    // Goal 3 - Add custom 'timestamp' (t) parameter during the development process to avoid browser caching on each page reload. (DEV mode only)
    $src = add_query_arg( 't', time(), $src ); // recommended to be used only during the development process as it avoids browser caching on every page reload

    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 999, 1 );
// add_filter( 'script_loader_src', 'remove_cssjs_ver', 999, 1); // optional - apply the same to JS files

Please note that the above code is untested, but should work. You can remove (or comment) the goals you dont need.

Some links for reference: add_query_arg, remove_query_arg, add_filter

I also modified your functions.php file to a new version: http://pastebin.com/SLA7JkEZ

The change are: fixed incorrectly nested if: if ( ! function_exists( 'et_list_pings' ) ){... You was placed the "function remove_cssjs_ver()" declaration inside this IF, which may work in your case, but it's not correct! I also fixed the last argument (from 2 to 1) of the add_filter function as you have only 1 argument in the remove_cssjs_ver() function.

And a personal note to you - I think you should change the question title to something like: Disable browser cache for CSS during Wordpress theme development and clear the cache after every change to theme styles.

Let me know if the above works for you or not!