Skip to content

Instantly share code, notes, and snippets.

@wpsmith

wpsmith/wordpress-javascript-functions.php

Last active June 21, 2021 03:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wpsmith/6e676ff6c5516427bb04aac361cacf00 to your computer and use it in GitHub Desktop.
Save wpsmith/6e676ff6c5516427bb04aac361cacf00 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wordpress-javascript-functions.php
<?php
/*
Using the native WordPress functions and Script Manager (`WP_Scripts`).
Functions include:
wp_register_script
wp_deregister_script
wp_enqueue_script
wp_dequeue_script
wp_add_inline_script
wp_script_add_data
wp_script_is
*/
Raw
wp-add-inline-script-plugin-before.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my frontend scripts.
*/
function register_scripts() {
if ( is_admin() ) {
return;
}
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'waypoints',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js" ), // version
true
);
wp_register_script(
'my-waypoints',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/my-waypoints{$suffix}.js", // file URL
array( 'waypoints' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/my-waypoints{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'my-waypoints' );
wp_add_inline_script( 'my-waypoints', 'console.log("before my-waypoints file")', 'before' );
}
// Result
//<script type="text/javascript">
// console.log("before my-waypoints file")
//</script>
//<script type="text/javascript" src="https://domain.com/wp-content/plugins/myplugin/js/my-waypoints.js"></script>
Raw
wp-add-inline-script-plugin.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my frontend scripts.
*/
function register_scripts() {
if ( is_admin() ) {
return;
}
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'waypoints',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js" ), // version
true
);
wp_register_script(
'my-waypoints',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/my-waypoints{$suffix}.js", // file URL
array( 'waypoints' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/my-waypoints{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'my-waypoints' );
wp_add_inline_script( 'my-waypoints', "var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
})" );
}
// Result
//<script type="text/javascript" src="https://domain.com/wp-content/plugins/myplugin/js/my-waypoints.js"></script>
//<script type="text/javascript">
// var waypoint = new Waypoint({element: document.getElementById('waypoint'),
// handler: function(direction) {
// console.log('Scrolled to waypoint!')
// }
// })
//</script>
Raw
wp-conditional-scripts.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my frontend scripts.
*/
function register_scripts() {
if ( is_admin() ) {
return;
}
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
// IE only Script
wp_register_script(
'plugin-script-ie',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ie{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ie{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script' );
wp_script_add_data( 'plugin-script', 'conditional', 'lt IE 9' );
}
Raw
wp-dequeue-script.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\remove_script' );
/**
* Register my scripts.
*/
function remove_script() {
// Always dequeue the script
wp_dequeue_script( 'plugin-script' );
// Conditionally dequeue the script on archive pages
if ( is_archive() ) {
wp_dequeue_script( 'plugin-script' );
}
}
Raw
wp-deregister-script-effects-not-using.php
<?php
namespace MyPrefix\MyPluginOrTheme;
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
function register_scripts() {
if ( is_admin() ) {
return;
}
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-ext-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js" ), // version
true
);
}
add_action( 'init', __NAMESPACE__ . '\deregister_scripts', 999 );
/**
* Deegisters `plugin-script`.
*/
function deregister_scripts() {
wp_enqueue_script( 'plugin-script' );
}
Raw
wp-deregister-script.php
<?php
namespace MyPrefix\MyPluginOrTheme;
// Deregister script by handle
wp_deregister_script( 'myscript' );
Raw
wp-functions-theme-remove-scripts.php
<?php
namespace MyPrefix\MyTheme;
define( 'MY_THEME_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\deregister_scripts', 999 );
/**
* Register my scripts.
*/
function deregister_scripts() {
// Assumes the JS file is located in the js folder within the plugin folder.
wp_deregister_script( 'plugin-script-base' );
}
Raw
wp-localize-plugin-script-2.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script-base',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js", // file URL
array( 'underscore' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array( 'plugin-script-base' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script-ext',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js" ), // version
true
);
// Create base object for pluginScriptExt object.
wp_localize_script( 'plugin-script-ext', 'pluginScriptExtStrings', array(
'firstLabel' => __( 'Some string to translate', 'textdomain' ),
'secondLabel' => __( 'Some string to translate', 'textdomain' ),
) );
// Create base object for pluginScriptExt object.
wp_localize_script( 'plugin-script-ext', 'pluginScriptExtConfig', array(
'something' => 'some-value',
'somethingElse' => 3,
) );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts', 999 );
/**
* Outputs our plugin scripts
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script-ext' );
}
Raw
wp-localize-plugin-script-bad.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script-base',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js", // file URL
array( 'underscore' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array( 'plugin-script-base' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script-ext',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js" ), // version
true
);
$plugin_script_base_l10n = array(
'strings' => array(
'firstLabel' => __( 'Some string to translate', 'textdomain' ),
'secondLabel' => __( 'Some string to translate', 'textdomain' ),
),
'config' => array(
'something' => 'some-value',
'somethingElse' => 3,
),
'debug' => ( ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) || ( ! defined( 'SCRIPT_DEBUG' ) && defined( 'WP_DEBUG' ) && WP_DEBUG ) ),
);
// Overwrites underscore
wp_localize_script( 'plugin-script-ext', '_', $plugin_script_base_l10n );
// Create empty pluginScriptExt object -- won't work
wp_localize_script( 'plugin-script-ext', 'pluginScriptExt', array() );
// Add .config to pluginScriptExt object -- won't work
wp_localize_script( 'plugin-script-ext', 'pluginScriptExt', array(
'strings' => array(
'firstLabel' => __( 'Some string to translate', 'textdomain' ),
'secondLabel' => __( 'Some string to translate', 'textdomain' ),
),
) );
// Add .strings to pluginScriptExt object -- won't work
wp_localize_script( 'plugin-script-ext', 'pluginScriptExt', array(
'config' => array(
'something' => 'some-value',
'somethingElse' => 3,
),
) );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts', 999 );
/**
* Outputs our plugin scripts
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script-ext' );
}
Raw
wp-localize-plugin-script.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script-base',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js", // file URL
array( 'underscore' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array( 'plugin-script-base' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script-ext',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js" ), // version
true
);
$plugin_l10n = array(
'strings' => array(
'firstLabel' => __( 'Some string to translate', 'textdomain' ),
'secondLabel' => __( 'Some string to translate', 'textdomain' ),
),
'config' => array(
'something' => 'some-value',
'somethingElse' => 3,
),
'debug' => ( ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) || ( ! defined( 'SCRIPT_DEBUG' ) && defined( 'WP_DEBUG' ) && WP_DEBUG ) ),
);
wp_localize_script( 'plugin-script-ext', 'pluginScriptExt', $plugin_l10n );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts', 999 );
/**
* Outputs our plugin scripts
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script-ext' );
}
Raw
wp-plugin-scripts.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script-base',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js", // file URL
array( 'underscore' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-base{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array( 'plugin-script-base' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
wp_register_script(
'plugin-script-ext',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js", // file URL
array( 'plugin-script' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script-ext{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts', 999 );
/**
* Outputs our plugin scripts
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script-ext' );
}
Raw
wp-register-genesis-theme-script.php
<?php
namespace MyPrefix\MyTheme;
define( 'MY_THEME_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the theme folder.
wp_register_script(
'myscript', // file slug
get_stylesheet_directory_uri() . "/js/myscript$suffix.js?defer=true", // file URL with ?async=true added
array(), // dependencies
MY_THEME_VERSION . '-' . filemtime( get_stylesheet_directory() . "/js/myscript$suffix.js" ), // version
true // in footer or not
);
wp_register_script(
'jquery-myscript', // file slug
get_stylesheet_directory_uri() . "/js/jquery.myscript$suffix.js?async=true", // file URL with ?defer=true added
array( 'jquery' ), // dependencies
MY_THEME_VERSION . '-' . filemtime( get_stylesheet_directory() . "/js/jquery.myscript$suffix.js" ), // version
true // in footer or not
);
}
Raw
wp-register-plugin-function.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
// Should be placed at the root of the plugin folder
define( 'MY_PLUGIN_FILE', __FILE__ );
/**
* Register my scripts.
*
* @param string $filename Filename.
* @param string $theme_relative_path Relative path to file within theme folder.
*/
function register_plugin_script( $filename, $theme_relative_path = '/', $dependencies = array(), $footer = true ) {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
wp_register_script(
str_replace( '.', '-', $filename ), // file slug without js extension
get_plugin_dir( MY_PLUGIN_FILE ) . "{$theme_relative_path}{$filename}{$suffix}.js", // file URL
$dependencies, // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "{$theme_relative_path}{$filename}{$suffix}.js" ), // version
$footer // in footer or not
);
}
Raw
wp-register-plugin-script.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'myscript',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/myscript{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/myscript{$suffix}.js" ), // version
true
);
wp_register_script(
'jquery-myscript',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/jquery.myscript{$suffix}.js", // file URL
array( 'jquery' ), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/jquery.myscript{$suffix}.js" ), // version
true
);
}
Raw
wp-register-script-bad-0.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_enqueue_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
}
Raw
wp-register-script-bad-1.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
wp_enqueue_script( 'plugin-script' );
}
Raw
wp-register-script-bad-2.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Enqueue my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script' );
}
Raw
wp-register-script-best.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts' );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script' );
}
Raw
wp-register-script-better.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'plugin-script',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/plugin-script{$suffix}.js" ), // version
true
);
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\wp_enqueue_scripts', 99 );
/**
* Register my scripts.
*/
function wp_enqueue_scripts() {
wp_enqueue_script( 'plugin-script' );
}
Raw
wp-register-theme-function.php
<?php
namespace MyPrefix\MyTheme;
define( 'MY_THEME_VERSION', '1.0.0' );
/**
* Register my scripts.
*
* @param string $filename Filename.
* @param string $theme_relative_path Relative path to file within theme folder.
*/
function register_theme_script( $filename, $theme_relative_path = '/', $dependencies = array(), $footer = true ) {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
wp_register_script(
str_replace( '.', '-', $filename ), // file slug without js extension
get_stylesheet_directory_uri() . "{$theme_relative_path}{$filename}{$suffix}.js", // file URL
$dependencies, // dependencies
MY_THEME_VERSION . '-' . filemtime( get_stylesheet_directory() . "{$theme_relative_path}{$filename}{$suffix}.js" ), // version
$footer // in footer or not
);
}
Raw
wp-register-theme-script.php
<?php
namespace MyPrefix\MyTheme;
define( 'MY_THEME_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the theme folder.
wp_register_script(
'myscript', // file slug
get_stylesheet_directory_uri() . "/js/myscript$suffix.js", // file URL
array(), // dependencies
MY_THEME_VERSION . '-' . filemtime( get_stylesheet_directory() . "/js/myscript$suffix.js" ), // version
true // in footer or not
);
wp_register_script(
'jquery-myscript', // file slug
get_stylesheet_directory_uri() . "/js/jquery.myscript$suffix.js", // file URL
array( 'jquery' ), // dependencies
MY_THEME_VERSION . '-' . filemtime( get_stylesheet_directory() . "/js/jquery.myscript$suffix.js" ), // version
true // in footer or not
);
}
Raw
wp-script-debug-constants.php
<?php
namespace MyPrefix\MyPluginOrTheme;
// Define MULTIPLE Suffixes
define( 'JS_SUFFIX', ( ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '.js' : '.min.js' ) );
define( 'CSS_SUFFIX', ( ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '.css' : '.min.css' ) );
// JavaScript file
$filename = 'myscript' . JS_SUFFIX;
// CSS file
$filename = 'mystyle' . CSS_SUFFIX;
// Define a SINGLE Suffix
define( 'SCRIPT_SUFFIX', ( ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min' ) );
// JavaScript file
$filename = 'myscript' . SCRIPT_SUFFIX . '.js';
// CSS file
$filename = 'mystyle' . SCRIPT_SUFFIX . '.css';
Raw
wp-script-debug-get_js_filename.php
<?php
namespace MyPrefix\MyPluginOrTheme;
/**
* Gets the proper JavaScript filename based on SCRIPT_DEBUG.
*
* @param string $filename Filename without the extension.
*
* @return string JavaScript filename.
*/
function get_js_filename( $filename ) {
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
return "{$filename}{$suffix}.js";
}
$filename = get_js_filename( 'myscript' );
Raw
wp-script-debug-get_suffix.php
<?php
namespace MyPrefix\MyPluginOrTheme;
/**
* Gets the proper JavaScript filename based on SCRIPT_DEBUG.
*
* @param string $filename Filename without the extension.
*
* @return string JavaScript filename.
*/
function get_suffix( $filename ) {
static $suffix;
if ( null !== $suffix ) {
return $suffix;
}
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
return $suffix;
}
$filename = 'myscript' . get_suffix() . 'js';
Raw
wp-script-debug-js-css.php
<?php
namespace MyPrefix\MyPluginOrTheme;
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// JavaScript File
$filename = "myscript{$suffix}.js";
// CSS File
$filename = "myscript{$suffix}.css";
Raw
wp-script-dependencies.php
<?php
namespace MyPrefix\MyPluginOrTheme;
define( 'PLUGIN_VERSION', '1.0.0' );
// Parent Theme Version
$ver = PLUGIN_VERSION . '-' . filemtime( get_template_directory() . "/myscript$suffix.js" );
// Child Theme Version
$ver = PLUGIN_VERSION . '-' . filemtime( get_stylesheet_directory() . "/myscript$suffix.js" );
// Plugin Version, assumes this PHP file is in the root of the plugin folder (e.g., ./wp-content/plugins/myplugin/script-dependencies.php)
$ver = PLUGIN_VERSION . '-' . filemtime( get_plugin_dir( __FILE__ ) . "/myscript$suffix.js" );
Raw
wp-scripts-cache-async-all.php
<?php
namespace MyPrefix\MyTheme;
add_filter( 'script_loader_tag', __NAMESPACE__ . '\script_loader_tag_add_async', 10 );
/**
* Filters the HTML script tag of an enqueued script.
*
* @param string $tag The `<script>` tag for the enqueued script.
* @param string $handle The script's registered handle.
* @param string $src The script's source URL.
*
* @return string Modified script tags including `async="async"`.
*/
function script_loader_tag_add_async( $tag ) {
if ( false === strpos( $tag, 'async' ) ) {
return str_replace( ' src', ' async="async" src', $tag );
}
}
add_filter( 'script_loader_tag', __NAMESPACE__ . '\script_loader_tag_add_defer', 10 );
/**
* Filters the HTML script tag of an enqueued script.
*
* @param string $tag The `<script>` tag for the enqueued script.
* @param string $handle The script's registered handle.
* @param string $src The script's source URL.
*
* @return string Modified script tags including `async="async"`.
*/
function script_loader_tag_add_defer( $tag ) {
if ( false === strpos( $tag, 'defer' ) ) {
return str_replace( ' src', ' defer="defer" src', $tag );
}
}
Raw
wp-scripts-cache-async-defer.php
<?php
namespace MyPrefix\MyTheme;
add_filter( 'script_loader_tag', __NAMESPACE__ . '\script_loader_tag', 10 );
/**
* Filters the HTML script tag of an enqueued script.
*
* @param string $tag The `<script>` tag for the enqueued script.
* @param string $handle The script's registered handle.
* @param string $src The script's source URL.
*
* @return string Modified script tags including `async="async"`.
*/
function script_loader_tag( $tag ) {
// Load AFTER a page has finished loading completely
$deferred = array( 'comment-reply', 'wp-emoji' );
foreach ( $deferred as $script ) {
if ( false !== strpos( $tag, $script ) && false === strpos( $tag, 'defer' ) ) {
return str_replace( ' src', ' defer="defer" src', $tag );
}
}
// Load asynchronously while page is loading
$async = array( 'wp-embed', 'myscript' );
foreach ( $async as $script ) {
if ( false !== strpos( $tag, $script ) && false === strpos( $tag, 'async' ) ) {
return str_replace( ' src', ' async="async" src', $tag );
}
}
return $tag;
}
Raw
wp-scripts-cache-bust-all.php
<?php
namespace MyPrefix\MyTheme;
add_filter( 'script_loader_src', __NAMESPACE__ . '\script_loader_src', 10, 2 );
/**
* Cache bust all the scripts.
*
* @param string $src Script loader source path.
* @param string $handle Script handle.
*
* @return string
*/
function script_loader_src( $src, $handle ) {
if ( 'plugin-script' !== $handle ) {
return $src;
}
return add_query_arg( 'wps', time(), $src );
}
Raw
wp-scripts-is.php
<?php
namespace MyPrefix\MyPlugin;
define( 'MY_PLUGIN_VERSION', '1.0.0' );
add_action( 'init', __NAMESPACE__ . '\register_scripts' );
/**
* Register my scripts.
*/
function register_scripts() {
// Do nothing if the script is registered
if ( wp_script_is( $handle, 'registered' ) ) {
return;
}
// Suffix
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
// Assumes the JS file is located in the js folder within the plugin folder.
wp_register_script(
'waypoints',
get_plugin_dir( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js", // file URL
array(), // dependencies
MY_PLUGIN_VERSION . '-' . filemtime( plugin_dir_url( MY_PLUGIN_FILE ) . "js/waypoints{$suffix}.js" ), // version
true
);
}
Raw
wp-waypoint-init.js
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
});
Raw
wpPluginScriptExt.js
// Correct
var pluginScriptExt = {
strings: {
firstLabel: 'Some string to translate', // localized
secondLabel: 'Some string to translate', // localized
},
config: {
something: 'some-value',
somethingElse: 3
},
debug: true
};
// Overwritten
var pluginScriptExt = {
config: {
something: 'some-value',
somethingElse: 3
}
};
// As 2 objects
var pluginScriptExtStrings = {
firstLabel: 'Some string to translate', // localized
secondLabel: 'Some string to translate', // localized
};
var pluginScriptExtConfig = {
something: 'some-value',
somethingElse: 3
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment