1

Okay, so I'm well familiar with the way to properly enqueue a stylesheet or JavaScript in the WordPress header via the functions.php file.

Recently though I came across a situation that has me puzzled. I want to setup this script on my WordPress site: customize-twitter-1.1.

First I need to embed the Twitter JavaScript in my footer which is this code here:

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
    js.src="//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>

Then I need to embed this JavaScript in the footer as well:

<script src="customize-twitter-1.1.min.js" type="text/javascript"></script>

Last but not least, I need to embed this code as well...

<script>
 var options = {
    "url": "/my-styles.css"
 };
 CustomizeTwitterWidget(options);
</script>

So far the code I've added to my functions.php file looks like this...

wp_register_script( 'twitter-customize', get_template_directory_uri() . '/js/customize-twitter-1.1.min.js', array(), '1.0', true );

wp_enqueue_script( 'twitter-customize' );

That code correctly enqueues one of the JavaScript files, I'm just unsure how I go about adding the others and on top of that adding them to the footer as well.

Any input is appreciated, thanks guys!

0

First, create a static js file with those inline codes..

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
    js.src="//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");

 var options = {
    "url": "/my-styles.css"
 };
 CustomizeTwitterWidget(options);

Then enqueue it at footer as the dependent of twitter-customize script which you already enqueued.

function my_footer_enqueue() {

    wp_register_script( 'twitter-customize', get_template_directory_uri() . '/js/customize-twitter-1.1.min.js', array(), '1.0', true );
    wp_enqueue_script( 'twitter-customize' );
    wp_enqueue_script( 'twitter-customize-custom', get_template_directory_uri() . '/js/twitter-customize-custom.min.js', array('twitter-customize'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_footer_enqueue' );

That's all. Clean and easy way.

  • PERFECT! Now that I look at your code it was much easier than I thought it would be. Thanks so much for your help! – DigitalSky Aug 26 '14 at 5:31
2

Following code can be used to add script in footer BUT I should mention here that this is not the recommended way in WordPress.

add_action( 'wp_footer', 'custom_footer_script', 100 );
function custom_footer_script(){
  ?>
  <script>
  // your script
  </script>
  <?php
}

Alternative:

Have to tried creating separate script file adding your custom code and queuing in WP way?

  • I haven't tried that but I could see how it would work. I guess I'm just trying to figure out what the proper WordPress way is for adding a script to your footer. Trying to be as by the book as possible I suppose. – DigitalSky Aug 26 '14 at 4:03
0
add_action( 'wp_enqueue_scripts', 'load_scripts ');

function load_scripts() {

    if ( !is_admin() ) {

        wp_enqueue_script( 'jquery' );

        wp_register_script( 'twitter-customize', get_bloginfo( 'template_directory' ) .'/js/customize-twitter-1.1.min.js', array( 'jquery' ), '1.0', true );
        wp_enqueue_script( 'twitter-customize' );

    }
}
  • Unfortunately this doesn't answer what I was asking. That enqueues the script but it doesn't include the Javascript snippets in the footer. – DigitalSky Aug 26 '14 at 3:10

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.