Scripts & Styles API
System for registering, enqueueing, and outputting JavaScript and CSS assets in WordPress.
Since: 2.1.0 (scripts), 2.6.0 (styles)
Source: wp-includes/script-loader.php, wp-includes/functions.wp-scripts.php, wp-includes/functions.wp-styles.php
Components
| Component | Description |
|---|---|
| functions.md | Core enqueue/register functions |
| class-wp-scripts.md | Script dependency manager |
| class-wp-styles.md | Style dependency manager |
| class-wp-dependencies.md | Base dependency class |
| hooks.md | Actions and filters |
Architecture
WP_Dependencies (base class)
├── WP_Scripts (JavaScript)
│ └── _WP_Dependency (individual script)
└── WP_Styles (CSS)
└── _WP_Dependency (individual stylesheet)
Registration Flow
wp_register_script() / wp_register_style()
└── WP_Dependencies::add()
└── new _WP_Dependency()
└── stored in $registered array
Enqueue Flow
wp_enqueue_script() / wp_enqueue_style()
├── wp_register_*() (if src provided)
└── WP_Dependencies::enqueue()
└── added to $queue array
Output Flow
wp_head / wp_footer
└── wp_print_scripts() / wp_print_styles()
└── WP_Dependencies::do_items()
├── all_deps() — resolve dependency tree
└── do_item() — output each asset
└── apply_filters('script_loader_tag' / 'style_loader_tag')
Script Loading Strategies (6.3.0+)
Scripts support delayed loading strategies:
| Strategy | Behavior |
|---|---|
defer |
Execute after parsing, maintain order |
async |
Execute when available, no order guarantee |
wp_register_script( 'my-script', $src, array(), '1.0', array(
'strategy' => 'defer',
'in_footer' => true,
) );
Concatenation & Compression
Admin scripts/styles can be concatenated and compressed:
| Constant | Default | Description |
|---|---|---|
SCRIPT_DEBUG |
false | Load unminified versions |
CONCATENATE_SCRIPTS |
true | Combine scripts in admin |
COMPRESS_SCRIPTS |
true | Gzip compress scripts |
COMPRESS_CSS |
true | Gzip compress styles |
Groups (Header vs Footer)
Scripts can be placed in header (group 0) or footer (group 1):
// Footer placement via args
wp_enqueue_script( 'my-script', $src, array(), '1.0', true );
wp_enqueue_script( 'my-script', $src, array(), '1.0', array( 'in_footer' => true ) );
RTL Support
Styles support automatic RTL switching:
wp_register_style( 'my-style', 'my-style.css' );
wp_style_add_data( 'my-style', 'rtl', 'replace' ); // Load my-style-rtl.css in RTL
Localization
Pass PHP data to JavaScript:
wp_localize_script( 'my-script', 'myData', array(
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'my-nonce' ),
) );
Inline Scripts/Styles
Add inline code attached to registered assets:
wp_add_inline_script( 'my-script', 'console.log("loaded");', 'after' );
wp_add_inline_style( 'my-style', '.custom { color: red; }' );
Translation Support (5.0.0+)
Load script translations from JSON files:
wp_set_script_translations( 'my-script', 'my-textdomain', plugin_dir_path( __FILE__ ) . 'languages' );