I need to insert in anchor's menu some divs that contain a wp page.
One of anchor menu has a submenu that contain 5 link. Each of these link contains a page (wp page).
I followed this post: http://bit.ly/MIRtcY
But is not a specific source and I have some problem to obtain what I want.
Have you a specific url or some suggestions?
Thanks.
I tried different solutions and now I working with walker nav menu.
This is the code:
// Class to insert div and page into nav menu (not working yet)
class description_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 ) .'"' : '';
// $prepend = '<strong>';
// $append = '</strong>';
$description = empty( $item->description ) ? '<div class="dropEverything-page"><div class="dropEverything-row">'.esc_attr( $item->description ).'</div></div>' : '';
if($depth != 0)
{
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
I modified this line:
// I need to get the ID of the page and put it into the anchor
$postID = get_page_by_title("Profile")->ID;
$post = get_post(&$postID);
$description = empty( $item->description ) ? '<div class="dropEverything-page"><div class="dropEverything-row">'.esc_attr( $item->description ).'</div></div>' : '';
I need to substitute
esc_attr( $item->description )
with
esc_attr( echo apply_filters("the_content", $post->post_content) )
but the website return me a blank page.
Any suggestion?
thanks
Related
Is there any way to pass a variable from start_el to start_lvl? I want to place the menu description in the wrapper of the submenu items.
class submenu_walker extends Walker_Nav_Menu
{
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='sub-menu'><div class='menu-image-container'><div class='menu-image'></div></div>\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent<div class='clear'></div></ul>\n";
}
}
I've tried to store the description as a variable in start_el, and access it using global in start_lvl... but it returns nothing.
I'm really desperate for help on this, as so far I've had no results, or responses to this question in terms of answers.
Can someone please help me with this? There are definitely some of you who know how to use the Wordpress walker menu.
Here is the way to use this code and it will display the parent description.
Steps for using of it.
1: Copy the below class and past into the functions.php file.
2: Call the menu like
wp_nav_menu(array(
'menu_id'=>'',
'menu_class'=>'',
'container'=>'',
'theme_location'=>'#enter theme location#',
'walker'=> new customize_menu_walker()
));
<br/>
3:See the result.
class customize_menu_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
// $dbclasses=$item->classes;
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$dbclasses=$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $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;
//specially for two menu
//specially for two menu
//convert string to array
$dbclassesArr = explode(" ",$dbclasses);
$item_output .= '<a'. $attributes .'>';
if(in_array("menu-item-has-children", $dbclassesArr)){
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';//description display here.
}
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $description.$args->link_after;
$item_output .= ' '.'</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Now after updating this function, your menu will show the parent menu description.
Here is the code.
Thanking you.
I have managed to find the solution to this question that seemed to go unanswered for days here - How can I add parent menu description to my Wordpress menu?
We are building a theme on WordPress 3.5.1 and we created two custom menus - one for the header and one for the footer. In the footer the titles are not linkable, therefore we created custom links with href "#" and then changed the href to "". The result are empty links with <a>. I know it's possible to change the cursor of these empty links with CSS:
.footer-content #sitemap ul.menu > li.menu-item > a {
cursor: text;
}
and I also found out a way to remove these empty links with JavaScript and jQuery:
$('.footer-content #sitemap ul.menu > li.menu-item > a').each(function() {
// If href is empty, remove <a> element.
var href = $(this).attr('href');
var href_length = 0;
if (!(typeof href === 'undefined')) {
var href_length = href.length;
}
if (href_length === 0) {
var contents = $(this).contents();
$(this).replaceWith(contents);
}
});
(the footer menu is inside the .footer-content #sitemap elements:
<div class="footer-content">
<div id="sitemap" class="not_mobile">
)
but is it possible to remove the empty <a> elements from the HTML without using JavaScript? The function that creates the footer menu is:
<?php wp_nav_menu( array( 'theme_location' => 'footer_menu' ) ); ?>
Thanks,
Uri # Initech.
Yes, It is possible. You can use the walker. Put the following class in your functions.php file
class themeslug_walker_nav_menu extends Walker_Nav_Menu {
// add main/sub classes to li's and links
function start_el( &$output, $item, $depth, $args ) {
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 .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';
if($depth == 0) {
$item_output = sprintf( '%1$s%2$s%3$s%4$s%5$s',
$args->before,
$args->link_before,
apply_filters( 'the_title', $item->title, $item->ID ),
$args->link_after,
$args->after
);
} else {
$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
$args->before,
$attributes,
$args->link_before,
apply_filters( 'the_title', $item->title, $item->ID ),
$args->link_after,
$args->after
);
}
// build html
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
and add this walker in your wp_nav_menu function
<?php wp_nav_menu( array( 'theme_location' => 'footer_menu', 'walker' => new themeslug_walker_nav_menu ) ); ?>
This will remove the anchor tag <a> from each menu item.
OK, I found a solution. I searched and found out function start_el(...) on class Walker_Nav_Menu, then copied it and changed only the last part of it:
class themeslug_walker_nav_menu extends Walker_Nav_Menu {
/**
* #see Walker::start_el()
* #since 3.0.0
*
* #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 int $current_page Menu item ID.
* #param object $args
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $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;
if (! empty( $item->url )) {
$item_output .= '<a'. $attributes .'>';
}
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
if (! empty( $item->url )) {
$item_output .= '</a>';
}
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Then I changed the call to wp_nav_menu on footer.php:
<?php wp_nav_menu( array( 'theme_location' => 'footer_menu', 'walker' => new themeslug_walker_nav_menu ) ); ?>
It works and there are no <a> links when the href is empty (my changes are both ifs: if (! empty( $item->url )) {). Thanks to Mangesh Parte for the idea.
Uri.
I want to assign specefic class in menu list to its child anchor.
for example:
<li class="icon-home list-item">
Home
</li>
I want to convert above output to this (Remove class icon-home from list and assign it to its child anchor):
<li class="list-item">
<a class="icon-home" href="index.php">Home</a>
</li>
What I want to do ??
Search for matching class icon- in wordpress menu array, then set it to its child anchor and then unset it from list.
I am using a code which search for a class divider in menu array and then convert it to a new list with class="divider". Here is that code:
// managing divider: add divider class to an element to get a divider before it.
$divider_class_position = array_search('divider', $classes);
if($divider_class_position !== false){
$output .= "<li class=\"divider\"></li>\n";
unset($classes[$divider_class_position]);
}
Here is my all code for wordpress menu override, Please have a look before answering:
<?php
/**
* Extended Walker class for use with the
* Twitter Bootstrap toolkit Dropdown menus in Wordpress.
* Edited to support n-levels submenu.
* #author johnmegahan https://gist.github.com/1597994, Emanuele 'Tex' Tessore https://gist.github.com/3765640
*/
class NavMenuWalker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$submenu = ($depth > 0) ? ' sub-menu' : '';
$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
// managing divider: add divider class to an element to get a divider before it.
$divider_class_position = array_search('divider', $classes);
if($divider_class_position !== false){
$output .= "<li class=\"divider\"></li>\n";
unset($classes[$divider_class_position]);
}
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
if($depth && $args->has_children){
$classes[] = 'dropdown-submenu';
}
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_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 .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$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 .= ($depth == 0 && $args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
//v($element);
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] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$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);
}
}
You have to look for:
$item_output .= '<a'. $attributes .'>';
and replace it with:
$item_output .= '<a'. $attributes .' class="'.$classes[0].'">';
Now it changes <li class="icon-home list-item"> to <a href="index.php" class="icon-home">
On $attributes just display Link active and hover effect no one specific class define in link .
I have a navigation menu loop that uses a custom walker which outputs:
<ul>
<li id="menu-item-2" class="menu-item-object-category">stuff</li>
<li id="menu-item-3" class="menu-item-object-category">stuff</li>
...
etc
And if a page is in the menu, it outputs:
<li id="menu-item-4" class="menu-item-object-page">stuff</li>
</ul>
Clearly wordpress somewhere detects that the entry in the menu is either a category or a page and assigns the appropriate class. How can I run that same check in my walker?
I simply want to do an
If ($item->object_id = page) { // special code}
I tried is_page(), but realized that that is a boolean function to detect if the current page you are on is a page or not.
Is there any easy way of checking each output in a walker for pages?
This is my walker code:
class Custom_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 .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Thanks
You can use get_post function and check the type, for example:
<?php
$current_post = get_post($current_post_id);
if ($current_post->type == 'post') {
//Do the stuff with post
}
elseif ($current_post->type == 'page') {
//Do the stuff with page
}
else {
//Do the stuff with other post types
}
I'm looking to add the post ID to the markup of wp_nav_menu but not sure how to approach it.
I've found this: http://wordpress.org/support/topic/output-the-post-id-of-wp_nav_menu-items
which suggests this, but putting it in my functions.php file doesnt do any thing.
// get menu item's content id
class pages_from_nav extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$item_output .= $item->object_id;
$item_output .= ',';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Any ideas on how I could get the post ID as either a class, an ID or a data attribute?
Have it figured out via some nice chaps on the WP forums.
Needed to create a walker, which is a custo nav structure:
// nav menu walker
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 ) .'"' : '';
$attributes .= ' data-id="'. esc_attr( $item->object_id ) .'"';
$attributes .= ' data-slug="'. esc_attr( basename(get_permalink($item->object_id )) ) .'"';
$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 .= '</a>'; /* This is where I changed things. */
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Then just pass the walker into my menu when I call wp_nav_menu();
<?php
$walker = new My_Walker;
wp_nav_menu(array(
'echo' => true,
'menu' => 4,
'container' => '',
'theme_location' => 'primary',
'menu_class' => 'grid-10 omega',
'walker' => $walker
)); ?>
Seems like this was over complicated. All you really need is url_to_postid(); where the URL you pass will be the link for the menu item.
add_filter('nav_menu_link_attributes', 'menu_post_ids');
function menu_post_ids($val){
$postid = url_to_postid( $val['href'] );
$val['data-postid'] = $postid;
return $val;
}
You could also use this to query data from the post such as a featured image, etc., and further manipulate the menu on the front end using jQuery and whatever post related attributes you added.
add_filter('nav_menu_link_attributes', 'my_menu_images');
function my_menu_images($val){
$postid = url_to_postid( $val['href'] );
$val['data-image'] = get_the_post_thumbnail_url($postid);
return $val;
}