How to enqueue an external Javascript file to Frontpage footer

Question

I am trying to add an external Javascript file from my plugin. My code is -

<?php 
/******
 * 
 * Plugin Name: Image Zoom
 * Author: Kallol Das   
 * Description: This plugin will zoom an image of WordPress posts.
 * version: 1.0
 * 
 *******/

 function zoom_image_main_js_init(){

 wp_enqueue_script('zoom-script', plugins_url('/js/zoom-script.js', __FILE__), array('jquery'), 1.0, true);

 }

add_action('init', 'zoom_image_main_js_init');

Now the problem is It's only enqueuing in admin footer But not in Frontpage footer. So, how to do that?

Answer 1

Instead of init use wp_enqueue_scripts, which is used to enqueue styles and scripts in front-end.

Also, for backend enqueue use admin_enqueue_scripts.

Answer 2

Check this below code-

function zoom_image_main_js_init() {
    if( is_front_page() || is_home() ) {
        wp_enqueue_script('zoom-script', plugins_url('/js/zoom-script.js', __FILE__), array('jquery'), 1.0, true);
    }
}
add_action( 'wp_enqueue_scripts', 'zoom_image_main_js_init' );

Here I'm hooking zoom_image_main_js_init function to wp_enqueue_scripts and inside zoom_image_main_js_init function I'm checking if it is front page or not by calling is_front_page() function inside if condition.

Hope that helps.