{"id":7456,"date":"2020-05-23T15:00:00","date_gmt":"2020-05-23T13:00:00","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=7456"},"modified":"2021-06-02T14:11:33","modified_gmt":"2021-06-02T12:11:33","slug":"how-to-enqueue-scripts-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/","title":{"rendered":"How to Enqueue Custom Scripts and Style Sheets in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Adding custom scripts or stylesheets to your WordPress site is usually done to improve the functionality, features, and design of a site. There are multiple ways of adding JavaScript (also called JS) and CSS code to your theme or plugin. In a different article, we covered <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-javascript-to-wordpress\/\">all the ways to add JS code<\/a>, ranging from ones that are easier to understand and implement to ones that are more coding intensive. In this article, we\u2019re going to <strong>take a closer look at one of those methods\u2014enqueueing<\/strong>. It is best for adding larger custom scripts and stylesheets but it is an advanced-user method. As such, <strong>this article is more suitable for developers or WordPress users who wish to enhance existing knowledge<\/strong>. Of course, it\u2019s a good read for any WordPress user, but be sure to do additional research if you want to attempt this but aren\u2019t comfortable with coding. We will cover several approaches to enqueueing custom scripts and stylesheets in this article and provide examples for them:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-for-the-frontend\">Adding scripts and stylesheets for the frontend<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-for-the-backend\">Adding scripts and stylesheets for the backend<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#conditional-enqueueing\">Conditional enqueueing<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-js-and-css-code-inline\">Adding JS and CSS code inline<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"what-it-is\"><\/a>Enqueueing and WordPress Hooks<\/h3>\n<p>[\/vc_column_text][vc_column_text]Before we dive into the main part of this article, let\u2019s take a look at what enqueueing and WordPress hooks are. <strong>By enqueueing, i.e. using the <em>wp_enqueue_script<\/em> and <em>wp_enqueue_style<\/em> functions, you inform WordPress when and where to load custom scripts and stylesheets<\/strong>. Simply put, instead of having all your code in one place, which would slow down your load time, you use the <em>enqueue<\/em> function. It helps you set when WordPress should interact with a custom code file and which dependencies that file has.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress hooks<\/a> are a feature that allow developers to add custom code to plugins and themes which interact with the WordPress Core in order to change its behavior but leave its files intact. Apart from adding custom code, a developer can choose when that code will run during the WordPress PHP processing. This is done using hooks. You can either choose a default WordPress hook or insert and use a custom hook. To use a hook, you first need to write a custom function (often called a <strong>callback or a hooked function<\/strong>). Those functions are divided into two types: actions and filters. Depending on which type of function you use for your hook, you can have action hooks or <em>filter hooks<\/em>. The difference between actions and filters is that actions add to existing content while filters can only modify it. <strong>Filters edit the argument they are given and always need to return a value<\/strong>. In contrast, <strong>actions aren\u2019t always given arguments and they don\u2019t need to return a value<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-for-the-frontend\"><\/a>Adding Scripts and Stylesheets for the Frontend<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019ve come to grips with what enqueueing and hooks are, we can move on to adding scripts and stylesheets to WordPress. First, you need to <strong>create a separate file<\/strong> for your code. The file\u2019s extension should be <strong>.js<\/strong> (if adding Javascript) or <strong>.css<\/strong> (if adding a stylesheet). Then, <strong>place the file either inside your theme or plugin directory<\/strong>. Afterward, create a snippet of code that enqueues the file. You need to insert it into the functions.php file of your parent or child theme or inside a plugin file, depending on the location of your custom script\/stylesheet file. The code snippet contains two distinct pieces of code. The first piece is a function that enqueues the file with the use of wp_enqueue_script and wp_enqueue_style. The second represents the use of the add_action function which hooks on one of <strong>the two default WordPress script and stylesheet loading hooks &#8211; wp_enqueue_scripts and admin_enqueue_scripts<\/strong>. The first hook is intended for loading scripts and stylesheets that affect the frontend of the site, while the second is for those affecting the admin dashboard.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Any developer of a well-coded theme or plugin prefers this method of adding scripts and stylesheets. It prevents the same scripts and stylesheets from being loaded multiple times and reduces incompatibility-based plugin conflicts. Moreover, developers can take advantage of a <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/including-css-javascript\/#default-scripts-included-and-registered-by-wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">list of widely used scripts<\/a> to standardize their coding even further.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Enqueue Scripts<\/h3>\n<p>[\/vc_column_text][vc_column_text]The function <strong>wp_enqueue_script<\/strong> has five parameters (also called arguments), which we will explain below. Only the first is mandatory, and it has to be unique.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$handle<\/strong> \u2013 a unique script name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$src<\/strong> \u2013 full URL path to the script or a relative path combined with path functions (examples below). The default value is an empty string (&#8221;).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$deps<\/strong> \u2013 an array of scripts\/script handles that the script you want to enqueue depends on. The default value is an empty array (array()).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$ver<\/strong> \u2013 a number determining the version of the script. If the value is false, it\u2019s automatically set to the current WordPress version. When set to null, no version is added. The default value is false.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$in_footer<\/strong> \u2013 \u2018true\u2019 or \u2018false\u2019 value determining the placement of your script. If set to \u2018true\u2019, the script will be loaded before the closing body tag (). If set to \u2018false\u2019, it will be loaded in the. By default, the value is \u2018false\u2019.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you understand the use of the wp_enqueue_script function, we have included a couple of examples. The same applies to all the other sections in this article. But, before proceeding, we need to mention two essential points, which are relevant to the whole article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As the function has only one required argument ($handle) <strong>if you don\u2019t include any other parameters, their default values will be used instead<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The second point is that you should <strong>avoid using full URLs<\/strong>, and favor using default WordPress functions that retrieve the path. This is done to avoid hard-coding static URLs, which would be rendered useless in the case the URL changes. <strong>You can use several different WordPress functions for path-retrieval<\/strong>; we\u2019ve included three examples below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>get_template_directory_uri()<\/strong> \u2013 which returns the parent theme directory path, without the trailing slash,[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>get_stylesheet_directory_uri()<\/strong> \u2013 which returns the child theme directory path, without the trailing slash, and[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>plugins_url()<\/strong> \u2013 which returns the path to a plugins directory. Of these three functions, only the plugins_url() can have parameters (up to two). Those are the extra path that should be added at the end and the full relative path of the file (script or stylesheet) which is located inside the plugin\u2019s directory. The latter is noted by including __FILE__ as the second parameter.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Examples:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">By placing this code <strong>inside the functions.php file of your parent theme<\/strong> you can enqueue a JS script with <strong>the handle theme-script<\/strong>. The file path is <strong>your-site-url\/wp-content\/themes\/theme-name\/assets\/js\/theme_script.js<\/strong>, while the remaining arguments are set to their default values. This means the script doesn\u2019t depend on any other scripts, its version is the same as the current WordPress version, and the enqueueing is done before &lt;\/head&gt; the tag.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function theme_js_script() {\r\nwp_enqueue_script( 'theme-script', get_template_directory_uri() . '\/assets\/js\/theme_script.js');\r\n}\r\nadd_action('wp_enqueue_scripts', 'theme_js_script');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/1-Enqueue-scripts.png\" class=\"attachment-full size-full\" alt=\"Enqueue scripts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/1-Enqueue-scripts.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/1-Enqueue-scripts-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/1-Enqueue-scripts-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;34px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">By placing this code <strong>inside the functions.php file of your child theme<\/strong> you can enqueue a JS script with <strong>the handle counter<\/strong>. The file path is your-site-url\/wp-content\/themes\/child-theme-name\/js\/counter.js and it depends on the script with the handle jquery. Its version is the same as the current WordPress version and it\u2019s enqueued before the &lt;\/body&gt; tag.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function counter_script() {\r\nwp_enqueue_script( 'counter', get_stylesheet_directory_uri() . '\/js\/counter.js', array( 'jquery' ), false, true );\r\n}\r\nadd_action('wp_enqueue_scripts','counter_script');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/2-Enqueue-scripts-2.png\" class=\"attachment-full size-full\" alt=\"Enqueue scripts 2\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/2-Enqueue-scripts-2.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/2-Enqueue-scripts-2-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/2-Enqueue-scripts-2-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;34px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">By placing this code <strong>inside the functions.php file of your child theme<\/strong> you can enqueue a JS script with <strong>the handle counter<\/strong>. The file path is your-site-url\/wp-content\/themes\/child-theme-name\/js\/counter.js and it depends on the script with the handle jquery. Its version is the same as the current WordPress version and it\u2019s enqueued before the &lt;\/body&gt; tag.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function my_plugin_script() {\r\nwp_enqueue_script('compatible', plugins_url('assets\/js\/compatible.js', __FILE__), array(), '1.4', true);\r\n}\r\nadd_action('wp_enqueue_scripts','my_plugin_script');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/3-Enqueue-Custom-Scripts.jpg\" class=\"attachment-full size-full\" alt=\"Enqueue Custom Scripts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/3-Enqueue-Custom-Scripts.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/3-Enqueue-Custom-Scripts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/3-Enqueue-Custom-Scripts-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Enqueue Stylesheets<\/h3>\n<p>[\/vc_column_text][vc_column_text]The function <strong>wp_enqueue_style<\/strong> also has five arguments, most of which are the same as those for the enqueue scripts function. Only the first argument is mandatory and has to be unique.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$handle<\/strong> \u2013 a unique name of the stylesheet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$src<\/strong> \u2013 full URL path to the stylesheet or a relative path combined with the same path functions. The default value is an empty string (&#8221;).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$deps<\/strong> \u2013 an array of stylesheets\/stylesheet handles that the stylesheet you want to enqueue depends on. The default value is an empty array (array()).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$ver<\/strong> \u2013 a stylesheet\u2019s version number. If the value is false, it\u2019s automatically set to the current WordPress version. When set to null, no version is added. The default value is false.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$media<\/strong> \u2013 identifies which media the stylesheet serves. The values could be given as media types (e.g. &#8216;screen&#8217;, &#8216;all&#8217;, or &#8216;print&#8217;) or using media queries (e.g. (orientation: landscape) or (max-width: 1024px)). The default value is &#8216;all&#8217;.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Examples:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">By <strong>adding this code in the functions.php of your child theme<\/strong> you can enqueue a CSS stylesheet with <strong>the handle default-style<\/strong>, whose path is <strong>your-site-url\/wp-content\/themes\/child-theme-name\/css\/default.css<\/strong>. It has no dependent stylesheets, its version is the same as the current WordPress, and it\u2019s intended for all media types.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function default_css_styles() {\r\nwp_enqueue_style('default-style', get_stylesheet_directory_uri() .'\/css\/default.css');\r\n}\r\nadd_action('wp_enqueue_scripts', 'default_css_styles');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/4-Enqueue-stylesheets.jpg\" class=\"attachment-full size-full\" alt=\"Enqueue stylesheets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/4-Enqueue-stylesheets.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/4-Enqueue-stylesheets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/4-Enqueue-stylesheets-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;34px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">By <strong>adding this code to one of the plugins\u2019 files<\/strong>, you can enqueue a CSS stylesheet with <strong>the handle plugin-styles<\/strong> and the path to the file is <strong>your-site-url\/wp-content\/plugins\/plugin-name\/assets\/css\/plugin.min.css<\/strong>. There are no dependent CSS stylesheets, the file version is 2.1, and the CSS is intended for all media types. The default value is \u2018all\u2019, and we\u2019ve deliberately added that parameter to the example so you can see it within the code, but you can omit it.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function my_plugin_styles() {\r\nwp_enqueue_style('plugin-styles', plugins_url('assets\/css\/plugin.min.css', __FILE__), array(), '2.1', 'all');\r\n}\r\nadd_action('wp_enqueue_scripts', 'my_plugin_styles');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/5-Function-my_plugin_styles.jpg\" class=\"attachment-full size-full\" alt=\"Function my_plugin_styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/5-Function-my_plugin_styles.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/5-Function-my_plugin_styles-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/5-Function-my_plugin_styles-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-for-the-backend\"><\/a>Adding Scripts and Stylesheets for the Backend<\/h2>\n<p>[\/vc_column_text][vc_column_text]The previous section described how to add scripts and stylesheets that will affect the frontend of your site. However, using similar methods, you can enqueue scripts and stylesheets intended to affect the backend of your site. More precisely, your admin dashboard. The WordPress hook for enqueueing scripts and stylesheets meant to be used for your admin dashboard is called <em><strong>admin_enqueue_scripts<\/strong><\/em>. The proper use of the hook includes making a function with the enqueueing code first and then adding an action with the hook and function name as two of the arguments used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Examples:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can <strong>enqueue multiple files<\/strong> (both scripts and stylesheets) within a function by <strong>using the <em>wp_enqueue_script and wp_enqueue_style<\/em> functions multiple times<\/strong>. Moreover, <strong>separate scripts and stylesheets can be enqueued with the same handle<\/strong>. Both are done to supply additional structure to your theme or plugin. In this example, both a script and a stylesheet are added with the same handle. They are meant to affect the creation of a navigation menu inside the admin panel.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function admin_nav_menu_enqueue() {\r\nwp_enqueue_script('nav-menu', get_template_directory_uri(). '\/assets\/js\/nav-menu.js');\r\nwp_enqueue_style('nav-menu', get_template_directory_uri(). '\/assets\/css\/nav-menu.css');\r\n}\r\nadd_action('admin_enqueue_scripts', 'admin_nav_menu_enqueue');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/6-Properly-add-scripts-and-stylesheets-to-your-admin-dashboard.jpg\" class=\"attachment-full size-full\" alt=\"Properly add scripts and stylesheets to your admin dashboard\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/6-Properly-add-scripts-and-stylesheets-to-your-admin-dashboard.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/6-Properly-add-scripts-and-stylesheets-to-your-admin-dashboard-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/6-Properly-add-scripts-and-stylesheets-to-your-admin-dashboard-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"conditional-enqueueing\"><\/a>Conditional Enqueueing<\/h2>\n<p>[\/vc_column_text][vc_column_text]Sometimes, you want to enqueue a certain script or stylesheet only if one or more conditions are fulfilled. The pseudocode for those cases is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">If ( \/* insert a conditional here *\/ ){\r\n\/\/ insert the enqueue code here\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The number of conditional statements inside the \u201c()\u201d brackets could be one or more. In case that two or more conditions are included, the use of logical operators <strong>&amp;&amp;<\/strong> or <strong>||<\/strong> is needed. The &amp;&amp; operator <strong>stands for logical conjunction<\/strong>, meaning the statement is true only when both conditions are met. On the other hand, the || operator <strong>stands for logical disjunction<\/strong>, i.e. the statement is true if either of the conditions used is met.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Conditional enqueueing is often paired with the use of the <em>wp_register_script()<\/em> and <em>wp_register_style()<\/em>. Those functions have the same arguments as their enqueue counterparts <em>(wp_enqueue_script <\/em>and<em> wp_enqueue_style, respectively<\/em>). However, <em>wp_register_script<\/em> <strong>only registers the script<\/strong>, while <em>wp_enqueue_script<\/em> <strong>both registers and enqueues, given that it uses both $handle and $src arguments<\/strong>. Therefore, the wp_register_script function is used in the case you aren\u2019t sure when to enqueue, to delay the enqueueing for a later time or when certain conditions are met. The same applies to the wp_register_style function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">In the first example, there are three conditional statements that determine if the script will be enqueued or not. The same script is registered prior to using the wp_register_script function, which allows for enqueueing with only the handle name. Since the logical operator &amp;&amp; is used twice, it means that only <strong>if all three conditions are met<\/strong> the script with the handle <strong>comment-reply<\/strong> will be enqueued.\nAs for the conditions, the first statement\u2014<strong>is_singular()<\/strong> determines what post type (post, page, attachment, or a custom post type) your content belongs to. The second\u2014<strong>comments_open()<\/strong> determines if the content can be commented on (if that option is allowed). And the final condition\u2014<strong>get_option(&#8216;thread_comments&#8217;)<\/strong> determines if native WP nested comments are enabled for the content.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if( is_singular() &amp;&amp; comments_open() &amp;&amp; get_option('thread_comments') ) {\r\nwp_enqueue_script('comment-reply');\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/7-Conditional-enqueueing.jpg\" class=\"attachment-full size-full\" alt=\"Conditional enqueueing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/7-Conditional-enqueueing.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/7-Conditional-enqueueing-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/7-Conditional-enqueueing-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;34px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">In the second example, there is only one condition \u2013 is_multisite(), which, as the name suggests, <strong>checks whether a site is multisite or not<\/strong>. A benefit of using the wp_register_style function with conditional statements is the option to use the wp_deregister_style function. That function <strong>deregisters a previously registered function<\/strong>. This <strong>allows you to enqueue a new stylesheet instead of the deregistered stylesheet<\/strong>. Moreover, the handle can be the same to make code more clear and intuitive. Likewise, you can use the wp_deregister_script() function in combination with the above-mentioned functions.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if( is_multisite() ) {\r\nwp_deregister_style('conditional-style');\r\nwp_enqueue_style('conditional-style', get_template_directory_uri() .'\/assets\/css\/conditional_style.css', array(), false, true);\r\n}<\/pre>\n<p>[\/vc_column_text]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/8-Conditional-enqueueing-2.jpg\" class=\"attachment-full size-full\" alt=\"Conditional enqueueing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/8-Conditional-enqueueing-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/8-Conditional-enqueueing-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/8-Conditional-enqueueing-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-js-and-css-code-inline\"><\/a>Adding JS and CSS Code Inline<\/h2>\n<p>[\/vc_column_text][vc_column_text]Apart from <em>wp_enqueue_script<\/em> and<em> wp_enqueue_style<\/em>, which are more suited for adding larger scripts and stylesheets, there are<strong> two additional functions, best used for adding smaller pieces of JS and CSS code<\/strong>. Those functions are <em>wp_add_inline_script<\/em> and <em>wp_add_inline_style<\/em>. It\u2019s best to use them in conjunction with <em>wp_enqueue_script<\/em> and <em>wp_enqueue_style<\/em> to make small adjustments that would extend the functionality of a theme or plugin.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding Scripts with wp_add_inline_script<\/h3>\n<p>[\/vc_column_text][vc_column_text]The function <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_add_inline_script\/\" target=\"_blank\" rel=\"noopener noreferrer\">wp_inline_script<\/a> has three arguments and the first two are required. Let us explain them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$handle<\/strong> \u2013 a unique script handle name. It represents the name of a previously enqueued script to which the inline JS code will be added.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$data<\/strong> \u2013 JS code which will be added. It mustn\u2019t contain the opening and closing script tags (<code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;script&gt;<\/code> and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;\/script&gt;<\/code>, respectively)[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$position<\/strong> \u2013 whether the inline JS code is added before or after the enqueued script. The default value is &#8216;after&#8217;.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example: [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code below first enqueues the script with the handle <strong>inline-js-script<\/strong> and with the remaining arguments, according to the enqueue scripts explanation above. Strictly speaking,<strong> you don\u2019t have to enqueue a script within the same function<\/strong> (in our example it\u2019s called <em>add_inline_js_code()<\/em>); this can be done in a separate function. However, <strong>it is necessary that the script is enqueued before using the <em>wp_inline_script<\/em> function<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, you can add small inline JS code to the previously enqueued script by using the wp_add_inline_script function. More precisely, <strong>use the same handle and replace the <em>add-your-inline-js-code-her<\/em>e with actual JS code<\/strong>. Since no third argument is used, inline JS code is added after the script code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function add_inline_js_code() {\r\nwp_enqueue_script( 'inline-js-script', get_template_directory_uri() . '\/assets\/js\/scripts.js', array( 'jquery' ), false, true );\r\nwp_add_inline_script( 'inline-js-script', 'add-your-inline-js-code-here');\r\n}\r\nadd_action('wp_enqueue_scripts', 'add_inline_js_code');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/9-Adding-scripts-with-wp_add_inline_script.jpg\" class=\"attachment-full size-full\" alt=\"Adding scripts with wp_add_inline_script\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/9-Adding-scripts-with-wp_add_inline_script.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/9-Adding-scripts-with-wp_add_inline_script-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/9-Adding-scripts-with-wp_add_inline_script-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding Stylesheets with wp_add_inline_style<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>wp_add_inline_style<\/em> has only two arguments, which are the same as the first two arguments of the <em>wp_add_inline_script<\/em>. Those are:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$handle<\/strong> \u2013 a name of the previously enqueued stylesheet and[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>$data<\/strong> \u2013 the inline CSS code that should be added to the stylesheet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]According to the definition of the function wp_enqueue_style, a stylesheet with the handle css-modules is first enqueued. The <em>wp_enqueue_style<\/em> function doesn\u2019t have to be a part of the a<em>dd_inline_css_code()<\/em> function, as long as the stylesheet is enqueued before the use of the <em>wp_add_inline_style<\/em> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, use the wp_add_inline_style function. <strong>The handle will be the same but you need to replace the <em>add-your-inline-css-code-here<\/em> with actual CSS code<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function add_inline_css_code() {\r\nwp_enqueue_style('css-modules', get_template_directory_uri() .'\/assets\/css\/modules.css');\r\nwp_add_inline_style('css-modules', 'add-your-inline-css-code-here');\r\n}\r\nadd_action('wp_enqueue_scripts', 'add_inline_css_code');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;39px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/10-Adding-stylesheets-with-wp_add_inline_style.jpg\" class=\"attachment-full size-full\" alt=\"Adding stylesheets with wp_add_inline_style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/10-Adding-stylesheets-with-wp_add_inline_style.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/10-Adding-stylesheets-with-wp_add_inline_style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/05\/10-Adding-stylesheets-with-wp_add_inline_style-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding scripts and stylesheets can be quite useful in improving your WordPress website. From improving the functionality and adding features to creating a more attractive design\u2014there\u2019s a wide range of reasons to add custom scripts or stylesheets. And to make sure your custom code integrates and works well with WordPress you should add it properly by enqueueing the files. Using this article and the various examples we\u2019ve shown here, you will be able to enqueue scripts and stylesheets to your site and dashboard in no time.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to enqueue scripts and stylesheets in WordPress and gain the confidence to customize various features and functionalities of your site.<\/p>\n","protected":false},"author":11229,"featured_media":7706,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,20,23,4,13],"class_list":["post-7456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-css","tag-javascript","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/7456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=7456"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/7456\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/7706"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=7456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=7456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=7456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}