Can't seem to get javascript code working from child theme

Question

my javascript code isn't working. I put the js folder next to the other folders, the astra-child folder, astra folder and other themes. Is this correct. Then in the js folder, I created custom_script.js file and put the javascript in there. And in functions.php file enqueued it.

<?php
/**
 * Astra Child Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Astra Child
 * @since 1.0.0
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {

    wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

}

function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
);
add_action( 'wp_enqueue_scripts', 'my_scripts_method');

}

Answer 1

As I said, you have a few problems with this code.

1. closing bracket } for no reason.
2. a extra , in the wp_enqueue_script at the end
3. add_action( 'wp_enqueue_scripts', 'my_scripts_method'); is inside my_scripts_method function

This is your current code with some formating and comments to show the problematic code sections.

<?php
/**
 * Astra Child Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Astra Child
 * @since 1.0.0
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {
    wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

// this closing bracket is not needed
}

function my_scripts_method() {
    // this functions contains , at the end, not needed
    wp_enqueue_script('custom-script',get_stylesheet_directory_uri() . '/js/custom_script.js',);
    // this add_action cannot be inside its own  the callback function
    add_action( 'wp_enqueue_scripts', 'my_scripts_method');
}

This is the corrected code.

<?php
/**
 * Astra Child Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Astra Child
 * @since 1.0.0
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {
    wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

function my_scripts_method() {
    // this functions contains , at the end, not needed
    wp_enqueue_script('custom-script',get_stylesheet_directory_uri() . '/js/custom_script.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method');

Answer 2

There's no need to create function my_scripts_method() just call your script from child_enqueue_styles() function, like you did with your style.css file, but using wp_enqueue_script. As you can see from add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 ); it's for both - scripts and styles.

Tested & working example:

 /**
  * Define Constants
  */
 define( 'CHILD_THEME_TORRCH_VERSION', '1.0.0' );

 /**
  * Enqueue styles & scripts
  */
 function child_enqueue_styles() {

     wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . 'style.css', array('astra-theme-css'), CHILD_THEME_TORRCH_VERSION, 'all' );

     wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array(), CHILD_THEME_TORRCH_VERSION, true );
 }
 add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );