ScriptObject

ScriptObject can be used to inject JavaScript variables or CSS into the page head or write/enqueue external files.

Methods

• injectCSS - Injects CSS into the page head.
• injectJS - Injects JS into the page head.
• enqueueCSS - Enqueue (and optionally update) CSS to an external file.
• enqueueJS - Enqueue (and optionally update) JS to an external file.
• writeCSS - Write CSS to an external file for later enqueueing.
• writeJS - write JS to an external file for later enqueueing.

Arguments

• script_dir (string) - The name of the directory to write external CSS/JS files to, located in uploads.
• filename (string) - The name of the external CSS/JS file to write.
• handle - (string) The CSS/JS handle to enqueue a script under.
• variable_name (string) - A unique array variable name in which to store JavaScript values.
• target (string|array) - Valid values: wp for the frontend, admin for WP Admin, or an array of both.
• version (string|bool|null) -
  • A string version to enqueue the script as. Example: "1.1.0"
  • A boolean value - If true, the string representation of the file modified date/time will be passed (useful for discouraging caching in development/staging environments). If false or null, the WordPress version is passed.

Instantiation

$so = new \WordPress_ToolKit\ScriptObject( $args );

Usage Examples

Inject CSS into the site's head (frontend):

$args = array( 'target' => 'wp' );

$values = array(
  '#content h1' => 'font-size: 1em; color: #999;',
  'header a' => 'text-decoration: underline; color: #3366CC;'
);

$css = new \WordPress_ToolKit\ScriptObject( $values );
$css->injectCSS( $args );

Inject JavaScript variables into the frontend site and WP Admin head:

$args = array(
  'variable_name' => 'my_plugin_settings',
  'target' => ['wp', 'admin']
);

$values = array(
  'my_site_name' => 'Another WordPress Site',
  'some_var' => true,
  'my_columns' => 4
);

$js = new \WordPress_ToolKit\ScriptObject( $values );
$js->injectJS( $args );

Write CSS to external file uploads/my_plugin/dynamic.css:

$args = array(
  'script_dir' => 'my_plugin',
  'filename' => 'dynamic.css'
);

$values = array(
  '#content h1' => 'font-size: 1em; color: #999;',
  'header a' => 'text-decoration: underline; color: #3366CC;'
);

$css = new \WordPress_ToolKit\ScriptObject( $values );
$css->injectCSS( $args );

Enqueue and write (update) JavaScript to file uploads/my_plugin/dynamic.js:

$args = array(
  'script_dir' => 'my_plugin',
  'filename' => 'dynamic.js',
  'handle' => 'my-plugin-js',
  'variable_name' => 'my_plugin_settings',
  'target' => ['wp', 'admin'], // Enqueue on frontend and WP Admin
  'version' => true // Set version to file modified date
);

$values = array(
  'my_site_name' => 'Another WordPress Site',
  'some_var' => true,
  'my_columns' => 4
);

$js = new \WordPress_ToolKit\ScriptObject( $values, true ); // Omit "true" to enqueue only
$js->injectJS( $args );

Using JavaScript Values

When you inject/enqueue JavaScript values, they are stored as an array named variable_name. You may reference them in your JavaScripts like this (using the example above):

$( '#selector' ).html( my_plugin_settings['my_site_name'] );

if( my_plugin_settings['my_columns'] > 2 ) {
  // Do some magic
}