
However, they usually provide you with more configuration options.įor instance, the Simple Custom CSS and JS plugin lets you define the for your custom JavaScript files, save them into the wp-content/ folder, manage your scripts as a custom post type, and more. These plugins are very similar to header and footer editing plugins, and most of them also use the wp_head and wp_footer action hooks. Plugins for Adding Custom JavaScriptĪnother option is to opt for a plugin that allows you to add custom JavaScript to your WordPress site. Besides, you can also use this plugin to add custom CSS to your header template-you only need to enclose it with the tag (note that CSS should always be added to the header). You need to enclose your scripts with the tag. You can insert any kind of script into the two input fields. It adds your scripts to either the wp_head or the wp_footer action hooks. It has a simple user interface with just two text areas-one for the header and one for the footer scripts. Insert Headers and Footers is a good example of a plugin that allows you to edit header and footer templates. Typically, when your script modifies an element displayed on your page, such as an image gallery script, it should be placed into the footer. If you want to add scripts that load before the page content, such as analytics and tracking scripts, you need to edit the header template, while scripts that load after the content go into the footer template. The first option is to use a plugin that lets you edit the header and footer template files of your WordPress theme. Plugins for Editing header.php and footer.php You can use different kinds of plugins to add custom JavaScript to your WordPress site.

Using a plugin is the recommended method when you: Use a Plugin to Add Custom JavaScript to WordPress

So never add a line like the following line to your header.php or footer.php file (even if you could technically do it): 1. Instead, you should use one of the techniques detailed in this article. If you insert your custom JavaScript directly into your header or footer template, it might cause conflicts with your theme, plugins running on your site, or the WordPress core. This is because WordPress has a specific loading sequence that should be respected under any circumstances. the wp_enqueue_script() WordPress functionĮven though the easiest way to add a custom script to your WordPress site is by dropping a tag directly into either your header.php or footer.php template file, you should never do so.the wp_enqueue_scripts , admin_enqueue_scripts , and login_enqueue_scripts action hooks.Or you can use WordPress functions and hooks in the functions.php file: script-specific plugins for adding and configuring third-party scripts such as Google Analytics or AdSenseĢ.
#Enqueue javascript code#
plugins for adding custom JS code to WordPress.plugins for editing the header and footer templates.You can use different types of plugins to add custom JavaScript to WordPress: We will have a look at both options in detail, but here's a short summary.ġ. To add custom JavaScript to your WordPress site, you need to either use a plugin or edit your (child) theme's functions.php file.

While you can use WordPress's built-in Customizer to add custom CSS to your theme, you can't do the same with JavaScript.
