![]() ![]() If you want to know more detail about enqueueing both JavaScript files and CSS stylesheets in WordPress, read our full-length article on the topic.Plugin_dir_url(_FILE_).'quick-guide.js'Īnd that’s how to add a JavaScript file in WordPress! Since it can be helpful to see all the code at once, here’s the final version of our custom plugin’s code: add_action('wp_enqueue_scripts', 'qg_enqueue') How To Use wp_enqueue_script() to Add JavaScript to Each Page on Your WordPress Site: Full Code Example (If you’re working in a theme, get_stylesheet_directory_uri() is a similarly helpful function for getting to the root of the running theme.) Then the last piece, quick-guide.js, is where you need to go (folder and filename) relative to the root directory you established with plugin_dir_url(). If you’re working in a plugin, as in our example, using plugin_dir_url() with the magic _FILE_ constant is the easiest and most common way to get to the plugin’s root folder. Your wp_enqueue_script() call will be specific to your JavaScript file’s “shorthand name,” file location, and filename.Wp_enqueue_script('qgjs', plugin_dir_url(_FILE_).'quick-guide.js'). Add a body to the function which actually registers and enqueues your script, using wp_enqueue_script().Create that function qg_enqueue() with a basic function qg_enqueue() expression.Don’t save yet, because saving without having written the qg_enqueue() function itself will temporarily “break” your site. Write the line add_action('wp_enqueue_scripts', 'qg_enqueue').(If you’re trying to do this for a theme, you’d put the following code in your functions.php file.) If not, check out our primer on making a WordPress plugin. You’re going to be writing PHP, and we’re going to assume you’ve got a custom plugin set up to do this in.If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.And here’s the text version of that same guide for how to use wp_enqueue_script() in WordPress… How To Use wp_enqueue_script() to Add JavaScript to Each Page on Your WordPress Site You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. ![]() In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. Wp_enqueue_scripts hook – Front End function themeslug_enqueue_style () WordPress takes care of these problems when you use the hooks intended.Īn example of the three enqueuing hooks are below: ![]() This can cause conflicts with other scripts, plugins or themes. When you don’t enqueue scripts using these hooks and instead use the tag, it can cause the script to be loaded every time you load the site, admin area or login page. This allows WordPress to load only the scripts needed for that specific section. For example, if a script was enqueued using the login_enqueue_scripts hook that script would not be loaded in the admin area. There are three different areas that a developer can enqueue scripts for the first is the client side, the second is the admin side and the third is the login pages.Įach of these areas uses a specific hook to enqueue scripts to use in that area. This can be a really confusing process for new WordPress developers. ![]() In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |