Як у віджеті WordPress обернути блок у тег nav

Привіт:) У цій короткій замітці покажу, як у віджеті WordPress обернути довільний блок у тег <nav>.

Нехай є віджет з блоком:

<ul id="menu-footer-pages-menu-1">
	<li><a href="https://site.com/en/case/">CASES</a></li>
	<li><a href="https://site.com/en/blog/">BLOG</a></li>
	<li><a href="https://site.com/en/about-us/">ABOUT US</a></li>
	<li><a href="https://site.com/en/contacts/">CONTACTS</a></li>
</ul>

Хочемо отримати наступний результат:

<nav>
  <ul id="menu-footer-pages-menu-1">
	  <li><a href="https://site.com/en/case/">CASES</a></li>
	  <li><a href="https://site.com/en/blog/">BLOG</a></li>
	  <li><a href="https://site.com/en/about-us/">ABOUT US</a></li>
	  <li><a href="https://site.com/en/contacts/">CONTACTS</a></li>
  </ul>
</nav>

Помітив, що якщо через JS додавати тег <nav> на початок блоку, який потрібно обернути, то браузер за замовчуванням його автоматично закриває, тобто <nav></nav>, а потрібний блок йде вже після. Тому проблему вирішив через jQuery:

/**
 * Turn the menu in footer widgets into the <new> tag
 * 
 * https://stackoverflow.com/questions/48216205/avoid-browser-auto-close-tag-when-inserting-html-tag-with-javascript-before-firs
 */
add_action( 'wp_footer', function() {
?>
    <script>    
		jQuery(function ($){
			$("#menu-footer-pages-menu-1").wrapAll("<nav>");
            
            // якщо є інші віджети із меню
            // $("#menu-footer-pages-menu-2").wrapAll("<nav>");
			// $("#menu-footer-pages-menu-3").wrapAll("<nav>");
		});
    </script>
<?php
});