-1

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');

}
2
  • The problem is that your add_action( 'wp_enqueue_scripts', 'my_scripts_method'); is inside the function my_scripts_method, move it out of the function and it should work. You also seem to have a floating } under add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 ); for no reason, remove it. Commented Dec 19, 2021 at 14:05
  • I have taken the floating } out. What do you mean, that the add action is inside the function. I got this online, how to do it. Do you mean, I must put it on top before the function as follows: add_action( 'wp_enqueue_scripts', 'my_scripts_method', ); wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', ); Commented Dec 20, 2021 at 6:11

2 Answers 2

0

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');
3
  • Thanks, I tried all that, still doesn't show anything. Could you please explain the add_action part. As the corrected code seems to look the same in that part. What must I change in add_action. Commented Dec 20, 2021 at 15:41
  • @SpencerHalstead Have you tried checking the devtools? under network you can see what files are being requested. That can give you a better understanding about what are the paths that being requested. Commented Dec 20, 2021 at 18:30
  • There is nothing there in networks. only says Recording network activity, perform a request or hit ctrl+r to record the reload. I am using local by flyweel on my computer with wordpress, but also haven't been able to get any code to work on my live site either. Commented Dec 20, 2021 at 19:29
0

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 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.