{"id":574,"date":"2019-05-14T02:45:03","date_gmt":"2019-05-14T02:45:03","guid":{"rendered":"http:\/\/www.projectimmerse.com\/blog\/?p=574"},"modified":"2020-06-16T02:58:54","modified_gmt":"2020-06-16T02:58:54","slug":"script-loader-tag-using-wordpress","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/","title":{"rendered":"Script Loader Tag using WordPress"},"content":{"rendered":"

This little tidbit I consider a golden nugget for those looking to optimize their website’s page speed. I ran into a situation recently (actually times) where I needed to defer some scripts down to the footer area. If you’ve been developing a while now, you know about render blocking scripts. Put simply, we want our DOM to load first before any scripts are executed.<\/p>\r\n

<\/p>\r\n

So there are two wordpress hooks you’re probably familiar with – they’re mentioned below.<\/p>\r\n

For CSS, we can utilize the functions below:<\/p>\r\n

\r\nwp_enqueue_style();\r\nwp_register_style();\r\n<\/pre><\/pre>\r\n
And for scripts:<\/p>\r\n
\r\nwp_enqueue_script\r\n<\/pre><\/pre>\r\n
That’s all good and dandy, but what about if we want to add script and\/or css properties? To add those extra properties we will need to utilize yet another WordPress function I didn’t even know existed.<\/p>\r\n
This may be useful when you’re looking to add extra properties\/attributes to your script tag. Some examples could be:<\/p>\r\n
defer<\/a><\/h2>\r\n
\r\n&amp;lt;script src=&amp;quot;defer-script.js&amp;quot; defer&amp;lt;\/script&amp;gt;\r\n<\/pre><\/pre>\r\n
async<\/a><\/h2>\r\n
\r\n&amp;lt;script src=&amp;quot;async-script.js&amp;quot; async&amp;lt;\/script&amp;gt;\r\n<\/pre><\/pre>\r\n
crossorigin<\/a><\/h2>\r\n
We see this used most often when calling files from a remote server ie. bootstrap, icons, libraries.<\/p>\r\n
\r\n\r\n&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;https:\/\/use.fontawesome.com\/releases\/v5.7.0\/css\/all.css&amp;quot; integrity=&amp;quot;sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;\r\n\r\n<\/pre><\/pre>\r\n
script_loader_tag Usage<\/h2>\r\n
Alright now that we’ve got that squared away, we can dive into the function itself. Implementation quite similar to WordPress’s family of functions – first define the function. In our case, let’s call our function my_defer_scripts<\/strong><\/p>\r\n
Next, we want to define an array listing our scripts – let’s name it $defer_scripts<\/strong><\/p>\r\n
The return value is what’s most important – this is where we add the property. The working script below illustrates how straightforward this is.<\/p>\r\n
Finally, we pass our defined function onto WordPress’ filter function and voila – we’ve got the defer property added to our script tag.<\/p>\r\n
\r\n\r\nfunction my_defer_scripts($tag, $handle, $source) {\r\n\r\n    $defer_scripts = array( 'some-script', 'another-script' );\r\n\r\nif(in_array($handle, $async_scripts)) {\r\n    return '&amp;lt;script type=&amp;quot;text\/javascript&amp;quot; src=' . $src . ' defer&amp;gt;&amp;lt;\/script&amp;gt;';\r\n}\r\n\r\n    return $tag;\r\n}\r\nadd_filter( 'script_loader_tag', 'my_defer_scripts', 10, 3 );\r\n\r\n<\/pre><\/pre>\r\n\r\n\r\n
<\/p>\r\n","protected":false},"excerpt":{"rendered":"
This little tidbit I consider a golden nugget for those looking to optimize their website’s page speed. I ran into a situation recently (actually times) where I needed to defer some scripts down to the footer area. If you’ve been developing a while now, you know about render blocking scripts. Put simply, we want our … <\/p>\n
Continue reading “Script Loader Tag using WordPress”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1106,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[],"class_list":["post-574","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"\nScript Loader Tag using Wordpress - Project Immerse<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Script Loader Tag using Wordpress - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"This little tidbit I consider a golden nugget for those looking to optimize their website’s page speed. I ran into a situation recently (actually times) where I needed to defer some scripts down to the footer area. If you’ve been developing a while now, you know about render blocking scripts. Put simply, we want our … Continue reading "Script Loader Tag using WordPress"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-14T02:45:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-16T02:58:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alex Mercer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Mercer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/\"},\"author\":{\"name\":\"Alex Mercer\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"Script Loader Tag using WordPress\",\"datePublished\":\"2019-05-14T02:45:03+00:00\",\"dateModified\":\"2020-06-16T02:58:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/\"},\"wordCount\":289,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/script-loader-tag-wordpress.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/\",\"name\":\"Script Loader Tag using Wordpress - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/script-loader-tag-wordpress.png\",\"datePublished\":\"2019-05-14T02:45:03+00:00\",\"dateModified\":\"2020-06-16T02:58:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/script-loader-tag-wordpress.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/script-loader-tag-wordpress.png\",\"width\":750,\"height\":750,\"caption\":\"Script Loader Tag - Wordpress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/script-loader-tag-using-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Script Loader Tag using WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"Alex Mercer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"caption\":\"Alex Mercer\"},\"description\":\"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.\",\"sameAs\":[\"https:\\\/\\\/www.projectimmerse.com\"],\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Script Loader Tag using Wordpress - Project Immerse","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Script Loader Tag using Wordpress - Project Immerse","og_description":"This little tidbit I consider a golden nugget for those looking to optimize their website’s page speed. I ran into a situation recently (actually times) where I needed to defer some scripts down to the footer area. If you’ve been developing a while now, you know about render blocking scripts. Put simply, we want our … Continue reading \"Script Loader Tag using WordPress\"","og_url":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/","og_site_name":"Project Immerse","article_published_time":"2019-05-14T02:45:03+00:00","article_modified_time":"2020-06-16T02:58:54+00:00","og_image":[{"width":750,"height":750,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png","type":"image\/png"}],"author":"Alex Mercer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alex Mercer","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/"},"author":{"name":"Alex Mercer","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"Script Loader Tag using WordPress","datePublished":"2019-05-14T02:45:03+00:00","dateModified":"2020-06-16T02:58:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/"},"wordCount":289,"commentCount":0,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/","url":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/","name":"Script Loader Tag using Wordpress - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png","datePublished":"2019-05-14T02:45:03+00:00","dateModified":"2020-06-16T02:58:54+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/05\/script-loader-tag-wordpress.png","width":750,"height":750,"caption":"Script Loader Tag - Wordpress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/script-loader-tag-using-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Script Loader Tag using WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"Alex Mercer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","caption":"Alex Mercer"},"description":"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.","sameAs":["https:\/\/www.projectimmerse.com"],"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=574"}],"version-history":[{"count":25,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/574\/revisions"}],"predecessor-version":[{"id":604,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/574\/revisions\/604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media\/1106"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}