1. Go to this page and download the library: Download stellarwp/assets library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
stellarwp / assets example snippets
use Boomshakalaka\StellarWP\Assets\Config;
add_action( 'plugins_loaded', function() {
Config::set_hook_prefix( 'boom-shakalaka' );
Config::set_path( PATH_TO_YOUR_PROJECT_ROOT );
Config::set_version( YOU_PROJECT::VERSION );
// Optionally, set a relative asset path. It defaults to `src/assets/`.
// This path is where your JS and CSS directories are stored.
Config::set_relative_asset_path( 'src/assets/' );
} );
Config::add_group_path( 'group-path-slug', GROUP_PATH_ROOT, 'group/path/relevant/path', true );
Asset::add( 'another-style', 'css/another.css' )
->add_to_group_path( 'group-path-slug' );
// This asset's would be found in GROUP_PATH_ROOT . 'group/path/relevant/path' . '/css/css/another.css'
// Add the JS file and then register_with_css() to get a CSS file at the same time.
Asset::add( 'something-js', 'build/something.js' )
->enqueue_on( 'wp_enqueue_scripts' )
->set_dependencies( 'another-js' )
->register_with_css( 'some-css-dependency', 'another-css-dependency');
// OR
// Add the CSS file and then register_with_js() to get a JS file at the same time.
Asset::add( 'something-css', 'build/something.css' )
->enqueue_on( 'wp_enqueue_scripts' )
->set_dependencies( 'another-css' )
->register_with_js( 'some-js-dependency', 'another-js-dependency' );
use Boomshakalaka\StellarWP\Assets\Asset;
Asset::add( 'my-asset', 'css/some-asset.css', $an_optional_version, $an_optional_path_to_project_root )
->add_style_data( 'rtl', true )
->add_style_data( 'suffix', '.rtl' )
->add_to_group( 'my-assets' ) // You can have more than one of these.
->call_after_enqueue( // This can be any callable.
static function() {
// Do something after the asset is enqueued.
}
)
->enqueue_on( 'wp_enqueue_scripts', 20 ) // The second arg is optional and can be set separately via `::set_priority()`.
->set_condition( // This can be any callable that returns a boolean.
static function() {
return is_front_page() || is_single();
}
)
->set_dependencies( 'some-css' ) // Each dependency becomes a parameter in this method.
->set_media( 'screen' )
->set_min_path( 'src/assets/build/' )
->set_path( 'src/assets' )
->set_type( 'css' ) // Technically unneeded due to the .js extension.
->register();
use Boomshakalaka\StellarWP\Assets\Asset;
Asset::add( 'my-asset', 'js/some-asset.js', $an_optional_version, $an_optional_path_to_project_root )
->add_localize_script( // You can have more than one of these.
'some_js_variable',
[
'color' => 'blue',
]
)
->add_to_group( 'my-assets' ) // You can have more than one of these.
->call_after_enqueue( // This can be any callable.
static function() {
// Do something after the asset is enqueued.
}
)
->enqueue_on( 'wp_enqueue_scripts', 20 ) // The second arg is optional and can be set separately via `::set_priority()`.
->print_before( '<b>Before</b>' )
->print_after( '<b>After</b>' )
->set_as_async( true )
->set_as_deferred( true )
->set_as_module( true )
->set_asset_file( 'other-asset-directory/some-asset' ) // This allows you to manually set the path to a *.asset.php file.
->set_condition( // This can be any callable that returns a boolean.
static function() {
return is_front_page() || is_single();
}
)
->set_dependencies( 'jquery' ) // Each dependency becomes a parameter in this method.
->set_min_path( 'src/assets/build/' )
->set_path( 'src/assets' )
->set_type( 'js' ) // Technically unneeded due to the .js extension.
->register();
use Boomshakalaka\StellarWP\Assets\Assets;
// Enqueue a single asset:
Assets::instance()->get( 'my-style' )->enqueue();
// Enqueue multiple assets:
Assets::instance()->enqueue(
[
'my-style',
'my-script',
'something-else',
]
);
/**
* If you want to force the enqueue to happen and ignore any conditions,
* you can pass `true` to the second argument.
*/
Assets::instance()->enqueue(
[
'my-style',
'my-script',
'something-else',
],
true
);
// And here's how you can do it with a specific asset:
Assets::instance()->get( 'my-style' )->enqueue( true );
use Boomshakalaka\StellarWP\Assets\Assets;
// You can do single groups:
Assets::instance()->enqueue_group( 'group-name' );
// or multiple:
Assets::instance()->enqueue_group( [ 'group-one', 'group-two' ] );
// or if you want to force the enqueuing despite conditions:
Assets::instance()->enqueue_group( 'group-name', true );
use Boomshakalaka\StellarWP\Assets\Asset;
use Boomshakalaka\StellarWP\Assets\Assets;
Asset::add( 'my-asset', 'js/some-asset.js' )->register();
$assets = Assets::instance();
$asset_obj = $assets->get( 'my-asset' );
use Boomshakalaka\StellarWP\Assets\Asset;
use Boomshakalaka\StellarWP\Assets\Assets;
Asset::add( 'my-asset', 'js/some-asset.js' )->register();
$assets = Assets::instance();
$assets->get( 'my-asset' )->enqueue();
// This will wp_dequeue_*() the asset and remove it from registration.
$assets->remove( 'my-asset' );
// Using the default path of 'languages/'.
Asset::add( 'my-thing', 'js/something.js' )
->with_translations( $textdomain )
->register();
// Specifying a different path.
Asset::add( 'my-thing', 'js/something.js' )
->with_translations( $textdomain, 'relative/path/to/json/lang/files' )
->register();
// Using the 'default' textdomain and the default path of 'languages/'.
Asset::add( 'my-thing', 'js/something.js' )
->with_translations()
->register();
use Boomshakalaka\StellarWP\Assets\Asset;
// Simple condition.
Asset::add( 'my-asset', 'css/some-asset.css' )
->set_condition( 'is_single' )
->register();
// Class-based method.
Asset::add( 'my-asset', 'css/some-asset.css' )
->set_condition( [ $my_class, 'my_method_that_returns_boolean' ] )
->register();
// Anonymous function.
Asset::add( 'my-asset', 'css/some-asset.css' )
->set_condition( static function() {
// You can do whatever you want here as long as it returns a boolean!
return is_single() || is_home();
} )
->register();