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 a script
or style tag 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 at the right
place in the HTML of any request. In this lesson, you'll learn how to enqueue custom CSS and
JavaScript on either the front end or the admin dashboard. 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 startings. The correct hook to use is the
wp_enque_scripts_action_hook. As you can see from the documentation, despite the hook's name,
it is used for enqueuing both scripts and styles. Let's start by registering the
callback to the hook and creating the callback function. So wp_enque_scripts
and let's call our function bookstore key_scripts. We can use that function.
Ready for character layout. 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 read.
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.
Single book class, and we'll target the h1 tags and we'll make them read.
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 that body tag to read.
Now that you've created the CSS file, you need to enqueue it inside the bookstore
enqueued scripts function. You do this using the wp_enque_style function.
At a minimum, you need to pass in at least the first two arguments for that function.
The handle, which is a unique name for the stylesheet that's used when the stylesheet is
added to the HTML, and the source, which is the full URL to the stylesheet, or a path of
a stylesheet relative to the WordPress root directory. In a plugin, you can use the plugin's
URL function to get the URL of the plugin's directory, and then concatenate that with the
path to your CSS file. Let's call the wp_enque_style function, and we'll give it a handle.
And then we'll call the plugin_url_function,
and concatenate it with the path to the bookstore plugin file and the bookstore.css.
During a WordPress request, this will add the stylesheet handle and the 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 this wp_styles object,
and output an HTML style element. Using the handle is the element's ID attribute,
and the source is the element's href attribute. With the 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 read.
You can also enqueue JavaScript files from your plugin, using the same wp_enque_scripts
action or callback. The only difference is that instead of using wp_enque_style, you use wp_enque_script.
The minute to wp_enque_style, you pass a unique handle and source argument to wp_enque_script
for it to enqueue your JavaScript file. First, create a bookstore.js file in the bookstore directory,
and then add a simple JavaScript alert to it.
Now, update the bookstore enqueue scripts to enqueue the bookstore.js file using wp_enque_script.
wp_enque_script
with a unique handle, and we can use the same
URL, just this time targeting the JavaScript file.
As with style sheets, wp_enque_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 source 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. You can also enqueue
styles and scripts to the admin dashboard, using the admin enqueue_scripts action instead of the
wp_enque_scripts action. Once you've registered the callback function on the hook, the process of
enqueuing scripts and styles is the same as for the frontend, using wp_enque_style and wp_enque_script.
In the examples in this lesson, the bookstore CSS and JavaScript is enqueued on every page request
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, you could use the wordpress is_singular function
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. 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.