Examples

Real-world usage patterns for WPZylos Assets.

Plugin Admin Dashboard

class AdminAssetsProvider
{
    public function register(AssetManager $assets): void
    {
        // Main admin app (Vue.js)
        $assets->script('admin-dashboard')
            ->src('dist/js/admin-dashboard.js')
            ->dependencies(['wp-element', 'wp-api-fetch'])
            ->admin()
            ->module()
            ->inFooter()
            ->localize('DashboardConfig', [
                'restUrl' => rest_url('my-plugin/v1/'),
                'nonce' => wp_create_nonce('wp_rest'),
                'currentUser' => wp_get_current_user()->display_name,
            ]);

        // Admin styles
        $assets->style('admin-dashboard')
            ->src('dist/css/admin-dashboard.css')
            ->admin()
            ->dependencies(['wp-components']);
    }
}

WooCommerce Integration

// Only load when WooCommerce is active
$assets->script('woo-checkout')
    ->src('dist/js/woo-checkout.js')
    ->dependencies(['jquery'])
    ->front()
    ->condition(fn() => class_exists('WooCommerce') && is_checkout());

$assets->style('woo-styles')
    ->src('dist/css/woo.css')
    ->front()
    ->condition(fn() => class_exists('WooCommerce'));

Vite + React Admin

// vite.config.js builds to dist/
$vite = $app->make(ViteAssetResolver::class);

add_action('admin_enqueue_scripts', function (string $hook) use ($vite) {
    if ($hook !== 'toplevel_page_my-plugin') {
        return;
    }

    $vite->enqueueEntry('resources/src/admin.jsx', 'my-plugin-admin', ['wp-element']);
});

External CDN Assets

$assets->script('google-maps')
    ->url('https://maps.googleapis.com/maps/api/js?key=' . $apiKey)
    ->defer()
    ->front()
    ->condition(fn() => is_page('contact'));

$assets->style('font-awesome')
    ->url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css')
    ->version('6.5.0');

Dynamic CSS Variables

$settings = get_option('my_plugin_settings');

$assets->style('theme')
    ->src('dist/css/theme.css')
    ->inline(sprintf(
        ':root { --primary: %s; --secondary: %s; --radius: %spx; }',
        esc_attr($settings['primary_color'] ?? '#2271b1'),
        esc_attr($settings['secondary_color'] ?? '#135e96'),
        intval($settings['border_radius'] ?? 4)
    ));