How to Add Schema Markup for Navigation Menu

Recently I’m implementing schema.org markup structure for my website and and into all of our premium theme to provide our customer for great website experience with SEO ready template. So if you wanted to know how to add schema markup for navigation menu in WordPress website without any plugin then here are very simple steps for you. I’m using WordPress Walker navigation PHP code to implement this so it can help you to better understand.

Before you add schema markup for navigation menu make sure you takes the backup of website and theme data. To prevent any trouble later.

Add Schema Markup for Navigation Menu

First a simple HTML code helps you to understand how to add schema markup for navigation menu and how it works.

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a href="https://www.insertcart.com/" itemprop="url"><span itemprop="name">Home</span></a>
</li>
<li>
<a href="https://www.insertcart.com/category/wordpress/" itemprop="url"><span itemprop="name">Tutorials</span></a>
</li>
<li>
<a href="https://www.insertcart.com/pricing/" itemprop="url"><span itemprop="name">Pricing</span></a>
</li>
<li>
<a href="https://www.insertcart.com/contact-us/" itemprop="url"><span itemprop="name">Contact Us</span></a>
</li>
</ul>
</nav>

Above code is for html now moving on WordPress PHP code. First we need to add navigation walker function to theme function.php also read How to Add Icon Navigation Menu

/**
* Custom walker class.
*/
class bigrush_Walker_Nav_Menu extends Walker_Nav_Menu {
/**
* Starts the list before the elements are added.
*
* Adds classes to the unordered list sub-menus.
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
// Depth-dependent classes.
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : ” ); // code indent
$display_depth = ( $depth + 1); // because it counts the first submenu as 0
$classes = array(
‘sub-menu’,
( $display_depth % 2 ? ‘menu-odd’ : ‘menu-even’ ),
( $display_depth >=2 ? ‘sub-sub-menu’ : ” ),
‘menu-depth-‘ . $display_depth
);
$class_names = implode( ‘ ‘, $classes );

// Build HTML for output.
$output .= "\n" . $indent . ‘<ul class="’ . $class_names . ‘">’ . "\n";
}

/**
* Start the element output.
*
* Adds main/sub-classes to the list items and links.
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
* @param int $id Current item ID.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : ” ); // code indent

// Depth-dependent classes.
$depth_classes = array(
( $depth == 0 ? ‘main-menu-item’ : ‘sub-menu-item’ ),
( $depth >=2 ? ‘sub-sub-menu-item’ : ” ),
( $depth % 2 ? ‘menu-item-odd’ : ‘menu-item-even’ ),
‘menu-item-depth-‘ . $depth
);
$depth_class_names = esc_attr( implode( ‘ ‘, $depth_classes ) );

// Passed classes.
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) ) );

// Build HTML.
$output .= $indent . ‘<li id="nav-menu-item-‘. $item->ID . ‘" class="’ . $depth_class_names . ‘ ‘ . $class_names . ‘">’;

// Link attributes.
$attributes = ! empty( $item->attr_title ) ? ‘ title="’ . esc_attr( $item->attr_title ) .’"’ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target="’ . esc_attr( $item->target ) .’"’ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel="’ . esc_attr( $item->xfn ) .’"’ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href="’ . esc_attr( $item->url ) .’"’ : ”;
$attributes .= ‘ itemprop="url" class=" menu-link ‘ . ( $depth > 0 ? ‘sub-menu-link’ : ‘main-menu-link’ ) . ‘"’;

// Build HTML output and pass through the proper filter.
$item_output = sprintf( ‘%1$s<a%2$s><span itemprop="name">%3$s%4$s%5$s</span></a>%6$s’,
$args->before,
$attributes,
$args->link_before,
apply_filters( ‘the_title’, $item->title, $item->ID ),
$args->link_after,
$args->after
);
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}

Now search for wp_nav_menu your main navigation for WordPress some times located in header.php file code will be something like this.

<?php wp_nav_menu(); ?>

Now replace this code with below this will call your walker from function.php to theme and Important to add schema markup for navigation menu.

<?php wp_nav_menu( array( 'walker' => new insertcart_Walker_Nav_Menu() ) ); ?>

That’s all we have done editing now you SIteNavigationElement should work fine check into google testing tool. If wanted to SEO optimized theme please Browser our Themes Store