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");
Comments (3)

  1. Aleksander Stalsberg says:

    So simple, so clean, so easy… I love you.. xD

  2. PatJ says:

    For Twenty-ten it's the same line as for Esplanade

  3. Max says:

    What kind of support cross-browser does this method have?  Is it only for IE?  And, thanks!