I want to have a Wordpress menu generated so that the rendered HTML looks like the template below. The DIVs and classes have to match the HTML below. (Obviously the actual links inside the menu are placeholder, and they would be generated based on what is in the database.)
<![CDATA[ <div class="menu">
<div class="menu-item">
<strong class="home-icon"></strong>
<a class="menu-enabled" href="#">Home</a>
</div>
<div class="menu-item">
<strong class="features-icon"></strong>
<a class="menu-disabled deploy-submenu" href="#">Features</a>
<div class="clear"></div>
<div class="submenu">
<a href="#">The Drawer Introduction</a> <em class="submenu-decoration"></em>
<a href="#">Typography Features</a> <em class="submenu-decoration"></em>
<a href="#">jQuery Features</a> <em class="submenu-decoration"></em>
<a href="#">Other Features</a>
</div>
</div>
<div class="menu-item">
<strong class="gallery-icon"></strong>
<a class="menu-disabled deploy-submenu" href="#">Gallery</a>
<div class="clear"></div>
<div class="submenu">
<a href="#">Full Width Portfolio</a> <em class="submenu-decoration"></em>
<a href="#">Two Column Portfolio</a> <em class="submenu-decoration"></em>
<a href="#">Swipable Thumbnail Gallery</a> <em class="submenu-decoration"></em>
<a href="#">Filtrable Image Gallery</a>
</div>
</div>
<div class="menu-item">
<strong class="blog-icon"></strong>
<a class="menu-disabled" href="#">Blog</a>
</div>
<div class="menu-item">
<strong class="contact-icon"></strong>
<a class="menu-disabled" href="#">Contact</a>
</div>
</div>]]>
You can see this menu in action (plain HTML) [[LINK href="http://paultrifa.com/envato/codecanyon/drawernav/index.html"]]here[[/LINK]].
I want to have Wordpress generate basically the above HTML using a Wordpress menu.
Is this clear? Can you help me out?
Solution - 1
<![CDATA[class Custom_Nav_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<div class=\"submenu\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n</div>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"deploy-submenu\" href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"\" href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a>";
}
}
function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->is_dropdown && ($depth === 0)) {
$output .= "</div>\n";
} elseif ($depth === 0) {
$output .= "</div>\n";
} elseif ($depth > 0) {
$output .= "<em class=\"submenu-decoration\"></em>\n";
}
}
}]]>
Solution - 2
hi!
insert this code in you're functions.php
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
after this
you can use the administration panel to generate the menu using the interface
Solution - 3
Hi,
Check the following link, it describes how to customize wordpress menu
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Removing_the_Navigation_Container
Solution - 4
Yes to modify the html output, you'll have to use a walker in your wp_nav_menu(), extending the Walker_Nav_Menu class. I have a very great resource on this but it's in french
Solution - 5
try custom from here
<![CDATA[
class theme_extended_walker extends Walker_Nav_Menu{
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
//Adds the 'parent' class to the current item if it has children
if( ! empty( $children_elements[$element->$id_field] ) )
array_push($element->classes,'parent');
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
]]>
<![CDATA[
<?php if (has_nav_menu('primary')) wp_nav_menu(array('theme_location' => 'primary', 'depth' => 0, 'container' => '', 'menu_class' => 'pie-css3 clearfix', 'walker' => new theme_extended_walker)); ?>
]]>
|
