JavaScript

Enqueing a script

For the widget form in the admin area

A quick note on how to do it, and a note on running the JS, so that it doesn’t get ran on the html used to create new widget forms, only those in the sidebars on the right.

For the frontend

How to enqueue a widgets scripts and styles, but only if the widget is on the page

Events

Running code when:

A New Widget is Added, or Re-ordered

  • Make use of the ajaxStop event to process javascript when a widget is added or re-ordered
  1. jQuery( document ).ready( function( $ ) {
  2.     function doWidgetStuff() {
  3.         var found = $( '#widgets-right .mywidgetelement' );
  4.         found.each( function( index, value ) {
  5.           // process elements
  6.         } );
  7.     }
  9.     window.counter = 1;
  11.     doWidgetStuff();
  13.     $( document ).ajaxStop( function() {
  14.         doWidgetStuff();
  15.     } );
  16. } );

The widget form opens

  • Some js to show how to do things when the form opens and closes

Further Reading