mobile logo

add js file in my custom plugin page only in wordpress not other pages

Solution:1

Let’s say you have your plugin running only on a single page called About. So I guess here you need to manually load the js file on that page only and want to take it out of other pages.

Create a page template called page-about.php. At the top put

<?php
/*
Template Name: Plugin JS page
*/

Then copy-paste what’s in your header.php to it, then under that add what’s in your page.php, then under that call get_footer(). Now it exactly replicates the normal page.

Now go and get rid of the js file that is loading in your normal homepage (header.php) and leave it in place on the page-about.php that you just created. (Alternatively, just add the call to the js file in the page-about.php header area you copied.)

Finally, go and edit page About and change its page template to Plugin JS page.

Maybe that helped you.

Solution:2

The WordPress Theme Handbook recommends the wp_enqueue_script() function to add custom scripts to your site. This built-in function respects WordPress’s loading sequence and enqueues your custom scripts in the proper order, so they won’t conflict with other scripts loaded by the WordPress core and plugins running on your site.

With wp_enqueue_script(), you can add your custom JavaScript both to the header and footer templates. By default, it enqueues the scripts in the <head> section of the page loaded by the header template.

If you want to add your script to the header, you only need to define a custom handle ('custom' in the example below) and the path to the script. As you can see below, I’ve also used the get_stylesheet_directory_uri() WordPress function to get the URI of the child theme directory. And the add_action() function adds the custom tutsplus_enqueue_custom_js() function to the wp_enqueue_scripts action hook, which lets you enqueue custom scripts you want to display on the front-end of your site.

1
2
3
4
5
/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

Beware that although the wp_enqueue_script() built-in WordPress function and the wp_enqueue_scripts action hook have almost the same name, they are different things.

Besides enqueuing scripts for the header, you can also use the wp_enqueue_script() function to add custom JavaScript to the footer template. However, in this case, you also need to define all the optional parameters, respectively:

  1. the dependencies: array() as we have no dependencies for now
  2. the version of the script: false as we don’t want to add version numbers
  3. whether this is for the header or footer template: true as we switch to the footer template, which is the non-default option
1
2
3
4
5
6
/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js',
    array(), false, true);
}

If your custom script has dependencies, you need to add them to the array() parameter of the wp_enqueue_script() function. There are a couple of popular scripts and libraries, such as jQuery, that are already registered by the WordPress core, so you can add them using their registered handle ('jquery' in the example below).

1
2
3
4
5
6
/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js',
    array('jquery'), false, true);
}

If you have a dependency that is not registered by WordPress, you need to register and enqueue it with another wp_enqueue_script() function, before you can add it as a dependency using its custom handle.

If you want to run your script in the admin area instead of the front-end of your site, you need to use the admin_enqueue_scripts action hook instead of wp_enqueue_scripts in the add_action() function. And for the login screen, you need to use the login_enqueue_scripts action hook, which enqueues custom scripts only for the login page.