WordPress: hooks into mouse events?

Question

I've spent a few hours on this but I'm not getting anywhere. I'm just starting on Wordpress, and I'd like a simple page where I click on something (a list item) and a textual description appears in a div somewhere else on the same page.

This would be trivial if I was writing plain HTML and JS, but I can't get my head around how to integrate this into WordPress. As far as I can make out, I have to write a plugin, but I can't find any handlers for mouse events in the hooks API. Or should I just hardcode an onclick into the HTML, and find somewhere to put some JavaScript code to handle it? Any advice appreciated...

score 1 · Answer 1 · answered Mar 17 '15 at 11:15

1

Wordpress doesn't have mouse events/hooks. Wordpress hooks apply to the backend only, they are a way to interact with the WP core which is written in PHP (executed on the server, not the client).

Mouse events happen on the client side, so to achieve what you want you should register a Javascript file with wordpress via wp_register_script (http://codex.wordpress.org/Function_Reference/wp_register_script) and add your Javascript behaviour there.

You don't have to write a plugin, just add wp_register_script logic in your functions.php.

answered Mar 17 '15 at 11:15

Vlad Cazacu

1,520
12
12

So I just add an ID to any HTML elements I'm interested in, add JavaScript handlers for those IDs, and completely ignore WordPress, apart from `wp_register_script`? I'll try it, but that's a bit surprising - how do people write interactive plugins? Or maybe they don't? – EML Mar 17 '15 at 11:27
Yes, the behaviour you want is purely client side, so you basically just need Javascript / HTML. In this specific case, you need Wordpress only to serve the HTML and to include the Javascript file, which does the heavy lifting. As for interactive plugins, i don't see how this affects the ability to do that. You can still use AJAX to communicate with the Wordpress backend. – Vlad Cazacu Mar 17 '15 at 11:36

score 0 · Answer 2 · answered Mar 17 '15 at 12:20

Vlad Cazacu is right, we dont have any hooks for javascript events and i am not sure if there is any option in other server side languages as well besides node.js. Anyways you can use jquery in the normal way with registering and enqueing the file. But if you want to have advanced interactivity then there are functions in wordpress that can do that for instance there's this function wp_localize_script, it is used with ajax to grabs the data as a javascript array/object and then converts it into php array/object which is then available to use in wordpress/php.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

In short -

Add an id (and a styling class) to whatever you want a handler for in the HTML
Register handlers in JS, as follows:

function fp_onload_js() {     
  var id = document.getElementById('myID'); 
  id.addEventListener(
    "click",
    function() { myEventListener(); }, 
    false);
}

Register/enqueue the file which contains your JS, in functions.php:

add_action('wp_enqueue_scripts', 'theme_enqueue_stuff');
function theme_enqueue_stuff() {    
  ...
  wp_enqueue_script(
    'myHandle',
    get_template_directory_uri() . '/path_to_my_js_file.js'); 
}

The tricky bit: you have to make sure that the event listener code is run after WordPress has constructed the DOM, after the IDs have been created. You need to run the JS after the page loads (see here). Basically, also in functions.php:

add_action('wp_footer', 'fp_onload_php');
function fp_onload_php() {
   ?>
   <script type="text/javascript">
       fp_onload_js();
   </script>
   <?php
}

And make sure you don't use the 'visual' tab in the WordPress editor - it will mess up your carefully-crafted HTML.

Nope, doesn't work anymore. Copied it verbatim (except removing the ellipsis and putting in the correct path to the js file) and got "Uncaught ReferenceError: fp_onload_js is not defined". On to hour 8 of trying to figure out how to accomplish this incredibly simple, common need... — John Smith, Aug 06 '23 at 06:21
The site that uses this code still works; I've just updated WordPress on it. Sounds like `fp_onload_php` isn't being run. Maybe you don't have a footer to hook it into? I'd check the docs for `add_action` and put in some logging to see what is being run. — EML, Aug 10 '23 at 14:57

WordPress: hooks into mouse events?

3 Answers3