I am using the following override in my functions.php
function wp_nav_menu_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
add_filter('nav_menu_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('page_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
This removes the class tag that wordpress adds to a menu item. Now what I need to do is actually put in my own class name into the li tag instead, can anyone fill me in quickly on how to do that, I have scoured google and maybe I am searching for it wrong or what not or I just cannot understand the hook system with the functions.php file....
Using the above make my html output as...
<ul id="menu-homemenu" class="list-group special">
<li>Biography</li>
<li>Selected Works</li>
<li>Contact Us</li>
</ul>
Of course after I posted a comment I figured it out...sigh hate when this takes all evening to get it...this question pointed me in the right direction - How to add custom HTML to wp_nav_menu?
I added this class..
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= "<li class='list-group-item'>".esc_attr($item->title)."";
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
Then added this to my array where I called my nav inside my template...
<?php wp_nav_menu(array('menu' => 'HomeMenu','menu_class' => 'list-group special','menu_id' => '','walker' => new Custom_Walker_Nav_Menu)); ?>
Related
I like to add an empty 'span' in the main navigation li element which has a specific class.
Here is the desired look:
<ul>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item has-childern"><span></span></li>
</ul>
I have a code that adds the span after every nav link:
add_filter('nav_menu_item_args', function ($args, $item, $depth) {
if ( $args -> theme_location == 'primary') {
$args -> link_after = '<span></span>';
}
return $args;
}, 10, 3);
How can I achieve to add the 'span' only in the 'li' element which has the 'has-children' class? Thank you for the help!
You could use nav_menu_link_attributes filter hook to get access to the nav attributes.
From Documentation
nav_menu_link_attributes
'after'
(string) Text after the link markup.
'link_after'
(string) Text after the link text.
So you could set it up in multiple ways, for example you could do something like this:
add_filter('nav_menu_link_attributes', 'your_theme_custom_html_element', 10, 3);
function your_theme_custom_html_element($atts, $item, $args)
{
if ($args->theme_location == 'primary' && (strpos($atts['class'], 'has-childern') !== false)) {
$args->after = '<span></span>';
}
return $atts;
}
Just tested on my own website and it works seamlessly fine!
In Wordpress, how can I add a button or div into all sub-menu li's using wp_nav_menu?
This is my current code:
<?php wp_nav_menu(array(
'theme_location' => 'main_menu',
'items_wrap'=>'%3$s',
'container' => false
)); ?>
This is my desired output:
<li class="submenu">
<a>Link 1</a>
<ul>
<li><a>Link 2</a></li>
</ul>
<button type="button">Click Me!</button>
</li>
So, Custom Walkers are a bit of a pain to work with, until you understand them.
The below custom walker code should get you what you need. Add this to your theme's functions.php file:
class Custom_Button_Walker extends Walker_Nav_Menu {
// We only care about the "end level" part of the menu, where closing </ul> tags are generated
public function end_lvl( &$output, $depth = 0, $args = array() ) {
// This is from WP core code
$indent = str_repeat("\t", $depth);
// This line ensures we only add it on the proper level
$button = (0 == $depth) ? "{$indent}<button type=\"button\">Click Me!</button>\n" : '';
// This line is modified to include the button markup
$output .= "{$indent}</ul>\n{$button}";
}
}
To use the custom walker, modify your wp_nav_menu call like so:
wp_nav_menu( array(
'theme_location' => 'main_menu',
'items_wrap' =>'%3$s',
'container' => FALSE,
'walker' => new Custom_Button_Walker()
));
I need add to my menu extra icon before text. So I read in documentation that I need implement custom Walker_Nav_Menu. After some analyzing, I recognize I could implement my custom walker accord with decorator pattern. I have very small expirience in php especially wordpress. My code works weird. Look at it:
class Walker_nav_menu_Decorator extends Walker_Nav_Menu{
public $menu;
public static $index = 0;
function __construct() {
$menu = new Walker_Nav_Menu();
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if($item->title == "Main Menu"){
$args->before = "TEST";
}
echo $index;
$index+=1;
parent::start_el($output, $item, $depth, $args, $id);
}
}
It doesn't echo $index at all oO. Additionally add extra "TEST" word before each menu item. How should I do it properly and why this version doesn't work?
My class is in my functions.php file and I'm calling my menu here:
wp_nav_menu( array( 'theme_location' => 'main_menu', 'container' => 'nav' ,'container_class' => 'menu', 'walker' => new Walker_nav_menu_Decorator() ) );
your $index is static so don't call it directly but by
echo self::$index;
self::$index+=1;
I have a custom menu that is structured by a parent-child-subchild-and so on hierarchy. On each parent menu item (of which only six exist) there is a special picture I want to show in the corner of the website.
I now need a way to set a condition like this (this is fantasy-code of course):
if (current_parent_menu_item == "Home") : echo "Picture01"; endif;
if (current_parent_menu_item == "About") : echo "Picture02"; endif;
and so on...
I have no idea how I could access or ask for the current parent menu item.
Can anyone help?
Thanks a lot!
Sebastian
You should be using a walker class for this kind of stuff. Here is a simple walker class that you can use
class MyWalker extends Walker_Nav_Menu
{
function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
{
// check, whether there are children for the given ID and append it to the element with a (new) ID
$element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
// you know can access $item->hasChildren to do anything you want..
}
}
If you just want to get over it, then you should use jquery to add the html to the parent element. You can do something like this.
jQuery(document).ready(){
jQuery('ul#id > li').prepend('<img src="#" alt="">');
}
I just cant fully understand how custom walkers work in worpress:
Code in theme's home.php (actually all code is included from other file to not mess HTML) looks like this:
/**
* Contains wordpress function with array with parameters
* #return string HTML output
*/
function show_main_navigation() {
return wp_nav_menu(
array(
'theme_location' => 'header-menu',
'echo' => false,
'depth' => '-1',
'walker' => new Last_Item_Walker()
)
);
}
Walker looks like this:
class Last_Item_Walker extends Walker_Nav_Menu {
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= '<li class="spec">title</li>'; // my custom <li>
$output .= "$indent</ul>\n";
}
}
Overwritten method just does not work.
If I try to overwrite another method, for example:
class Last_Item_Walker extends Walker_Nav_Menu {
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "<br>"; // for demonstration
$output .= "</li>\n";
}
}
This one works, adds br tag but this is not what i want, i want to customize last li before /ul.
Can somebody help me with this?
Ok it was easier to do with filters.
/**
* Hardcodes shop item in navigation
* #param string $items HTML with navigation items
* #param object $args navigation menu arguments
* #return string all navigation items HTML
*/
function new_nav_menu_items($items, $args) {
if($args->theme_location == 'header-menu'){
$shop_item = '<li class="spec">title</li>';
$items = $items . $shop_item;
}
return $items;
}
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
If you're not too worried about IE8 and less, you can use the :last-child selector.
li.spec:last-child{
color: red;
}
If you are bothered about IE8 and less you can use a polyfill to make it work.