I need to run wp_enqueue on javascript files after the DOM has been populated because I need to target a div.


I am trying to add the following three scripts:

wp_enqueue_script('react_js', '/scripts/react.min.js' );
wp_enqueue_script('startReact_js', '/scripts/test.js', array('react_js'), '', true);
wp_enqueue_script('app_js', '/scripts//App.js', array('startReact_js'), '', true);

The first one will load in the react source code, the second script will create a div on the page for the most parent react component to render in, and the last script will load the most parent react component into said div.

I need the page to load before running the last script b/c React needs a DOM element to render into BUT I can't figure out how to load the script in the footer.

I can successfully add the script to the header. I have read that there is a $in_footer parameter. Every time I try adding my javascript to the footer using the $in_footer param, it disappears entirely from the DOM. Any thoughts?

@Blaine I tried adding the enqueue scripts to my functions.php per your example but I got the white screen of death.

function addScriptsForEducatePage(){
        wp_enqueue_script('react_js', '/scripts/react.min.js' );
        wp_enqueue_script('startReact_js', '/scripts/pages/test.js', array('react_js'), '', true);
        wp_enqueue_script('app_js', '/scripts/pages/build/App.js', array('startReact_js'), '', true );
add_action('wp_enqueue_scripts', 'addScriptsForEducatePage')

Any thoughts?

  • 1
    Where is the enqueue code? – s_ha_dum Nov 10 '15 at 1:55
  • Where do you get page_id? For one, PHP variables should start with $ – czerspalace Nov 10 '15 at 18:23
  • Try is_page( 5274 ) instead of page_id. You're also missing a semicolon after add_action(). With those aside, your code snippet works for me. – Blaine Nov 10 '15 at 19:18
  • Does your theme call the wp_footer() function in the footer? – Milo Nov 10 '15 at 21:32
  • @Milo you're right, I didn't have that (see more below) – Jake.JS Nov 10 '15 at 21:47

Have you looked at wp_enqueue_script in the WordPress codex? You'll most likely need to add this to functions.php in your theme's directory.

Also, where are you enqueuing the startapp_js dependency?

function prefix_enqueue_scripts() {
    wp_enqueue_script( 'startapp-js', get_template_directory_uri() . '/scripts/Startapp.js', array(), '', true ); 
    wp_enqueue_script( 'app-js', get_template_directory_uri() . '/scripts/App.js', array( 'startapp-js' ), '', true );
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );

I got it! The footer parameter was not working because I did not have a <?php wp_footer(); ?> at the bottom of the page. We were using the footer <?php get_footer(); ?> which apparently works differently. I got the answer from the following post Can't enqueue scripts in the footer?.

I was able to keep the enqueue scripts in the original php page so there was no need for putting it in functions.php although I'm sure it would work.

Big thanks everyone who helped out!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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