1

I use the following code to add version ?ver=xxx based on file last modified date to css and js. It works fine, but when I use external assets, it runs into errors, as get_theme_file_uri(), and get_theme_file_path() won't work anymore.

//fonts.googleapis.com/...
//cdnjs.cloudflare.com/...

Is it possible to fix that? Perhaps not to have the ?ver or use the WP default versioning system ver=4.8 ... for remote assets instead.

Other than that, can the code below be simplified slightly if possible?

function _enqueue_scripts() {

    function style($handle, $file, $deps=array(), $media='all') {
        $src = get_theme_file_uri($file);
        $ver = md5(filemtime(get_theme_file_path($file)));
        wp_enqueue_style($handle, $src, $deps, $ver, $media);
    }

    function script($handle, $file, $deps=array(), $in_footer='true') {
        $src = get_theme_file_uri($file);
        $ver = md5(filemtime(get_theme_file_path($file)));
        wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);
    }

    style('_normalize', '/assets/css/normalize.css');
    style('_base', '/assets/css/base.css');
    style('_fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,600');

    script('_lightbox2', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js', array('jquery'));
    script('_base', '/assets/js/base.js', array('jquery'));

    if (is_singular() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', '_enqueue_scripts');
6
  • you could use an additional parameter to indicate it is remote, and not use get_theme_file_path in that case. You also don't need to declare the functions inside _enqueue_scripts. Commented Jun 11, 2017 at 19:27
  • other options are just directly using wp_enqueue_script/style when using remote files with standard version numbers or saving local copies of the script Commented Jun 11, 2017 at 19:30
  • @inarilo Would you like to post it to an answer and why moving the functions out is better please? Commented Jun 11, 2017 at 19:38
  • Why not just directly use wp_enqueue_script for external URLs? Commented Jun 14, 2017 at 9:45
  • @JackJohansson You're right, but just to see if there are better options. Commented Jun 14, 2017 at 14:31

1 Answer 1

1

Declaring functions inside functions can lead to problems as explained here: https://stackoverflow.com/a/1631579/1228379

To solve the issue of remote files, you can use an additional parameter to indicate it is remote (or local) and call get_theme_file_uri/path accordingly. Alternatively, you can just call wp_enqueue_script/style directly and use standard version numbers, or simply save the files locally.

In addition, if you find it simpler, you can also combine the two functions as one and pass some of the parameters as an associative array ($args need only contain the values you want to change):

function myenqueuer($handle, $src, $args) {
    $defaults = array('type'      => 'script',
                      'local'     => true,
                      'deps'      => array(),
                      'media'     => 'all',
                      'in_footer' => true,
                      'ver'       => false);
    $args = wp_parse_args($args, $defaults);
    if($args['local']) {
        $args['ver'] = md5(filemtime(get_theme_file_path($src)));
        $src = get_theme_file_uri($src);
    }
    if($args['type'] == 'style') {
        wp_enqueue_style($handle, $src, $args['deps'], $args['ver'], $args['media']);
    } else if($args['type'] == 'script') {
        wp_enqueue_script($handle, $src, $args['deps'], $args['ver'], $args['in_footer']);
    }
}

You would call it like this:

myenqueuer('_normalize', '/assets/css/normalize.css', array('type'=>'style'));
myenqueuer('_base', '/assets/css/base.css', array('type'=>'style'));
myenqueuer('_fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,600', array('type'=>'style', 'local'=>false));

myenqueuer('_lightbox2', '//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js', array('deps'=>array('jquery'), 'local'=>false));
myenqueuer('_base', '/assets/js/base.js', array('deps'=>array('jquery')));
6
  • It gets errors with myenqueuer('_normalize', '/assets/css/normalize.css', array('type=style'));, what's the correct way to call it? Commented Jun 11, 2017 at 20:40
  • type and style will be separate strings, array('type'=>'style'), the first is the array key and the second is the value. and you have to use =>, not =. Commented Jun 12, 2017 at 2:37
  • That is not the only issue, if you test the code you'll see a few errors, also type script wont' run at all. Commented Jun 12, 2017 at 13:19
  • what errors? i'm getting Warning: filemtime(): stat failed for {my system filepath} but i think that is not related to the code, or are you getting the same? Commented Jun 13, 2017 at 18:36
  • 1. the var src shouldn't be used 3 times I think. 2. media value should be all by default. 3. if else style and script option isn't working here, always style no matter what type to set. 4. would be useful if you can post how you call the functionmyenqueuer() for both types. Commented Jun 13, 2017 at 21:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.