I would appreciate if you help me, the problem is that I have a menu and it has a submenu, and this submenu has a class by default - sub-menu, how can I change this class to submenu and how can I add to my first li - tag -
HTML:
<ul class="cf">
<li class="sub-menu">managers<i class="fa fa-angle-down fa-1g" aria-hidden="true"></i>
<ul class="submenu">
<li>page one</li>
<li><a href="shareholder.html">page two/a></li>
</ul>
</li>
</ul>
PHP:
<?php wp_nav_menu(array('theme_location'=>'menu', 'container'=>'false', 'menu_class'=>'cf', 'depth' => 2)); ?>
I don't know exaclty what you are trying to do. But you can find the submenu output in the file "wp-includes\class-walker-nav-menu.php".
The menu is build dynamically on the sub-menu class. So i don't know if the menu generator is still working if you change this class. Maybe it is better to add an additional class.
Try this code :
$(document).ready(function () {
$('ul.cf').find(".sub-menu").addClass("submenu").removeClass("sub-menu");
});
May be this will work for wordpress. Write this in your theme function.php
function change_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="submenu" /',$menu);
return $menu;
}
add_filter('wp_nav_menu','change_submenu_class');
Related
I'm currently trying to figure out, how I can add a class to the wp_nav_menu links <a>. I can always found question and tutorials how I can change the <li> or <ul> class of the generator, but nothing about the link <a> classes.
This is my little piece of code:
<div class="navbar">
<ul>
<li><a class="add-class-here" href="#">Menu 1</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
As you can see, I want to add a class to the <a> (link) element. How the hack can I do this?
Found my answer. Maybe I was a bit to fast asking a new one:
add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
$class = 'has-ripple';
$atts['class'] = $class;
return $atts;
}
So this is how I've added a ripple class to all of my link object. Looks cool now!
How can I create a function to scan all menu items from Drupal 7 system and if there is a nested ul, add dropdown CSS classes to the nested ul and add a custom attribute to the parent li container? Im using UIKIT which will automatically create the dropdowns.
Here's my current menu HTML output:
<ul class="menu">
<li class="first last expanded">
<a title="" href="/node/add">Add content</a>
<ul class="menu">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Here's what I need it to be:
<ul class="menu">
<li class="first last expanded" data-uk-dropdown>
<a title="" href="/node/add">Add content</a>
<ul class="menu uk-dropdown">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Im looking for the simplest approach possible.
You can crawl menu tree your self and write out menu HTML as you like. Used that and should be something like:
$tree = menu_tree_all_data('menu_machine_name');
Also, if I remember well, if you do only that your active (current) menu item won't be marked any way, and for marking it you have to also call (after getting $tree variable) :
menu_tree_add_active_path($tree);
But again, if I remember well, that function is only available if you install "Menu block" module...
Print out $tree variable after that and organize your code to crawl recursively menu tree you collected.
i need to insert span or div to parent li. For spoiler or button to use it in classie.js
<ul>
<li class="parent">
<ul></ul>
</li>
</ul>
I know that i should use walker in wordpress... but i dont know function
I have a WordPress template I'm trying to build and I can't seem to figure out how to hook into the menu that WordPress outputs and add a custom attribute to that menu's <li> tags. The current menu outputs like this:
<ul id="menu-main-menu-1" class="top-bar-menu right">
<li class="divider"></li>
<li class="menu-item ">Home</li>
<li class="divider"></li>
<li class="menu-item">About</li>
<li class="divider"></li>
<li class="menu-item">My Work</li>
<li class="divider"></li>
<li class="menu-item">Contact</li>
</ul>
(Those links are just there for sample)
I need WordPress to automatically add the following attribute to the <li> tags: data-magellan-arrival="[target]".
[Target] needs to automatically be populated by the page_ID that the menu item corresponds to. So for example, let's say that first's <li>[PAGE]</li> link is Home and Home's page_ID is "21" (example). I would need data-magellan-arrival="[target]" inside of <li> to be set to data-magellan-arrival="21".
So it would look like: <li class="menu-item" data-magellan-arrival="21">[PAGE]</li>
I'll be honest with you, I'm not that great at PHP just yet and WordPress filters/hooks much less. Hoping someone can point me in the right direction or show me how to do it.
Thanks!
This should work:
//add to functions.php
add_filter('nav_menu_link_attributes', 'magellanlinkfilter');
function magellanlinkfilter($val)
{
$postid = url_to_postid( $val['href'] );
$val['data-magellan-arrival'] = $postid;
return $val;
}
Here's the complete list of hooks: http://adambrown.info/p/wp_hooks
Does anyone know how to edit/change Wordpress's wp_list_pages function in order to add classes to the ul and li items?
I'm trying to implement the new version of jquery.treeview which requires <li class="expandable"> and <ul style="display: none;"> on expandable lists and child ul's.
I've been messing around with this but it aint working too good in that it applies the 'expandable' class to all li's:
$pages = wp_list_pages('title_li=&echo=0' );
$pages = preg_replace('/class="/','class="expandable ', $pages); //note space on end of replacement string
//output
echo $pages;
And here is what the outputted html should look like:
<ul class="treeview" id="tree">
<li>Home</li>
<li class="expandable">Expand 1
<ul style="display: none;">
<li class="expandable">Expand 2_1
<ul style="display: none;">
<li>Expanded 3_1</li>
<li>Expanded 3_2</li>
<li>Expanded 3_3</li>
</ul>
</li>
<li class="expandable"><a href="#" >Expand 2_2</a>
<ul style="display: none;">
<li>Expanded 4_1</li>
<li>Expanded 4_2</li>
<li>Expanded 4_3</li>
</ul>
</li>
</ul>
Hope this makes sense and any help greatly appreciated, S.
I guess you are trying to activate a tree view on the page items. As this would require JavaScript you can simply add the class using JavaScript before initializing the tree view:
$("#tree li").addClass("expandable");
$("#tree").treeview();
If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):
$("#tree ul").hide();
Maybe this Plugin (Classy wp-List) helps. I haven't tried it yet but it says it will let you define a class for each page in the backend.
good luck.