For the final step, go ahead and open the 'World Clocks' widget, found in System UI > Widgets.

In the past, the new clocks would only render when this script was updated, so I would copy and paste the same script that appears in the script field over it and save. That seemed to do the trick, it may have just been a caching issue, now that I am reading what I was doing. :)

...Anyway, I will provide the script here, then do some testing and possibly update this later today.

Replace the script in the 'World Clocks' Widgets script field with this:

function sections() {
    return {
      'World Clocks' : { 'name' : 'example_cool_clock' }
    };
}
 
function render() {
  var name = renderer.getPreferences().get("name")
  var gf = new GlideForm(renderer.getGC(), name, 0);
  gf.setDirect(true);
  gf.setRenderProperties(renderer.getRenderProperties());
  return gf.getRenderedPage();
}
 
function getEditLink() {
  return "sys_ui_page.do?sysparm_query=name=" + renderer.getPreferences().get("name");
}

Make sure you test this in several browsers, as different browsers will display things differently.

Hope this helps!