jQuery UI Dialog Error: this._addClass is not a function

The error Uncaught TypeError: this._addClass is not a function appears when a jQuery UI widget such as Dialog can’t find a method it expects from the jQuery UI core. It usually means the page loads more than one copy of jQuery UI, for example one from your theme and a different version from WordPress or a plugin. The fix is to load a single copy after jQuery and start your jQuery UI code only once the page is ready.

Step 1: load jQuery UI in the footer

Enqueue the library with wp_enqueue_script() from your theme’s functions.php, inside a function hooked to wp_enqueue_scripts.

wp_enqueue_script( 'jquery-ui-script', get_template_directory_uri() . '/js/jquery-ui.min.js', array('jquery'), '1.12.1', true );

• array('jquery') makes WordPress load jQuery first.
• The last argument, true, prints the script in the footer.
• get_template_directory_uri() points to the parent theme. In a child theme, use get_stylesheet_directory_uri() instead (see which theme path function to use).
• '1.12.1' is the version, written as a string in quotes. WordPress adds it to the script URL as ?ver=1.12.1.
• WordPress already registers its own jQuery UI parts under handles such as jquery-ui-dialog. Enqueuing that handle instead of a second full copy is often the simplest way to avoid version clashes.

Step 2: wrap your jQuery UI code

(function($) {
    "use strict";
// A $( document ).ready() block.
$( document ).ready(function() {
//jquery UI code should be here
});
})(jQuery);

WordPress loads jQuery in no-conflict mode, so $ isn’t defined globally, which is also the cause of the TypeError: $ is not a function error. The outer function passes jQuery in as $, and $( document ).ready() waits until the page is parsed, so the elements you turn into a dialog exist when your code runs. Put your .dialog() calls where the comment is, and enqueue this file with jquery-ui-script as a dependency so it always loads after the library.