README

Simple WordPress class for including scripts and styles which is modifed from WP_Register

Requirements

PHP >=7.2
Composer
WordPress >=5.4

Installation

Install with composer

Run the following in your terminal to install with Composer.

$ composer require oberonlai/wp-asset

WP Option PSR-4 autoloading and can be used with the Composer's autoloader. Below is a basic example of getting started, though your setup may be different depending on how you are using Composer.

require __DIR__ . '/vendor/autoload.php';

use ODS\Asset;

Asset::addScript();

See Composer's basic usage guide for details on working with Composer and autoloading.

Basic Usage

Below is a basic example of enqueue JavaScript and CSS.

require __DIR__ . '/vendor/autoload.php';

use ODS\Asset;

add_action(
	'init',
	function() {
		Asset::addScript(
			array(
				'name'    => 'my_script',
				'url'     => YOUR_PLUGIN_URL . 'assets/js/script.js',
				'deps'    => array( 'jquery' ),
				'version' => YOUR_PLUGIN_VERSION,
				'footer'  => true,
				'ajax'    => false,
				'admin'   => false,
				'params'  => array()
			)
		)

		Asset::addStyle(
			array(
				'name'    => 'my_style',
				'url'     => YOUR_PLUGIN_URL . 'assets/css/style.css',
				'version' => YOUR_PLUGIN_VERSION,
				'deps'    => array(),
			)
		)
	}
);

It is important that call object in the hook of init or WordPress API dosen't work.

Avaiable Attributes

key	Description	Type	Required	Default
name	Unique ID	string	Yes
url	Url to file	string	Yes
admin	Attach in admin	boolean	No	false
deps	Dependences	array	No
version	Version	string	No	false
footer	Attach in footer ( scripts only )	boolean	No	true
ajax	JS for Ajax ( scripts only )	boolean	No	false
params	Params available in JS array ( scripts only )	array	No
media	Media ( styles only )	string	No

Register JavaScript for Ajax

WP-Asset will help you generate variables ajax_url and ajax_nonce automatically when setting the ajax to true.

Asset::addScript(
	array(
		'name'    => 'my_ajax',
		'url'     => YOUR_PLUGIN_URL . 'assets/js/ajax.js',
		'deps'    => array( 'jquery' ),
		'version' => YOUR_PLUGIN_VERSION,
		'footer'  => true,
		'ajax'    => true,
		'params'  => array(
			'data1'  => 'my_data_1',
			'data2'  => 'my_data_2',
		)
	)
)

After adding script above, you can see JS variables before the scripts.

<script id="my_ajax-js-extra">
var my_ajax = {"data1":"my_data_1","data2":"my_data_2","ajax_url":"https:\/\/local.test\/wp-admin\/admin-ajax.php?action=my_ajax","ajax_nonce":"fead4137e4"};
</script>

You can use ajax_url and ajax_nonce directly in your scripts.

jQuery(function($){
    $(document).ready(function(){ 
        $('#btn').on('click',function(){
			var data = {
				action: "my_ajax",
				nonce: my_ajax.ajax_nonce,
			};
			$.ajax({
				url: my_ajax.ajax_url,
				data: data,
				type: 'POST',
				dataType: "json",
				success: function(data){
					console.log(data);
				},
				error: function(data){
					console.log(data);
				}
			})
        })
    }) 
})

oberonlai / wp-asset

Maintainers

Details