Работа с меню wp

Хочу заменить calss и id элементов li и a в списке ul вордпресс, стандартные функции меню в настройках пункта меню иногда вызывают конфликты, если прописаны стили для основных классов, с Walker не получилось осуществить задуманное как хотелось.
К примеру хотим взять меню с

и быстро внедрить его в wordpress без посторонних плагинов и конфликтов.

Сразу приводу код меню:

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

и код скрипта:

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
	$('#cssmenu #menu-button').on('click', function(){
		var menu = $(this).next('ul');
		if (menu.hasClass('open')) {
			menu.removeClass('open');
		}
		else {
			menu.addClass('open');
		}
	});
});
} )( jQuery );

Вот этой темы

.
Очень запутался в оптимальном разрешении проблемы.

Пробелма решается просто, обнулением обертки меню и присвоению дочерним стилям класса .menu-item-has-children .