Do you want to run jQuery code on your website but you are not much familiar with WordPress and don’t know where you can add jQuery code? So you are in right place. In this today’s article, we will learn how you can add jQuery script to WordPress. It is very simple and you can do it without getting into any trouble.
Let’s start adding the script to WordPress.
Adding the Script Using the Enqueue Function
Let’s do with an example.
Create a new folder “js” in the active theme folder and open this. I would recommend using a child theme. If you don’t have a child theme and don’t know how to create a child theme then check this article.
Ok, now create a new file in the “js” folder called “script.js“, you can give a different name as you want. In the file add the below jQuery code and save it.
The above code will run the jQuery code when the document is ready and code will add a new class to
Now open your theme’s functions.php file for adding a enqueue function (
wp_enqueue_script() ) to load our new “script.js” file.
See the below code.
=> get_template_directory_uri() : /wp-content/themes/parent-theme
=> get_stylesheet_directory_uri() : /wp-content/themes/child-theme
In the above code, we hit the action hook to insert our script in the footer of the website.
You can also use the header.php and footer.php files of the theme to add script files to the website. And you don’t need to enqueue the function in the functions.php file. Check the below syntax of the
Add the above script line in the header.php file before the
<body> tag and in the
<head> tag OR if you want to load the file in the footer and then this line just before the
</body> tag in the footer.php file.
Note: Make sure your script file path is correct.
Add Script with Plugin
So, above you read how you can add jQuery script to WordPress with enqueue function and using header/footer files.
You know what?
You can also add the jQuery code to the website with the plugin. For this, you need to install a plugin that can insert the script code into the header or footer. There are many plugins that can do these things but I would recommend Simple Custom CSS and JS plugin. With this plugin, you can also add custom CSS and HTML but we will focus on JS script in this article.
Step 1: Click on the Add Custom JS under Custom CSS & JS option at the left sidebar.
Step 2: Give a unique script name in the name field at the top.
Step 4: Select the JS Linking type as internal or external. Learn more about internal or external here.
Step 5: From the Where on page, select the Header or Footer option. Means where do you want to load this file in Header or Footer?
Step 6: Select the option for Where in site. In Frontend mean file will load at frontend, In Admin mean file will load at admin side only, and On Login Page mean file will only load on the login page.
Step 7: After all, the filled and selected options then hit the publish button. It will save the file and load the code on the website. You can check at the frontend, admin, or login page as per your selected that options.
So that’s it. You learned in this article “how to add jQuery script to WordPress?”
Hope you understand! If you face any related to coding please ask me in the comment section, I will help you with that. Thanks! Happy Coding!