How do I enqueue a JavaScript in my footer via the functions.php file?

Question

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!

Abhik · Accepted Answer · 2014-08-26 04:16:29Z

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
– DigitalSky, Commented Aug 26, 2014 at 5:31

Nilambar Sharma · Accepted Answer · 2014-08-26 04:00:18Z

3

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?

answered Aug 26, 2014 at 4:00

Nilambar Sharma

1,6543 gold badges17 silver badges25 bronze badges

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
– DigitalSky

2014-08-26 04:03:28 +00:00
Commented Aug 26, 2014 at 4:03

Add a comment |

Gazi · Accepted Answer · 2014-08-26 01:14:18Z

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

    }
}

answered Aug 26, 2014 at 1:14

Gazi

1014 bronze badges

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
– DigitalSky

2014-08-26 03:10:08 +00:00
Commented Aug 26, 2014 at 3:10

Add a comment |

Stack Exchange Network

How do I enqueue a JavaScript in my footer via the functions.php file?

3 Answers 3

Your Answer

Hot Network Questions

How do I enqueue a JavaScript in my footer via the functions.php file?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions