How to optimize WordPress popup-on-hover menus for touch devices

  • Many web sites have menus that are displayed on hover.
  • On touch-enabled devices, there is no mouse and thus no hover effect.
  • On those menu elements, set the tag property aria-haspopup="true".
  • When an Internet Explorer 10 (Windows 8, Surface, Windows Phone 8, etc.) user on a touch-enabled device first taps on the element, it will behave as reacting to a mouse hover.



  • According to some current statistics, over 15% of the top one million websites and over 50% of all websites using a CMS are based on WordPress.
  • WordPress supports the aria-haspopup tag for the Admin menu.
  • Themes such as Twenty Eleven and Twenty Twelve have popup menus but don't support this tag.


  • In WP 3.5.1, the menu is generated in the file "post-template.php", function "start_el": $output .= $indent . '<li class="' ...
  • The code that generates the menu, does not seem to contain a variable that indicates if the menu has submenu entries, which would be needed to set the aria-haspopup correctly to true or false as needed.


  • The HTML for the menu looks like this:

<div class="menu">
<li><a href=""title="Home">Home</a></li>
<li class="page_item"><a href="">Page 1</a><!– Attr expected here –>
<ul class="children">
<li class="page_item"><ahref="">Page 11</a></li>
<li class="page_item"><a href="">Page 12</a><!– Attr expected here –>
<ul class="children">
<li class="page_item"><a href="">Page 121</a></li>
<li class="page_item"><a href="">Page 122</a></li>
<li class="page_item"><a href="">Page2</a></li>
<li class="page_item current_page_item"><a href="">Page3</a></li>


  • A workaround would be to add the following JavaScript code to the "footer.php" file just before the closing </body> tag:

// Open menu on first tap on touch devices.
jQuery(document).ready(function () {

jQuery(".page_item").has("ul").children("a").attr("aria-haspopup", "true");



  • I've tested this code for performance at and it seems to lead to the best results. If you know of a better way, please share it, thanks.


  • The above code should work with Twenty Eleven and Twenty Twelve themes and a few others.
  • The Esplanade theme uses other class names, you will need to replace the above jQuery line with this one:

jQuery(".menu-item").has("ul").children("a").attr("aria-haspopup", "true");