1 Replies - 3355 Views - Last Post: 23 April 2014 - 01:16 PM

#1 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

WordPress Custom Menus - How do you edit the HTML?

Posted 05 February 2014 - 12:17 PM

So I usually use
<?php wp_nav_menu( array( 'theme_location' => 'left-header' ) ); ?>
to get my menus (another one is right-header) and that is fine usually, but now I want to basically use the custom menu to be coded like
<ul>
<a href="#"><li><h4>About</h4>read up on me</li></a>
<a href="#"><li><h4>Portfolio</h4>see what I've done</li></a>
</ul>

Any ideas? This is the first time I am trying something like this, and I am getting no where with it.

Edit: Nevermind - I found this to be very helpful :-)

This post has been edited by Quin: 05 February 2014 - 12:36 PM


Is This A Good Question/Topic? 0
  • +

Replies To: WordPress Custom Menus - How do you edit the HTML?

#2 Shadipity  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-March 10

Re: WordPress Custom Menus - How do you edit the HTML?

Posted 23 April 2014 - 01:16 PM

You can use a walker in your menu to enable the styling of two different elements.

So in the end your HTML will look like this:

<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-31 current_page_item" id="menu-item-273"><a href="#">Title<span class="sub">Discription</span></a></li>


Add the following to your function file:

class My_Walker extends Walker_Nav_Menu
{
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$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        ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}



Then go to the menu section of you backend, under "screen options" enable "descriptions" then add a description to the menu item as you would a class.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1