Home > WordPress > How to Add jQuery Script to WordPress?

How to Add jQuery Script to WordPress?

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

The wp_enqueue_script() function use for enqueue the script in wordpress and the our jQuery or JavaScript code. We can insert the script code in Header or Footer of wordpress with passing the parameter in this 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 <footer> tag.

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.

Relation:
=> 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.

Using Header and Footer File

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 <script> tag.

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.

Install this plugin and activate it. And follow the below steps one by one to add custom jQuery or JavaScript code into the website.

jQuery Script to WordPress

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 3: And Add your custom jQuery or JavaScript code to the editor section. If you found any default comment or code then remove it and your own.

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!

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment