1

I'am trying to make a wordpress website accessibility compliant but I have come across a problem with menu bar. It uses a modified them based on Twenty_Twelve.

I need to change the "ul" tag to "ol" which is required to make it compliant. ( I tried Edit HTML of Wordpress navigation bar following solution but i really could not understand the walker solutions in it ). Thank you

This is how the header.php file looks like :

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57162369-1', 'auto');
  ga('send', 'pageview');

</script>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>



<script>
     // DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Menu"
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });
    </script>


</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <div id="masthead" class="site-header" >
        <div class="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
            </a>
        </div>

        <div class="nav-right">
            <div class="header-call"><a href="/contact-us/">Call us today on <span>02 6247 3611</span></a></div>
            <nav id="site-navigation" class="main-navigation" >

                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->
            <nav id="site-navigation2" class="main-navigation2" role="navigation">

                <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->

        </div>      

    </div><!-- #masthead -->

    <div id="main" class="wrapper">
1

Within the header, modify the wp_nav_menu code to include:

'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>',

Full Menu Code

<?php wp_nav_menu( 
  array( 
    'theme_location' => 'primary', 
    'menu_class' => 'nav-menu', 
    'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>' 
  ) 
); ?>
  • Perfect.. Just copy pasted and was working smoothly. Thank you so much.. – rajiaguna Jun 9 '16 at 12:15
1

'items_wrap' (string):How the list items should be wrapped. Default is a ul >with an id and class. Uses printf() format with numbered placeholders.

Default items_wrap is <ul id="%1$s" class="%2$s">%3$s</ul> You can pass items_wrap argument to the wp_nav_menu like this.

wp_nav_menu( 
   array( 'theme_location' => 'primary', 
          'menu_class' => 'nav-menu',
          'items_wrap' => '<ol id="%1$s" class="%2$s">%3$s</ol>'
   ) 
);

'container' (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.

If you wan to wrap the ul with any other tag other than div you can use

wp_nav_menu( 
       array( 'theme_location' => 'primary', 
              'menu_class' => 'nav-menu',
              'container' => 'section' // default is div
       ) 
    );
  • I tried by adding your code to functions.php but it seems to show another menu on top in vertical view. ( Any option to share a screenshot) – rajiaguna Jun 9 '16 at 12:10
  • @rajiaguna , i misread your question ,i have updated the answer now – bravokeyl Jun 9 '16 at 12:16
  • 1
    @rajiaguna , good to know. Instead of copy and pasting I advice you to go thorugh the wp_nav_menu arguments , there are lot of good options. – bravokeyl Jun 9 '16 at 12:20
  • 1
    @rajiaguna I agree with bravokeyl. You should always refer to the documentation of the function you are using. – Greg McMullen Jun 9 '16 at 12:22
  • 2
    yes braveokey. I'am going through it now. It was very helpful and I actually learnt something new thanks to you guys. – rajiaguna Jun 9 '16 at 12:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.