hametuha/wp-enqueue-manager

A WordPress library to bulk register assets.

wp-enqueue-manager

Bulk register WordPress assets with specified folder structure. Good shortcut for your theme development., _(*1)

, _(*2)

Installation

Use composer., _(*3)

composer require hametuha/wp-enqueue-manager

Usage

Write dependnecies in your assets(js and css) header as comment. format is like wpdeps=dependencies. CSV ready., _(*4)

This notation will be used for the deps argument of wp_register_script(doc) and wp_register_style(doc)., _(*5)

Operations should be done in init hook or before. Write codes in your functions.php., _(*6)

Javascript

Header file should be like below:, _(*7)

/*!
 * wpdeps=jquery,thicbox
 */
jQuery(document).ready(function($){
  // Do something.
});

NOTICE: If you use autoprefixer or minify tools, be careful about cleaning up comments., _(*8)

Then, register them all from your theme or plugin., _(*9)

// Register all js in folder.
// e.g. /assets/js/sample.js will be regsitered as 'my-sample'.
Hametuha\WpEnqueueManager::register_js( __DIR__ . '/assets/, 'my-', '1.0.0' );

Stylesheet

Same as javascript, regsier, _(*10)

/*!
 * wpdeps=bootstrap
 */
body{
   background-color: red;
}

And, run register_styles., _(*11)

// Register all css in folder.
// e.g. /assets/css/sample.css will be regsitered as 'my-sample'.
Hametuha\WpEnqueueManager::register_styles( __DIR__ . '/assets/, 'my-', '1.0.0' );

Versionning

If you are a theme or plugin author, it's proper to pass the version of your theme/plugin. Lazy authors may just pass null or skip the argument. Then the file modified time will be used as version string., _(*12)

Localization

For Javascript localization, you can bulk register localization vars., _(*13)

Hametuha\WpEnqueueManager::register_js_var_files( __DIR__ . '/l10n );

File name equals js handle name. Camelized handle name should be var name. PHP files should return var array., _(*14)

For example, if you put my-sample.php below in l10n directory., _(*15)

<?php
// Avoide direct load.
defined( 'ABSPATH' ) || die();
// Return JS vars.
return [
    'label' => 'This is my var!',
];

Registered infromation are below:, _(*16)

• Handle: my-sample
• Var name: MySample
• Var: returned array of file.

So, you can refer PHP variables from JS like this:, _(*17)

$('.button').on('click', function(){
    alert(MySample.label);
    // => This is my var!
};

License

MIT., _(*18)