Мобильное меню для WordPress без плагинов

Подключаем файл slidepanel.js (выезжающее popup окно)

(function($) {
$('#toggle').toggle(
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    },
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

В functions.php добавляем

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Обертываем HTML в индексном файле

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Показать" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Добавляем стили для выезжающего окна меню

@media screen and (min-width: 769px) {
#toggle {
display:none;
}

}

@media screen and (max-width: 768px) {
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}

#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
}

.nav-menu li {
border-bottom:1px solid #eee;
padding:20px;
width:100%;
}

.nav-menu li:hover {
background:#CCC;
}

.nav-menu li a {
color:#FFF;
text-decoration:none;
width:100%;
}
}

Необходимо поправить все путь в вышеперечисленном коде