I just wrote two methods for my plugin class, that makes it super easy to register/enqueue scripts and styles. And of course, as desired, the last modification time is always added as version parameter. Maybe this will help someone 😏
How to use them:
/**
* For these examples we assume that your plugin assets are located in
* wp-content/plugins/my-plugin/path/to/assets/
*/
// add your style
$this->registerAsset('path/to/assets/your-style.css');
// add your script works exactly the same
$this->registerAsset('path/to/assets/your-script.js');
// add script with dependency
$this->registerAsset('path/to/assets/script-with-dependencies.js', [
'jquery'
]);
// add script with internal dependency
$this->registerAsset('path/to/assets/script-with-dependencies.js', [
'jquery',
$this->getAssetHandle('path/to/assets/your-script.js')
]);
// for internal dependencies you can also pass the path of the dependency directly
$this->registerAsset('path/to/assets/script-with-dependencies.js', [
'jquery',
'path/to/assets/your-script.js'
]);
There are a few more options, but just check out the documentation about the methods in the source code you need:
class myPlugin
{
public function __construct()
{
}
/**
* Registers and enqueues a script or style
*
* @param STRING $path The path of the file you want to register or enqueue (relative to your plugin folder).
* @param ARRAY $dependencies The dependencies as you know from wp_enqueue_script, but allows also paths of other assets that were registered with this method.
* @param BOOLEAN $enqueue If FALSE it will only be registered, otherwise it will also be enqueued.
* @param STRING|NULL $type Type of the asset. Allowed types are 'script' and 'style'. If it is NULL, the type is automatically detected from the file extension.
* @param STRING $media To define 'media' when adding CSS (Ignored for JS assets - JS assets always get TRUE for the in_footer parameter as this is usually the recommended way)
*
* @return BOOLEAN|NULL When $enqueue is TRUE, the return value is always NULL. Otherwise TRUE on success, FALSE on failure.
*/
public function registerAsset($path, $dependencies = [], $enqueue = true, $type = null, $media = 'all')
{
$path = '/' . ltrim($path, '/');
$pluginDirName = explode(DIRECTORY_SEPARATOR, ltrim(str_replace(realpath(WP_PLUGIN_DIR), '', realpath(__FILE__)), DIRECTORY_SEPARATOR), 2)[0];
$pluginDir = realpath(WP_PLUGIN_DIR . DIRECTORY_SEPARATOR . $pluginDirName);
if ($type === null) {
$extensions = ['js' => 'script', 'css' => 'style'];
$extension = pathinfo($path, PATHINFO_EXTENSION);
$type = isset($extensions[$extension]) ? $extensions[$extension] : null;
}
if (!in_array($type, ['script', 'style']) || !file_exists($pluginDir . $path)) {
return;
}
foreach ($dependencies as $index => $dependency) {
if (preg_match('/\.(js|css)$/', $dependency) && file_exists($pluginDir . DIRECTORY_SEPARATOR . ltrim($dependency, '\\/'))) {
$dependencies[$index] = $this->getAssetHandle($dependency);
}
}
$func = 'wp_' . ($enqueue ? 'enqueue' : 'register') . '_' . $type;
return $func($this->getAssetHandle($path), plugins_url($pluginDirName . $path), $dependencies, filemtime($pluginDir . $path), $type === 'script' ? true : $media);
}
/**
* Gets the handle of an asset that registerAsset() uses automatically
*
* @param STRING $path The path that you used with registerAsset()
*
* @return STRING The handle name of the asset
*/
public function getAssetHandle($path)
{
$pluginDirName = explode(DIRECTORY_SEPARATOR, ltrim(str_replace(realpath(WP_PLUGIN_DIR), '', realpath(__FILE__)), DIRECTORY_SEPARATOR), 2)[0];
return preg_replace('/[^a-zA-Z0-9]+/', '-', $pluginDirName . '-' . $path);
}
}
