How do you avoid caching during development in WordPress?
1. How do you avoid caching during development in WordPress?
OR
2. 3 Ways to easily stop WordPress caching your stylesheetsOR
3. Stop WordPress caching styles (the quick and easy and dirty way)
ANSWER
1. The first way and the quickest is to just pop them into header.php after wp_head() has run, so you know your styles are definitely the last css loaded (unless of course there are inline styles in the page). You do this like so:
<head>
...
<?php wp_head(); ?>
<style type="text/css">
#bottom_logo{
position: relative; left: -20px;
}
@media screen and (max-width: 768px) {
#bottom_logo{
padding-bottom: 20px;
}
}
</style>
</head>
2. The next way is to keep your css styles in a stylesheet (which is abit nicer). You do this by making a separate stylesheet including your stylesheet last ( and trick the browser to reload it everytime the page is loaded ).
3
4
5
6
7
8
|
<head>
...
<?php wp_head(); ?>
<link rel='stylesheet' href='<?php echo get_stylesheet_directory_uri();?>/mystyles.css?counter=<?php echo time(); ?>' type='text/css' media='all' />
</head>
|
This adds a unique number to the href everytime, this tricks the browser into thinking we’re loading a new file each time ( so we get fresh css everytime , no caching ever !). Basically the url for the stylesheet looks something like this: http://somedomain.com/wp-content/themes/mytheme/mystyles.css?counter= 1403257044
3. The third and final way is to edit / add a style where WordPress loads it (if its loaded this way and not in header.php ) , you do this like so (usually in functions.php ). You will see we are passing time() to the function wp_enqueue_style, this appends it to the url to force wordpress to reload the file:
wp_enqueue_style( 'louiscss', get_template_directory_uri() . '/mystyles.css', array(), time() );
|