Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Paul Yorde
Paul Yorde
10,497 Points

use a javascript in wordpress plugin

Can I add a custom javascript to my php function by using wp_enqueue_script? Basically, when my function gets called, I want it to enqueue the script and send it to the wp_footer content section. See code snippet below:

if(get_option('show_content')) { 

    function add_time() {
        echo '<div id="txt">' . '</div>';
        // add script tut pro word plugin dev ch12.3
        function py_enqueue_script () {

            wp_register_script( 'timescript', plugin_url('../time.js', __FILE__));
            wp_enqueue_script( 'timescript'); 

        } // end py_enqueue_script
        add_action('wp_enqueue_scripts', py_enqueue_script);

    } // end show add_time

    add_action("wp_footer",add_time);

} // end if

1 Answer

Yes. You can :)

If you have a look at wp_register_script() on the Codex, you can see the last param of the function is $in_footer, if you set this to true the script will load in the footer rather than the header. So that's how you'll get it to be in the footer.

You don't need to nest the py_enqueue_script function inside the add_time function. In actually, fact I think that might cause you problems because the wp_enqueue_scripts action won't get called until wp_footer. You'd be better off taking it out of add_time. The final script would look something like the following. This will only work IF this code is called before wp_footer()

Also, I've noticed the function names you have given to the add_action function are missing quotes. These must be strings (or an array when working with classes).

<?php
if(get_option('show_content')) { 

    function py_enqueue_script () {
        // Note, check the link in the above text to see what the extra params do
        wp_register_script( 'timescript', plugin_url('../time.js', __FILE__), null, null, true);
        wp_enqueue_script( 'timescript'); 
    } // end py_enqueue_script
    add_action('wp_enqueue_scripts','py_enqueue_script');

    function add_time() {
        echo '<div id="txt">' . '</div>';
        // add script tut pro word plugin dev ch12.3
    } // end show add_time
    add_action("wp_footer",'add_time');

} // end if
Paul Yorde
Paul Yorde
10,497 Points

Thanks, that gets the script there. However, the script is not getting executed. This script should be inserting a running clock into the 'txt' div.

This script works when I run it-body onload in a regular html doc. I've set it up here to run automatically when it gets called, but alas, the 'txt' div remains empty.

The script:

(function() {

    function myTime() {
          var today=new Date();
          var h=today.getHours();
          var m=today.getMinutes();
          var s=today.getSeconds();
          // add a zero in front of numbers<10
          m=checkTime(m);
          s=checkTime(s);
          document.getElementById('txt').innerHTML=h+":"+m+":"+s;
          t=setTimeout(function(){startTime()},500);
          }

          function checkTime(i) {

          if (i<10)
            {
            i="0" + i;
            }
          return i;

         }

})();    
Paul Yorde
Paul Yorde
10,497 Points

OK, got it working. Cheers mate ~