How do I add a simple jQuery script to WordPress

How do I add a simple jQuery script to WordPress? This is one of the questions many WordPress site owners are searching for answers. If you are one of them, I have shared a quick tutorial that I hope will answer any of the questions you might have about adding jQuery script to WordPress.

Here’s how I do it

Step 1: The first step is to make a new JavaScript file and put it in the desired theme folder. To do this, just go to your WordPress theme folder and create a subfolder and name it ‘js’. Add a file in the subfolder and then name it custom_scripts.js. Below is an example of the jQuery script that could go into this file.

jQuery(document).ready(function($){
    $('#nav a').1ast().addClass('1ast');
});

If you are familiar with jQuery, you may be asking why there is no $ sign at the beginning. In fact, the reason you are not seeing the dollar sign is because jQuery is variable name. jQuery is used instead of $ to avoid any conflicts with the WordPress theme.

Step 2: The next step is to add the custom_scripts.js into your theme’s functions.php file. If you are creating a theme from scratch or using a child theme, chances are there is no functions.php file in your theme. So you need to add it to your theme.

To add your custom_scripts.js file, just open your theme’s functions.php file. Then copy and paste the code below into the functions.php file. You can also add the file using the wp_enqueue_script() function.

The code to add is:

add_action( 'wp_enqueue_scripts', 'add_my_script');
function add_my_script(){
//name your script to attach other scripts and de-register, etc.
wp_enqueue_script{
'new',
get_template_directory_uri() . '/js/add_my_script.js',
array('jquery') // this array lists the scripts upon which your script depend
);
}

If your theme has wp_footer and wp_head files, the jQuery script will be added in the header and footer sections. The only area where the script will not be loaded is in the admin pages.

Adding jQuery script to the WordPress Admin

Now it is time to add the jQuery script to the WordPress Admin. The process is quite simple and straightforward. All you need is to copy and add the code below into your theme’s functions.php file.

function my_admin_scripts(){
wp_enqueue_script( 'my-great-script', plugin_dir_url(FILE__ ) . '/js/my-great-script.js', array('jquery'), '1.0.0', true );
}

add_action( ‘admin_enqueue_scripts', 'my_admin_scripts' );

As you may have noticed, the code for adding jQuery script to the WordPress Admin is almost the same as the one used previously.

If you still need help on how to add a simple jQuery script to WordPress or any other WordPress related questions, just feel free to let me know. I will be happy to help you.

Recent Articles

How to Get WordPress Post Featured Image URL

Are you a WordPress developer or an advanced WordPress user? Whoever you are, sometimes you may need the direct URL of a...

How to Bulk Delete Media in WordPress

WordPress and media. That's the topic for a book. Sometimes is not easy to find what you need and when you have...

Custom Order Number for WooCommerce Will Saves You a Lot of Hassle!

WordPress is still the king of Content Management Systems (CMS). Thanks to its open-source nature, millions upon millions of users and PHP...

How to Manually Sort WooCommerce Products

WooCommerce is an e-commerce plugin for WordPress. It is a great way for the user to create an online store for their...

How to Delete All WooCommerce Products

Remove all WooCommerce products is a good thing, especially when you have got thousands of products and need to make your site...

Get in touch

Be our first-class reader, build a community and follow us on social media!

Leave A Reply

Please enter your comment!
Please enter your name here