{"id":5824,"date":"2026-02-12T20:45:30","date_gmt":"2026-02-13T01:45:30","guid":{"rendered":"https:\/\/chubes.net\/?documentation=scripts-styles-api"},"modified":"2026-03-13T03:29:25","modified_gmt":"2026-03-13T07:29:25","slug":"scripts-styles-api","status":"publish","type":"documentation","link":"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/scripts-styles-api\/","title":{"rendered":"Scripts &amp; Styles API"},"content":{"rendered":"<p>System for registering, enqueueing, and outputting JavaScript and CSS assets in WordPress.<\/p><p><strong>Since:<\/strong> 2.1.0 (scripts), 2.6.0 (styles)<br \/>\n<strong>Source:<\/strong> <code>wp-includes\/script-loader.php<\/code>, <code>wp-includes\/functions.wp-scripts.php<\/code>, <code>wp-includes\/functions.wp-styles.php<\/code><\/p><h2 class=\"wp-block-heading\">Components<\/h2><figure class=\"wp-block-table\"><table><thead><tr><th>Component<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/scripts-styles-functions\/\">functions.md<\/a><\/td><td>Core enqueue\/register functions<\/td><\/tr><tr><td><a href=\"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/wp_scripts\/\">class-wp-scripts.md<\/a><\/td><td>Script dependency manager<\/td><\/tr><tr><td><a href=\"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/wp_styles\/\">class-wp-styles.md<\/a><\/td><td>Style dependency manager<\/td><\/tr><tr><td><a href=\"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/wp_dependencies\/\">class-wp-dependencies.md<\/a><\/td><td>Base dependency class<\/td><\/tr><tr><td><a href=\"https:\/\/chubes.net\/docs\/wordpress-core\/scripts-styles\/scripts-styles-hooks\/\">hooks.md<\/a><\/td><td>Actions and filters<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\">Architecture<\/h2><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\"><\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code\"><code>WP_Dependencies (base class)\n    \u251c\u2500\u2500 WP_Scripts (JavaScript)\n    \u2502       \u2514\u2500\u2500 _WP_Dependency (individual script)\n    \u2514\u2500\u2500 WP_Styles (CSS)\n            \u2514\u2500\u2500 _WP_Dependency (individual stylesheet)<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Registration Flow<\/h2><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_register_script() \/ wp_register_style()\n    \u2514\u2500\u2500 WP_Dependencies::add()\n            \u2514\u2500\u2500 new _WP_Dependency()\n                    \u2514\u2500\u2500 stored in $registered array<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Enqueue Flow<\/h2><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\"><\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code\"><code>wp_enqueue_script() \/ wp_enqueue_style()\n    \u251c\u2500\u2500 wp_register_*() (if src provided)\n    \u2514\u2500\u2500 WP_Dependencies::enqueue()\n            \u2514\u2500\u2500 added to $queue array<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Output Flow<\/h2><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\"><\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code\"><code>wp_head \/ wp_footer\n    \u2514\u2500\u2500 wp_print_scripts() \/ wp_print_styles()\n            \u2514\u2500\u2500 WP_Dependencies::do_items()\n                    \u251c\u2500\u2500 all_deps() \u2014 resolve dependency tree\n                    \u2514\u2500\u2500 do_item() \u2014 output each asset\n                            \u2514\u2500\u2500 apply_filters(&#039;script_loader_tag&#039; \/ &#039;style_loader_tag&#039;)<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Script Loading Strategies (6.3.0+)<\/h2><p>Scripts support delayed loading strategies:<\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Strategy<\/th><th>Behavior<\/th><\/tr><\/thead><tbody><tr><td><code>defer<\/code><\/td><td>Execute after parsing, maintain order<\/td><\/tr><tr><td><code>async<\/code><\/td><td>Execute when available, no order guarantee<\/td><\/tr><\/tbody><\/table><\/figure><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_register_script( &#039;my-script&#039;, $src, array(), &#039;1.0&#039;, array(\n    &#039;strategy&#039;  =&gt; &#039;defer&#039;,\n    &#039;in_footer&#039; =&gt; true,\n) );<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Concatenation &amp; Compression<\/h2><p>Admin scripts\/styles can be concatenated and compressed:<\/p><figure class=\"wp-block-table\"><table><thead><tr><th>Constant<\/th><th>Default<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><code>SCRIPT_DEBUG<\/code><\/td><td>false<\/td><td>Load unminified versions<\/td><\/tr><tr><td><code>CONCATENATE_SCRIPTS<\/code><\/td><td>true<\/td><td>Combine scripts in admin<\/td><\/tr><tr><td><code>COMPRESS_SCRIPTS<\/code><\/td><td>true<\/td><td>Gzip compress scripts<\/td><\/tr><tr><td><code>COMPRESS_CSS<\/code><\/td><td>true<\/td><td>Gzip compress styles<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\">Groups (Header vs Footer)<\/h2><p>Scripts can be placed in header (group 0) or footer (group 1):<\/p><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">\/\/ Footer placement via args\nwp_enqueue_script( &#039;my-script&#039;, $src, array(), &#039;1.0&#039;, true );\nwp_enqueue_script( &#039;my-script&#039;, $src, array(), &#039;1.0&#039;, array( &#039;in_footer&#039; =&gt; true ) );<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">RTL Support<\/h2><p>Styles support automatic RTL switching:<\/p><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_register_style( &#039;my-style&#039;, &#039;my-style.css&#039; );\nwp_style_add_data( &#039;my-style&#039;, &#039;rtl&#039;, &#039;replace&#039; ); \/\/ Load my-style-rtl.css in RTL<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Localization<\/h2><p>Pass PHP data to JavaScript:<\/p><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_localize_script( &#039;my-script&#039;, &#039;myData&#039;, array(\n    &#039;ajaxUrl&#039; =&gt; admin_url( &#039;admin-ajax.php&#039; ),\n    &#039;nonce&#039;   =&gt; wp_create_nonce( &#039;my-nonce&#039; ),\n) );<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Inline Scripts\/Styles<\/h2><p>Add inline code attached to registered assets:<\/p><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_add_inline_script( &#039;my-script&#039;, &#039;console.log(&quot;loaded&quot;);&#039;, &#039;after&#039; );\nwp_add_inline_style( &#039;my-style&#039;, &#039;.custom { color: red; }&#039; );<\/code><\/pre><\/div><h2 class=\"wp-block-heading\">Translation Support (5.0.0+)<\/h2><p>Load script translations from JSON files:<\/p><div class=\"code-block-wrapper\"><div class=\"code-block-header\"><span class=\"code-block-language\">php<\/span><button class=\"code-copy-btn\" aria-label=\"Copy code\"><svg><use href=\"https:\/\/chubes.net\/wp-content\/themes\/chubes\/assets\/icons\/chubes.svg#icon-copy\"><\/use><\/svg><\/button><\/div><pre data-chubes-enhanced class=\"wp-block-code language-php\"><code class=\"language-php\">wp_set_script_translations( &#039;my-script&#039;, &#039;my-textdomain&#039;, plugin_dir_path( __FILE__ ) . &#039;languages&#039; );<\/code><\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"footnotes":""},"tags":[],"project":[659],"project_type":[749],"class_list":["post-5824","documentation","type-documentation","status-publish","hentry","project-scripts-styles","project_type-wordpress-reference"],"project_info":{"id":589,"name":"WordPress Core","slug":"wordpress-core"},"project_type_info":{"id":749,"name":"WordPress Reference","slug":"wordpress-reference"},"_links":{"self":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/types\/documentation"}],"version-history":[{"count":3,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5824\/revisions"}],"predecessor-version":[{"id":11000,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/documentation\/5824\/revisions\/11000"}],"wp:attachment":[{"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/media?parent=5824"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/tags?post=5824"},{"taxonomy":"project","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project?post=5824"},{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/chubes.net\/wp-json\/wp\/v2\/project_type?post=5824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}