Проблема Реализация мастера jQuery с Wordpress

Question

Я пытаюсь разместить на моей странице Wordpress простой мастер перехода по клику, используя код, найденный здесь: https://github.com/kflorence/jquery-wizard

У меня нет опыта работы с jQuery, поэтому любая помощь приветствуется.

Когда я помещаю «мастера» на статическую страницу вне WordPress, он работает совершенно нормально, но как только я добавляю его в пользовательский шаблон страницы, он больше не работает.

Я попытался протянуть jQuery через заголовок и поставить в очередь сценарии через файл functions.php, но каждый раз получаю одну и ту же ошибку в консоли.Я не уверен, является ли это проблемой с другим плагином на моем сайте, или я слишком много раз вызывал jQuery на странице, не осознавая этого, или мне нужно изменить код, чтобы он правильно работал в CMS.

functions.php :

function woodhouse_theme_styles()  { 
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'flexslider_css', get_template_directory_uri() . '/css/style.css' );

    wp_enqueue_script('wizard', get_template_directory_uri() . '/js/jquery.wizard.js', array( 'jquery' ), '1.1.3', true);

}
add_action('wp_enqueue_scripts', 'woodhouse_theme_styles');

/// IF Я вызываю сценарии в моем заголовке, а не functions.php,Я использую это:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ui/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.wizard.js"></script>

wizard :

<div id="wizard">
        <h3>Wizard Title</h3>
        <form name="wizard"> 
             <div class="step">
                  <p>This is a branching wizard. You will see different steps depending on your answers.</p>
             </div>

             <div class="step" data-state="color">
                    <p>Which color do you like best?</p>
                        <label for="colorPink"><input type="radio" name="color" value="pink" id="colorPink" />Pink</label>
                        <label for="colorBlue"><input type="radio" name="color" value="blue" id="colorBlue" />Blue</label>
             </div>

            <div class="branch" id="pink">
                 <div class="step" data-state="end">
                        <p>Pink, it was love at first sight</p>
                 </div>
            </div>

            <div class="branch" id="blue">
                  <div class="step" id="blue-1" data-state="blue-2">
                        <p>I'm blue da ba dee da ba die...</p>
                  </div>
            <div class="step" id="blue-2" data-state="blue-3">
            <p>blue 2</p>
            </div>

             <div class="step" id="blue-3" data-state="weather-branch">
                   <p>blue 3</p>
             </div>

</div>

<div class="step" id="animals">
      <p>Animals are important</p>
</div>

<div class="step" id="weather-branch" data-state="weather">
        <p>What is your favorite weather?</p>
        <label><input type="radio" name="weather" value="sunny" id="colorPink" />Sunny</label>
        <label><input type="radio" name="weather" value="rain" id="colorBlue" />Rain</label>
</div>

<div class="branch" id="sunny">
    <div class="step" data-state="end">
        <p>Sunny for days!</p>
    </div>
</div>

<div class="branch" id="rain">
    <div class="step" data-state="end">
         <p>Showers bring flowers!</p>
    </div>
</div>

<div class="step" id="end">
    <p>FIN.</p>
</div>

<div class="navigation">
    <ul class="clearfix">
         <li><button type="button" name="backward" class="backward">Backward</button></li>
         <li><button type="button" name="forward" class="forward">Forward</button></li>
    </ul>
</div>
</form>
</div>

<script type="text/javascript">
            jQuery(function($) {
                var validate = {
                    errorPlacement: function( error, element ) {
                        if ( element.is( ":radio" ) || element.is( ":checkbox" ) ) {
                            error.insertBefore( element.next() );

                        } else {
                            error.insertAfter( element );
                        }
                    }
                };

                // Example 3: Basic branching wizard
                jQuery( "#wizard" ).wizard({
                    transitions: {
                        color: function( state, action ) {
                            var branch = state.step.find( "[name=color]:checked" ).val();

                            if ( !branch ) {
                                alert( "Please select a value to continue." );
                            }

                            return branch;
                        },

                         weather: function( state, action ) {
                            var branch = state.step.find( "[name=weather]:checked" ).val();

                            if ( !branch ) {
                                alert( "Please select a value to continue." );
                            }

                            return branch;
                        },  
                    }
                });
            });
</script> 

Я должен получить рабочую форму, которая проведет вас через мастера, но вместо этого,Я получаю эту ошибку в консоли, когда я вызываю скрипты в моем functions.php:

    jquery.wizard.js?ver=1.1.3:60 Uncaught TypeError: $.widget is not a function
    at jquery.wizard.js?ver=1.1.3:60
    at jquery.wizard.js?ver=1.1.3:723

    (anonymous) @ jquery.wizard.js?ver=1.1.3:60
    (anonymous) @ jquery.wizard.js?ver=1.1.3:723
    (index):592 Uncaught TypeError: jQuery(...).wizard is not a function
    at HTMLDocument.<anonymous> ((index):592)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

Если я вызываю скрипты в заголовке, я получаю только это:

    (index):595 Uncaught TypeError: jQuery(...).wizard is not a function
    at HTMLDocument.<anonymous> ((index):595)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

Я не уверен на 100%, что я делаю неправильно или даже как отлаживать эту проблему.