Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm making a child theme for TwentyTwelve, but my host is caching my files, so I'm not seeing the changes I do to my style.css file.

Is there a way to version the stylesheet for my child theme?

How is TwentyTwelve even adding the stylesheet? I don't see it in header.php.

Thanks

share|improve this question
    
This question is not WordPress-specific (not even really WordPress-related). Please have a look at stackoverflow.com. –  t f Mar 11 '13 at 18:35
2  
It is a WordPress question, since it's most likely something done in functions.php. –  coopersita Mar 11 '13 at 18:37

2 Answers 2

up vote 4 down vote accepted

How it's NOT done in WordPress

The following example is the opposite of how one should do it. Bad practice following:

<style type="text/css">
<!--
/* ... Definitions that are hard to override or get rid off are here ... */
-->
</style>

This is another example how you should not do it:

<link rel="stylesheet" type="text/css" href="style.css">

Do it right

WP uses a "dependencies" API for managing script and style files. This means that you

  1. Register
  2. Enqueue
  3. (optionally, and for scripts only) Localize

This means that you first go and register a script for further usage and then enqueue it. This way you can register a stylesheet or script in your parent theme or plugin and later on enqueue it and print it to your webpage on demand.

How to prevent caching

This API as well has one nice little argument for versions. This means, that you have a variety of options how to update your browser or server cache, as the version gets added to the query string when loading the file:

  • manually add a new version string every time you write an update
  • Using the date() or time() (or similar DateTime) functions to permanently update
  • Use filemtime( get_stylesheet_directory().'style.css' ) to **only change the version when you did an update.
  • And finally there's the technique of "filename based cache busting" that actually alters the filename if there were changes. It needs some .htaccess modifications as well.

Example

This one's taken from a plugin I'm currently developing:

$file   = 'js/chained_selection.js';

wp_register_script(
     $this->handle
    ,plugin_dir_url( __FILE__ ).$file
    ,array( 'jquery',  )
    ,filemtime( plugin_dir_path( __FILE__ ).$file )
    ,true
);
wp_enqueue_script( $this->handle );

wp_localize_script(
     $this->handle
    ,"{$this->handle}_obj"
    ,array(
         'ajaxurl' => admin_url( 'admin-ajax.php' )
        ,'nonce'   => wp_create_nonce( $this->ajax_nonce_val )
        ,'action'  => $this->action
    )
);

When to load the stylesheet/script

Normally one simply wraps the register/enqueue/localize statements into a function or class method. To allow others jump in at the right point, the hooks used for styles and scripts are the following:

  • admin_enqueue_script // Admin UI
  • wp_enqueue_script // Themes
  • login_enqueue_script // Login pages
share|improve this answer

Ok, so what I did to fix it, is add a functions.php to my child-theme, and added the following:

<?php
function my_theme_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_directory_uri(). '/style.css', false, date('h:i:s'));
}
add_action('wp_print_styles', 'my_theme_styles');

So it loads the stylesheet twice, which is not ideal, but while the site is being developed, it helps keep the stylesheet fresh.

share|improve this answer
    
You need to edit header.php and remove the <link> to style.css to stop styles from being loaded twice –  bungeshea Mar 13 '13 at 6:26
    
@bungeshea The styles aren't being loaded in header.php (like I said in my questions). They are being loaded in functions.php –  coopersita Mar 16 '13 at 20:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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