Last active
June 29, 2022 08:15
-
-
Save igorbenic/2aca55f5f7cf11e8b7d66a32f63af2e8 to your computer and use it in GitHub Desktop.
How to Create a WordPress Custom Menu with Nav Walker Class | www.ibenic.com/how-to-create-a-wordpress-custom-menu-with-walker-nav-menu-class
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
object(WP_Post)#497 (40) { | |
["ID"]=> | |
int(160) | |
["post_author"]=> | |
string(1) "1" | |
["post_date"]=> | |
string(19) "2016-03-26 17:59:07" | |
["post_date_gmt"]=> | |
string(19) "2016-03-26 17:59:07" | |
["post_content"]=> | |
string(15) "Home Sweet Home" | |
["post_title"]=> | |
string(4) "Home" | |
["post_excerpt"]=> | |
string(0) "" | |
["post_status"]=> | |
string(7) "publish" | |
["comment_status"]=> | |
string(6) "closed" | |
["ping_status"]=> | |
string(6) "closed" | |
["post_password"]=> | |
string(0) "" | |
["post_name"]=> | |
string(4) "home" | |
["to_ping"]=> | |
string(0) "" | |
["pinged"]=> | |
string(0) "" | |
["post_modified"]=> | |
string(19) "2016-08-31 23:53:19" | |
["post_modified_gmt"]=> | |
string(19) "2016-08-31 21:53:19" | |
["post_content_filtered"]=> | |
string(0) "" | |
["post_parent"]=> | |
int(0) | |
["guid"]=> | |
string(33) "http://localhost/wordpress/?p=160" | |
["menu_order"]=> | |
int(1) | |
["post_type"]=> | |
string(13) "nav_menu_item" | |
["post_mime_type"]=> | |
string(0) "" | |
["comment_count"]=> | |
string(1) "0" | |
["filter"]=> | |
string(3) "raw" | |
["db_id"]=> | |
int(160) | |
["menu_item_parent"]=> | |
string(1) "0" | |
["object_id"]=> | |
string(3) "160" | |
["object"]=> | |
string(6) "custom" | |
["type"]=> | |
string(6) "custom" | |
["type_label"]=> | |
string(11) "Custom Link" | |
["title"]=> | |
string(4) "Home" | |
["url"]=> | |
string(27) "http://localhost/wordpress/" | |
["target"]=> | |
string(0) "" | |
["attr_title"]=> | |
string(0) "" | |
["description"]=> | |
string(15) "Home Sweet Home" | |
["classes"]=> | |
array(7) { | |
[0]=> | |
string(0) "" | |
[1]=> | |
string(9) "menu-item" | |
[2]=> | |
string(21) "menu-item-type-custom" | |
[3]=> | |
string(23) "menu-item-object-custom" | |
[4]=> | |
string(17) "current-menu-item" | |
[5]=> | |
string(17) "current_page_item" | |
[6]=> | |
string(14) "menu-item-home" | |
} | |
["xfn"]=> | |
string(0) "" | |
["current"]=> | |
bool(true) | |
["current_item_ancestor"]=> | |
bool(false) | |
["current_item_parent"]=> | |
bool(false) | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
object(stdClass)#486 (16) { | |
["menu"]=> | |
object(WP_Term)#489 (10) { | |
["term_id"]=> | |
int(6) | |
["name"]=> | |
string(12) "Primary Menu" | |
["slug"]=> | |
string(12) "primary-menu" | |
["term_group"]=> | |
int(0) | |
["term_taxonomy_id"]=> | |
int(6) | |
["taxonomy"]=> | |
string(8) "nav_menu" | |
["description"]=> | |
string(0) "" | |
["parent"]=> | |
int(0) | |
["count"]=> | |
int(7) | |
["filter"]=> | |
string(3) "raw" | |
} | |
["container"]=> | |
string(3) "div" | |
["container_class"]=> | |
string(0) "" | |
["container_id"]=> | |
string(0) "" | |
["menu_class"]=> | |
string(12) "primary-menu" | |
["menu_id"]=> | |
string(0) "" | |
["echo"]=> | |
bool(true) | |
["fallback_cb"]=> | |
string(12) "wp_page_menu" | |
["before"]=> | |
string(0) "" | |
["after"]=> | |
string(0) "" | |
["link_before"]=> | |
string(0) "" | |
["link_after"]=> | |
string(0) "" | |
["items_wrap"]=> | |
string(36) "<ul id="%1$s" class="%2$s">%3$s</ul>" | |
["depth"]=> | |
int(0) | |
["walker"]=> | |
object(IBenic_Walker)#484 (4) { | |
["tree_type"]=> | |
array(3) { | |
[0]=> | |
string(9) "post_type" | |
[1]=> | |
string(8) "taxonomy" | |
[2]=> | |
string(6) "custom" | |
} | |
["db_fields"]=> | |
array(2) { | |
["parent"]=> | |
string(16) "menu_item_parent" | |
["id"]=> | |
string(5) "db_id" | |
} | |
["max_pages"]=> | |
int(1) | |
["has_children"]=> | |
bool(false) | |
} | |
["theme_location"]=> | |
string(7) "primary" | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
<div id="site-header-menu" class="site-header-menu"> | |
<?php if ( has_nav_menu( 'primary' ) ) : ?> | |
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>"> | |
<?php | |
wp_nav_menu( array( | |
'theme_location' => 'primary', | |
'menu_class' => 'primary-menu', | |
'walker' => new IBenic_Walker() | |
) ); | |
?> | |
</nav><!-- .main-navigation --> | |
<?php endif; ?> | |
... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action( 'wp_head', 'ibenic_walker_style'); | |
function ibenic_walker_style(){ | |
?> | |
<style> | |
.menu-item a small { | |
font-weight:300; | |
color:#999; | |
display: block; | |
} | |
.main-navigation span { | |
outline-offset: -1px; | |
padding: 0.84375em 0; | |
display: block; | |
line-height: 1.3125; | |
} | |
@media screen and (min-width: 56.875em){ | |
.main-navigation span { | |
outline-offset: -8px; | |
padding: 0.65625em 0.875em; | |
white-space: nowrap; | |
} | |
.main-navigation .menu-item-has-children > span { | |
margin: 0; | |
padding-right: 2.25em; | |
} | |
} | |
</style> | |
<?php | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class IBenic_Walker extends Walker_Nav_Menu { | |
// Our Code | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class IBenic_Walker extends Walker_Nav_Menu { | |
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) { | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class IBenic_Walker extends Walker_Nav_Menu { | |
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) { | |
$object = $item->object; | |
$type = $item->type; | |
$title = $item->title; | |
$description = $item->description; | |
$permalink = $item->url; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class IBenic_Walker extends Walker_Nav_Menu { | |
// Displays start of an element. E.g '<li> Item Name' | |
// @see Walker::start_el() | |
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) { | |
$object = $item->object; | |
$type = $item->type; | |
$title = $item->title; | |
$description = $item->description; | |
$permalink = $item->url; | |
$output .= "<li class='" . implode(" ", $item->classes) . "'>"; | |
//Add SPAN if no Permalink | |
if( $permalink && $permalink != '#' ) { | |
$output .= '<a href="' . $permalink . '">'; | |
} else { | |
$output .= '<span>'; | |
} | |
$output .= $title; | |
if( $description != '' && $depth == 0 ) { | |
$output .= '<small class="description">' . $description . '</small>'; | |
} | |
if( $permalink && $permalink != '#' ) { | |
$output .= '</a>'; | |
} else { | |
$output .= '</span>'; | |
} | |
} | |
} |
Its not good, its not working with depth, can u tell me how to use this call with sub-menu depth
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@TimothyMwangi It's all nicely explained in the blog post: http://www.ibenic.com/how-to-create-wordpress-custom-menu-walker-nav-menu-class/