0

I've created a child theme of TwentyTwelve.

On the front end, the <head> section contains the line:

http://example.com/wp-content/themes/childtheme/style.css?ver=3.8.1

Any changes I make to childtheme/style.css are not reflected in http://example.com/wp-content/themes/childtheme/style.css?ver=3.8.1

I've performed a search in TwentyTwelve and childtheme, and can't find any instance of enqueue_style which contains a version of 3.8.1, or any hard coding of style.css?ver=3.8.1

How do I either:

Thanks

Update:

I added the following to .../childtheme/functions.php

function add_require_scripts_files() {
 wp_enqueue_style('layout', get_stylesheet_directory_uri().'/style.css', array(), '1.0.0', "all");        
}

add_action( 'wp_enqueue_scripts', 'add_require_scripts_files' );

But the front end contains code:

<link rel='stylesheet' id='layout-css'  href='http://example.com/wp-content/themes/childtheme/style.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='twentytwelve-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css?ver=3.8.1' type='text/css' media='all' />

style.css?ver=3.8.1 is overriding style.css?ver=1.0.0

Update 2:

In /childtheme/functions.php, I replaced 

function add_require_scripts_files() {
 wp_enqueue_style('layout', get_stylesheet_directory_uri().'/style.css', array(), '1.0.0', "all");        
}

with 

function add_require_scripts_files() {
 wp_enqueue_style('twentytwelve-style', get_stylesheet_directory_uri().'/style.css', array(), '1.0.0', "all");        
}

which meant the style.css?ver=3.8.1 was not loaded.

Improve this question
5
  • 3
    3.8.1. is the current version of your WordPress install, which is used if you don't specify a version yourself. See this.
    – tfrommen
    Commented Feb 13, 2014 at 11:47
  • See @Jycr753's answer and note that your filetime is where the dependencies should be. Also, your stylesheet is simply being cached by the browser, so you need to do a hard refresh. However, your filetime trick is good for developmental work, but I wouldn't leave it live.
    – helgatheviking
    Commented Feb 14, 2014 at 7:43
  • Why not leave it live @helgatheviking ?
    – Steve
    Commented Feb 15, 2014 at 10:56
  • Because if the stylesheet isn't changing you are forcing the users to redownload it on every page and every visit which just slows your site down.
    – helgatheviking
    Commented Feb 16, 2014 at 11:50
  • @helgatheviking: please see my comment on jycr753's answer.
    – Steve
    Commented Feb 18, 2014 at 3:32

3 Answers 3

Reset to default
1

well that depends on what you want to do, but if it is easier for you to edit that template it will be better that you can control all the output of it.. fx like this

function add_require_scripts_files() {
 wp_enqueue_style('layout', get_template_directory_uri().'/style.css', array(), '1.0.0', "all");        
}


add_action( 'wp_enqueue_scripts', 'add_require_scripts_files' );

and this what the function expects as paramenters:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

and remember to remove the function that adds the css file in the init function.

Improve this answer
7
  • Do I add this to functions.php of the child theme or twentytwelve? I added it to both, and the front end still loads /childtheme/style.css?ver=3.8.1
    – Steve
    Commented Feb 15, 2014 at 11:26
  • 2
    @Steve when working on a child theme all your code goes in your child theme. Editing twentytwelve directly defeats the purpose of child theming. Do note that there is a difference between get_template_directory_uri() and get_stylesheet_directory_uri() when you are calling that from a child theme. The template directory will be the parent theme.
    – helgatheviking
    Commented Feb 18, 2014 at 14:20
  • 1
    Excellent. This fixed it for me @helgatheviking. :-)
    – Steve
    Commented Feb 22, 2014 at 12:30
  • @helgatheviking: This fixed it for me on a different website, but not on the problem website. See my update in the question please.
    – Steve
    Commented Feb 22, 2014 at 13:12
  • look for this function in the functions.php in your father theme get_stylesheet_uri normally it looks like this // Load our main stylesheet. wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );
    – Jorge Y. C. Rodriguez
    Commented Feb 22, 2014 at 13:18
1

Let's look at where Twenty Twelve is enqueueing the stylesheet:

function twentytwelve_scripts_styles() {
    global $wp_styles;

    /*
     * Adds JavaScript to pages with the comment form to support
     * sites with threaded comments (when in use).
     */
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    // Adds JavaScript for handling the navigation menu hide-and-show behavior.
    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

    $font_url = twentytwelve_get_font_url();
    if ( ! empty( $font_url ) )
        wp_enqueue_style( 'twentytwelve-fonts', esc_url_raw( $font_url ), array(), null );

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
    $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

The hook is wp_enqueue_scripts, which is fired at priority 0 of wp_head. The important enqueue is here:

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

Note that get_stylesheet_uri() is Child Theme-friendly, as at will automatically enqueue the Child Theme's style.css file, instead of the Parent (Template) Theme's style.css.

If Twenty Twelve is the active Theme, you get something like this output:

<link rel='stylesheet' id='twentytwelve-style-css'  href='http://example.com/wp-content/themes/twentytwelve/style.css?ver=3.8.1' type='text/css' media='all' />

But if a Twenty Twelve Child Theme is active, you get your output:

<link rel='stylesheet' id='twentytwelve-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css?ver=3.8.1' type='text/css' media='all' />

That means that you don't have to do anything special in your Child Theme to enqueue your Child Theme's stylesheet. If you enqueue your Child Theme's style.css separately, with a different slug (such as layout), you're going to get the same stylesheet link output twice - which is exactly what you've observed.

The ?ver=3.8.1 is the current WordPress version, and is appended because no version number is passed to the wp_enqueue_style() call. It shouldn't cause any problems, aside from potential browser caching. So, if you make changes to your Child Theme's style.css and those changes aren't reflected on the front end, be sure to reload the page with the cache dumped.

Improve this answer
0

De-registering the default style and then re-registering with a version number in the child-theme's functions.php is what worked for me.

In the child theme: functions.php:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );`

function my_scripts_method() {
    $VERSION_NUMBER = '1.0.1';

     // First de-register the main stylesheet
    wp_deregister_style( 'twentytwelve-style' );

    // Then add it again, using your custom version number
    wp_register_style( 'twentytwelve-style', get_stylesheet_uri(), array(), $VERSION_NUMBER );

    //finally enqueue it again
    wp_enqueue_style( 'twentytwelve-style');
}

I knew that 'twentytwelve-style' is the one I needed to replace, because previously, the link to my style.css was showing up as:

<link rel='stylesheet' id='twentytwelve-style-css'  href='https://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

Now: 

<link rel='stylesheet' id='twentytwelve-style-css'  href='https://site-url/wp-content/themes/child-theme/style.css?ver=1.0.1' type='text/css' media='all' />
Improve this answer

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.