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've been playing with Modernizr in WordPress lately and here's something that i'm trying to achive.

I'm adding an HTML5 input field in a custom options page, specifically:

<input type="number" />

Now with Modernizr i can test if the browser supports it like this:

Modernizr.load([
{
test: Modernizr.inputtypes.number, // this is the test
nope: [ load js,css etc ] // if it's not supported load your custom lib
complete: function() {
  // do something 
}]);

Would it be possible instead of manually loading my custom libraries in the "nope" method, to invoke the wp_register_script()/wp_enqueue_script functions?

I mean i could just register/en-queue my custom libraries but i'd like to do that only if it's necessary (if the browser doesn't have native support for this kind of input type.

Any ideas?

share|improve this question

2 Answers 2

Please check the example of Alex Hempton-Smith, maybe its help you.

<?php

function urls_of_enqueued_scrips( $handles = array() ) {
    global $wp_scripts, $wp_styles;

    foreach ( $wp_scripts->registered as $registered )
        $script_urls[ $registered->handle ] = $registered->src;

    foreach ( $wp_styles->registered as $registered )
        $style_urls[ $registered->handle ] = $registered->src;

    if ( empty( $handles ) ) {

        $handles = array_merge( $wp_scripts->queue, $wp_styles->queue );
        array_values( $handles );

    }

    $output = '';

    foreach ( $handles as $handle ) {

        if ( !empty( $script_urls[ $handle ] ) )
            $output .= $script_urls[ $handle ] . ',';

        if ( !empty( $style_urls[ $handle ] ) )
            $output .= $style_urls[ $handle ] . ',';

    }

    $output = substr( $output, 0, -1 );

    echo $output;

}

?>

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : [<?php urls_of_enqueued_scrips( array('spinbox') ); ?>],
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  }
]);
</script>
share|improve this answer

I would do it in this way (admittedly, it's not ideal, but I think its probably the easiest to read).

Create an array of all the conditional scripts you may need, and pass them to javascript using wp_localize_script (in 3.3 on, you will be able to use the much more logical alias wp_add_script_data as discussed here).

$conditional_scripts = array(
    'spinner' => get_stylesheet_directory_uri().'/js/spinbox.js',
    'datepicker' => get_stylesheet_directory_uri().'/js/datepicker.js'
    // etc, etc, etc.
);

/* You could tie the variables to anything, since I assume you're just using
   an inline script. But including it as a "localization" of modernizr makes
   as much sense as anything. */
wp_localize_script( 'modernizr', 'modernizrScripts', $conditional_scripts );

Then just access those variables in your Modernizr tests:

<script>
Modernizr.load([
  {
    test : Modernizr.inputtypes.number,
    nope : modernizrScripts.spinner,
    complete: function() {
      jQuery('.html5-number').spinbox();
    }
  },
  {
    test : Modernizr.inputtypes.date,
    nope : modernizrScripts.datepicker,
    complete: function() {
      jQuery('.html5-date').datepicker();
    }
  }
]);
</script>
share|improve this answer

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.