wp_enqueue_script - file path in rendered page source code missing "/"

Question

I am trying to add javascript to the footer of a wordpress page using wp_enqueue_script in the functions file of a child theme.

I have never done this before so am a bit of a novice to using wp_enqueue_script but have read a fair few similar posts on the Stackoverflow forum but haven't found anything that resolves my issue, which is . . . the file source url is missing a "/" between the get_theme_file_uri() part of the path and the remaining folderstructure.

I have inserted this code into the functions file:

function theme_enqueue_scripts() {
wp_enqueue_script( 'reactionform_js', get_stylesheet_directory_uri() . 'includes/js/reactionform_js.js');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

.

However, when i look at the source code on the rendered page the file path is <script type='text/javascript' src='https://www.futureproofpromotions.com/wp-content/themes/Avada-Child-Themeincludes/js/reactionform_js.js?ver=5.2.4'></script> which is missing the / between the theme's root folder Avada-Child-Theme & the includes folder? FYI The error message on Chrome developer tools says: Failed to load resource: the server responded with a status of 404 (Not Found)

I have also tried get_theme_file_uri() as opposed to get_stylesheet_directory_uri() but no luck! I have also tried adding the forward slash (/) like this get_stylesheet_directory_uri() . '/'. 'includes/js/reactionform_js.js' but also no luck.

I would appreciate if anyone could explain how to resolve this issue.

Also . . . as far as I understand, I believe I need to include , '' , '', true after the $scr argument for the javascript to show in the footer instead of the header. However, at the moment when I include those arguments various parts of the page don't load, so have left those out until I at least get the script to load somewhere on the page. Once I have that, I'll add those arguments which hopefully will complete the task.

I am using: Wordpress: v 5.2.4 Avada Theme: v 6.1 php version 7.2.23 MySQL version: 5.5.62

Many thanks

Phil

JP. Aulet · Accepted Answer · 2019-10-26 13:45:21Z

1

This should work for you (I have this config in my theme and it does), try using the get_template_directory_uri() function instead:

wp_enqueue_script( 'reactionform_js', get_template_directory_uri() . '/includes/js/reactionform_js.js', array(), false, true );

with the last param (footer) to true, you could see the function signature:

function wp_enqueue_script( $handle, $src = '', $deps = array(), $ver = false, $in_footer = false ) {

Hope it helps!

answered Oct 26, 2019 at 13:45

JP. Aulet

4,4144 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil Legg Over a year ago

Thx JP - tried your suggestion, but goes to template theme rather than child theme (still with the file path structure missing / between theme folder & Includes folder). Also . . . when including those extra arguments you gave ( , array(), false, true) it moved script to footer but when using get_stylesheet_directory_uri() to get to child theme, other elements on page didn't load as before. This area is new to me but Is it something to do with validating/registering something before you enqueue the script?

Phil Legg Over a year ago

OK, I've managed to sort this now. I discovered that having the minify option ticked on the website's WP 3 Total Cache plugin was stopping the entire functions file in the child theme from working! Once that was switched off - everything worked fine. Thx JP for your help and the additional arguments which work well & place the script in the footer too.

JP. Aulet Over a year ago

Your welcome! Try to update your question with your answer to help others and upvote/close the question if it helped you.

Phil Legg Over a year ago

Solved - in fact the reason the / was missing from the script src url was because the WP 3 Total Cache plugin installed on the same website had the minify option enabled! This seemed to be messing up the src url for both theme_enqueue_scripts() in the child theme's functions.php file and when the minify option was disabled on the WP 3 Total Cache plugin, all enqueueing functions worked fine. Also, just for the record, It didn't mess up the my_custom_head_function_for_avada() function also in the file - that one was OK

Collectives™ on Stack Overflow

wp_enqueue_script - file path in rendered page source code missing "/"

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related