1

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

EDIT

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(){
    if(is_page(5274)){
        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 );
    }
    return;
}
add_action('wp_enqueue_scripts', 'addScriptsForEducatePage')

Any thoughts?

5
  • 1
    Where is the enqueue code?
    – s_ha_dum
    Nov 10, 2015 at 1:55
  • Where do you get page_id? For one, PHP variables should start with $ Nov 10, 2015 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, 2015 at 19:18
  • Does your theme call the wp_footer() function in the footer?
    – Milo
    Nov 10, 2015 at 21:32
  • @Milo you're right, I didn't have that (see more below)
    – Jake.JS
    Nov 10, 2015 at 21:47

2 Answers 2

1

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

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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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