Title: Enqueuing CSS or JavaScript Published: 3 April 2024 Last modified: 22 August 2024 --- [Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/) [Beginner WordPress Developer](https://learn.wordpress.org/course/beginner-wordpress-developer/) Enqueuing CSS or JavaScript [ Exit Course ](https://learn.wordpress.org/course/beginner-wordpress-developer/) 1. a. [ WordPress and web servers ](https://learn.wordpress.org/lesson/wordpress-and-web-servers/) [Preview](https://learn.wordpress.org/lesson/wordpress-and-web-servers/) b. [ The WordPress file structure ](https://learn.wordpress.org/lesson/the-wordpress-file-structure/) [Preview](https://learn.wordpress.org/lesson/the-wordpress-file-structure/) c. [ The WordPress database ](https://learn.wordpress.org/lesson/the-wordpress-database/) [Preview](https://learn.wordpress.org/lesson/the-wordpress-database/) d. [ Permalinks, rewriting urls on Apache and Nginx ](https://learn.wordpress.org/lesson/permalinks-rewriting-urls-on-apache-and-nginx/) [Preview](https://learn.wordpress.org/lesson/permalinks-rewriting-urls-on-apache-and-nginx/) e. [ Front-end page request ](https://learn.wordpress.org/lesson/front-end-page-request/) [Preview](https://learn.wordpress.org/lesson/front-end-page-request/) f. [ Admin page request ](https://learn.wordpress.org/lesson/admin-page-request/) [Preview](https://learn.wordpress.org/lesson/admin-page-request/) 2. 6 lessons 3. a. [ Local development environment ](https://learn.wordpress.org/lesson/local-development-environment/) [Preview](https://learn.wordpress.org/lesson/local-development-environment/) b. [ WordPress Installation ](https://learn.wordpress.org/lesson/wordpress-installation/) [Preview](https://learn.wordpress.org/lesson/wordpress-installation/) c. [ Code editor ](https://learn.wordpress.org/lesson/code-editor/) [Preview](https://learn.wordpress.org/lesson/code-editor/) d. [ Other useful development tools ](https://learn.wordpress.org/lesson/other-useful-development-tools/) [Preview](https://learn.wordpress.org/lesson/other-useful-development-tools/) 4. 4 lessons 5. a. [ HTML ](https://learn.wordpress.org/lesson/html/) [Preview](https://learn.wordpress.org/lesson/html/) b. [ CSS ](https://learn.wordpress.org/lesson/css/) [Preview](https://learn.wordpress.org/lesson/css/) c. [ JavaScript ](https://learn.wordpress.org/lesson/javascript/) [Preview](https://learn.wordpress.org/lesson/javascript/) d. [ PHP ](https://learn.wordpress.org/lesson/php/) [Preview](https://learn.wordpress.org/lesson/php/) e. [ MySQL ](https://learn.wordpress.org/lesson/mysql/) [Preview](https://learn.wordpress.org/lesson/mysql/) 6. 5 lessons 7. a. [ WordPress Hooks ](https://learn.wordpress.org/lesson/wordpress-hooks/) [Preview](https://learn.wordpress.org/lesson/wordpress-hooks/) b. [ Action Hooks ](https://learn.wordpress.org/lesson/action-hooks/) [Preview](https://learn.wordpress.org/lesson/action-hooks/) c. [ Filter Hooks ](https://learn.wordpress.org/lesson/filter-hooks/) [Preview](https://learn.wordpress.org/lesson/filter-hooks/) d. [ Working with hooks ](https://learn.wordpress.org/lesson/working-with-hooks/) [Preview](https://learn.wordpress.org/lesson/working-with-hooks/) 8. 4 lessons 9. a. [ Introduction to themes for developers ](https://learn.wordpress.org/lesson/what-is-a-theme/) [Preview](https://learn.wordpress.org/lesson/what-is-a-theme/) b. [ Theme structure ](https://learn.wordpress.org/lesson/theme-structure/) [Preview](https://learn.wordpress.org/lesson/theme-structure/) c. [ Main stylesheet ](https://learn.wordpress.org/lesson/main-stylesheet/) [Preview](https://learn.wordpress.org/lesson/main-stylesheet/) d. [ Templates ](https://learn.wordpress.org/lesson/templates-3/) [Preview](https://learn.wordpress.org/lesson/templates-3/) e. [ Global settings and styles ](https://learn.wordpress.org/lesson/global-settings-and-styles/) [Preview](https://learn.wordpress.org/lesson/global-settings-and-styles/) f. [ Create Block Theme plugin ](https://learn.wordpress.org/lesson/create-block-theme-plugin/) [Preview](https://learn.wordpress.org/lesson/create-block-theme-plugin/) 10. 6 lessons 11. a. [ What is a plugin? ](https://learn.wordpress.org/lesson/what-is-a-plugin/) [Preview](https://learn.wordpress.org/lesson/what-is-a-plugin/) b. [ Plugin requirements ](https://learn.wordpress.org/lesson/plugin-requirements/) [Preview](https://learn.wordpress.org/lesson/plugin-requirements/) c. [ Custom post types ](https://learn.wordpress.org/lesson/custom-post-types/) [Preview](https://learn.wordpress.org/lesson/custom-post-types/) d. [ Custom taxonomies ](https://learn.wordpress.org/lesson/custom-taxonomies/) [Preview](https://learn.wordpress.org/lesson/custom-taxonomies/) e. [ Custom post type data ](https://learn.wordpress.org/lesson/custom-post-type-data/) [Preview](https://learn.wordpress.org/lesson/custom-post-type-data/) f. [ Enqueuing CSS or JavaScript ](https://learn.wordpress.org/lesson/enqueuing-css-or-javascript/) [Preview](https://learn.wordpress.org/lesson/enqueuing-css-or-javascript/) 12. 6 lessons 13. a. [ Setting up your block development environment ](https://learn.wordpress.org/lesson/setting-up-your-block-development-environment/) [Preview](https://learn.wordpress.org/lesson/setting-up-your-block-development-environment/) b. [ Scaffolding a new block ](https://learn.wordpress.org/lesson/scaffolding-a-new-block/) [Preview](https://learn.wordpress.org/lesson/scaffolding-a-new-block/) c. [ Building your first block ](https://learn.wordpress.org/lesson/building-your-first-block/) [Preview](https://learn.wordpress.org/lesson/building-your-first-block/) d. [ Block functionality ](https://learn.wordpress.org/lesson/block-functionality/) [Preview](https://learn.wordpress.org/lesson/block-functionality/) e. [ Block attributes ](https://learn.wordpress.org/lesson/block-attributes-2/) [Preview](https://learn.wordpress.org/lesson/block-attributes-2/) f. [ Block supports and styles ](https://learn.wordpress.org/lesson/block-supports-and-styles/) [Preview](https://learn.wordpress.org/lesson/block-supports-and-styles/) g. [ Static vs dynamic blocks ](https://learn.wordpress.org/lesson/static-vs-dynamic-blocks/) [Preview](https://learn.wordpress.org/lesson/static-vs-dynamic-blocks/) 14. 7 lessons 15. a. [ The WordPress REST API ](https://learn.wordpress.org/lesson/the-wordpress-rest-api/) [Preview](https://learn.wordpress.org/lesson/the-wordpress-rest-api/) b. [ Using the WordPress REST API ](https://learn.wordpress.org/lesson/using-the-wordpress-rest-api/) [Preview](https://learn.wordpress.org/lesson/using-the-wordpress-rest-api/) c. [ Interacting with the WordPress REST API ](https://learn.wordpress.org/lesson/interacting-with-the-wordpress-rest-api/) [Preview](https://learn.wordpress.org/lesson/interacting-with-the-wordpress-rest-api/) d. [ Extending the WordPress REST API ](https://learn.wordpress.org/lesson/extending-the-wordpress-rest-api/) [Preview](https://learn.wordpress.org/lesson/extending-the-wordpress-rest-api/) 16. 4 lessons 17. a. [ Securely developing plugins and themes ](https://learn.wordpress.org/lesson/securely-developing-plugins-and-themes/) [Preview](https://learn.wordpress.org/lesson/securely-developing-plugins-and-themes/) b. [ Fixing common security vulnerabilities ](https://learn.wordpress.org/lesson/fixing-common-security-vulnerabilities/) [Preview](https://learn.wordpress.org/lesson/fixing-common-security-vulnerabilities/) c. [ Tools to detect security vulnerabilities ](https://learn.wordpress.org/lesson/tools-to-detect-security-vulnerabilities/) [Preview](https://learn.wordpress.org/lesson/tools-to-detect-security-vulnerabilities/) 18. 3 lessons 19. a. [ What is Internationalization? ](https://learn.wordpress.org/lesson/what-is-internationalization/) [Preview](https://learn.wordpress.org/lesson/what-is-internationalization/) b. [ The commonly used Internationalization functions ](https://learn.wordpress.org/lesson/the-commonly-used-internationalization-functions/) [Preview](https://learn.wordpress.org/lesson/the-commonly-used-internationalization-functions/) 20. 2 lessons 21. a. [ Setting up a WordPress multisite network ](https://learn.wordpress.org/lesson/setting-up-a-wordpress-multisite-network/) [Preview](https://learn.wordpress.org/lesson/setting-up-a-wordpress-multisite-network/) b. [ Managing a WordPress multisite network ](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network/) [Preview](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network/) c. [ Advanced multisite management ](https://learn.wordpress.org/lesson/advanced-multisite-management/) [Preview](https://learn.wordpress.org/lesson/advanced-multisite-management/) d. [ Developing for a multisite network ](https://learn.wordpress.org/lesson/developing-for-a-multisite-network/) [Preview](https://learn.wordpress.org/lesson/developing-for-a-multisite-network/) e. [ Building plugins and themes that support multisite ](https://learn.wordpress.org/lesson/building-plugins-and-themes-that-support-multisite/) [Preview](https://learn.wordpress.org/lesson/building-plugins-and-themes-that-support-multisite/) 22. 5 lessons 23. a. [ The built-in WordPress debugging options ](https://learn.wordpress.org/lesson/the-built-in-wordpress-debugging-options/) [Preview](https://learn.wordpress.org/lesson/the-built-in-wordpress-debugging-options/) b. [ Examining the state of your PHP code ](https://learn.wordpress.org/lesson/examining-the-state-of-your-php-code/) [Preview](https://learn.wordpress.org/lesson/examining-the-state-of-your-php-code/) c. [ Examining the state of your JavaScript code ](https://learn.wordpress.org/lesson/examining-the-state-of-your-javascript-code/) [Preview](https://learn.wordpress.org/lesson/examining-the-state-of-your-javascript-code/) d. [ Useful debugging plugins ](https://learn.wordpress.org/lesson/useful-debugging-plugins/) [Preview](https://learn.wordpress.org/lesson/useful-debugging-plugins/) 24. 4 lessons 25. a. [ Quiz time ](https://learn.wordpress.org/lesson/quiz-time/) 26. 1 lesson, 1 quiz 27. a. [ Time to test your skills ](https://learn.wordpress.org/lesson/time-to-test-your-skills/) 28. 1 lesson, 1 quiz 29. a. [ Test your knowledge ](https://learn.wordpress.org/lesson/test-your-knowledge/) 30. 1 lesson, 1 quiz ### An introduction to developing WordPress plugins # Enqueuing CSS or JavaScript Because plugins don’t control the look and feel of a WordPress site, if you need to make use of custom CSS or JavaScript, you need to follow a process called enqueuing. In order to add custom CSS or JavaScript, a WordPress plugin needs a way to add script or style tags to the HTML being rendered at any time. Fortunately, WordPress allows plugin developers to enqueue their plugin CSS or JavaScript, so that it is added in the right place in the HTML of any post or page request. In this lesson, you’ll learn how to enqueue custom CSS and JavaScript, on either the front end or the admin dashboard. ## Enqueuing CSS As with most WordPress functionality, to start you need to register a callback function on a specific hook and use the callback to enqueue your scripts or styles. The correct hook to use is the [wp_enqueue_scripts](https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/) action hook. As you can see from the documentation, despite the hook’s name, it is used for enqueuing both scripts and styles. So start by registering the callback to the hook, and creating the callback function. ```php add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' ); function bookstore_enqueue_scripts() { } ``` You can now enqueue your custom CSS or JavaScript. Let’s target the Book title on any given book on the front end and make it red. Go ahead and create an empty `bookstore.css` file in your bookstore plugin directory to be enqueued by your plugin. Inside that file, add the following code: ```language-css .single-book h1 { color: red; } ``` Any time a single book is rendered, it will add the `single-book` class to the body element of the HTML page, and so this code will change the color of any `h1` tag inside the body tag to red. Now that you’ve created the CSS file, you need to enqueue it inside the `bookstore_enqueue_scripts()` function. You do this using the wp_enqueue_style [function](https://developer.wordpress.org/reference/functions/wp_enqueue_style/). At minimum, you need to pass at least the first two arguments to the function * the handle, a unique name for the stylesheet that’s used when the stylesheet is added to the HTML * the src, which is the full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. For a plugin, you can use the `plugins_url` function to get the URL of the plugins directory, and then concatenate that with the path to your CSS file. ```php add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' ); function bookstore_enqueue_scripts() { wp_enqueue_style( 'bookstore-style', plugins_url() . '/bookstore/bookstore.css' ); } ``` During a WordPress request, this will add the stylesheet handle and URL to a `wp_styles` object. When the HTML to be rendered is generated, and WordPress is ready to output the ` head` tag, it will loop through each stylesheet in the wp_styles object, and output an HTML style element, applying the handle as the element’s id attribute, and the src as the element’s href attribute. With this CSS file enqueued, go ahead and browse to the single book view of any book you’ve added, and you should notice that the h1 element is red. ## Enqueuing JavaScript You can also enqueue JavaScript files from your plugin, using the same wp_enqueue_scripts action hook callback. The only difference is that instead of using wp_enqueue_style, you can use wp_enqueue_script Similar to wp_enqueue_style, you pass a unique handle and src arguments to wp_enqueue_script for it to enqueue your JavaScript file. First, create a bookstore.js file in the bookstore directory, and add a simple JavaScript alert to it. ```javascript alert('Hello from the book store'); ``` Now, update the bookstore_enqueue_scripts to enqueue the bookstore.js file using wp_enqueue_script. ```php add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' ); function bookstore_enqueue_scripts() { wp_enqueue_style( 'bookstore-style', plugins_url() . '/bookstore/bookstore.css' ); wp_enqueue_script( 'bookstore-script', plugins_url() . '/bookstore/bookstore.js' ); } ``` As with stylesheets, wp_enqueue_script will add the script handle and URL to a wp_scripts object, and output an HTML script element for each one, using the handle in the id attribute and the URL in the src attribute. With this script enqueued, browse to the single book view of any book you’ve added, and you should see the alert pop up on the page. ## Enqueuing on the admin dashboard You can also enqueue styles and scripts on the admin dashboard, using the admin_enqueue_scripts [action](https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/) instead of the wp_enqueue_scripts action. ```php add_action( 'admin_enqueue_scripts', 'bookstore_admin_enqueue_scripts' ); function bookstore_admin_enqueue_scripts() { } ``` Once you’ve registered the callback function on the hook, the process of enqueuing scripts and styles is the same as for the front end using wp_enqueue_style and wp_enqueue_script. ## Selective Enqueuing In the examples in the lesson, the bookstore CSS and JavaScript is enqueued on every page of the site. This is not ideal. In the case of the CSS for example, it’s specifically targeting h1 elements on the single book view, so you don’t need to enqueue the CSS for anything other than books. It is possible to perform selective enqueuing, where you determine the specific scenario when the file should be enqueued. For example, in the case of the bookstore.css, you could use the WordPress `is_singular()` [function](https://developer.wordpress.org/reference/functions/is_singular/) to check if the content being rendered is a book custom post type. If it isn’t, then exit the function and don’t enqueue the stylesheet or script file. ```php add_action( 'wp_enqueue_scripts', 'bookstore_enqueue_scripts' ); function bookstore_enqueue_scripts() { if ( ! is_singular( 'book' ) ) { return; } wp_enqueue_style( 'bookstore-style', plugins_url() . '/bookstore/bookstore.css' ); wp_enqueue_script( 'bookstore-script', plugins_url() . '/bookstore/bookstore.js' ); } ``` There are a number of other ways to make sure that your plugin stylesheet or script files are only loaded when needed. Doing this means that your plugin won’t add any unnecessary overhead or loading times to any WordPress site it’s installed on. This is a preview lesson Register or sign in to take this lesson. [ Take course ](https://learn.wordpress.org/course/beginner-wordpress-developer/) [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fenqueuing-css-or-javascript%2F&locale=en_US) ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).