In order to make use of a particular jQuery menu in WordPress, I need the child UL (dropdown part of the menu) to have a selector added to it (third line, below):
<ul class="dropdown">
<li>the first list item
<ul class="sub_nav">
<li>child list item</li>
</ul>
</li>
</ul>
Note: I left out the link code for greater clarity.
I'm not a coder. My PHP and javascript skills are of the copy-paste-tinker variety. Other forums have yielded lots of vague suggestions, but no solutions. I'm open to other solutions, but I'd like to solve it in one of two places:
Modify <#?php wp_list_pages('title_li=&depth=2'); ?> in the theme header.php file
[had to add # to code bit to make it show up]
Add a function in the theme functions.php file
Mike Little of zed1.com furnished a solution on a LinkedIn forum:
In the theme functions file:
class My_Walker_Page extends Walker_Page {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
if (0 == $depth)
$output .= "\n$indent<ul class=\"sub_menu\">\n";
else
$output .= "\n$indent<ul>\n";
}
}
In the header file where menu is to appear:
<ul class="dropdown"><?php $walker = new My_Walker_Page;
wp_list_pages(array('title_li'=>'', 'depth' => 2, 'walker' => $walker)); ?></ul>
Mucho gracias to Mike Little, who was a founding member of the WordPress team.
To add a class to the <ul> you can use jQuery, but i think you can do it without adding a class to the second ul.
To add class jQuery('ul.dropdown li ul').addClass('sub_nav');
now you can use jQuery('ul.sub_nav') for whatever you need for, but its same as jQuery('ul.dropdown li ul') so it won't make any difference either you add class or not.
Related
I have this type of menu, and I want this menu to convert into wp_nav_menu
<li>menu ab</li>
<li >menu bc<i class="hover-ind fa fa-angle-down" aria-hidden="true"></i></li>
<ul class="sub-menu">
<li>sub menu ab</li>
</ul>
As you can see if menu have submenu then I have to add <i></i> code snippets to show down arrow with particular menu.
So I am trying, if menu has sub menu then add <i></i> with anchor link into li.
I am able to add attributes to li if menu has submenu by this code:
add_filter( 'nav_menu_link_attributes', 'wpse154485_add_aria_haspopup_atts', 10, 3 );
function wpse154485_add_aria_haspopup_atts( $atts, $item, $args ) {
if (in_array('menu-item-has-children', $item->classes)) {
$atts['aria-haspopup'] = 'true';
}
return $atts;
}
but I need add a <i></i> code snippet if menu has submenu, Please help if anyone have clue about it.
TIA
you need to modify the Walker_Nav_Menu for adding your HTML markup.
check the GitHub link below for sample code.
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
I have resolved this issue. May be if someone looking for answer in future then my solution can help them. here is I found a blog which is exactly for the solution for drop down indicator.
http://dksolution.in/add-dropdown-arrow-indicators-to-wordpress-menu-items-that-have-submenus/
I currently have this code that shows all the parent categories in a drop down list.
HTML/PHP Code
<ul>
<?php
$args = array(
'orderby' => 'name',
'hierarchical' => 1,
'taxonomy' => 'category',
'hide_empty' => 0,
'parent' => 0,
);
$categories = get_categories($args);
foreach($categories as $category) {
echo '<li>' . $category->name . '</li>';
}
?>
</ul>
There's no problem with the code below. Actually, it works perfectly! You can see it here at my wordpress website: www.bendaggers.com
What I want to achieve now is how can I add the 1st level child of the parent just what it shown in Image 1 below with the same effect.
Image 1 - Sample
This is what I want to achieve, whenever the user hovers on the listed Parent Category, it will display its 1st level child category as show in the image below.
Image 2 - Sample Parent/Category Hierarchy.
By the way, I need a working code PHP, HTML and CSS also.
I really appreciate you help and efforts, thank you very much!
Some additional Information that might be useful.
The website is a wordpress website.
All post are properly categorize (parents, 1st level child category
is properly categorized).
You can make function for check If the parent category has child category and pass parent term into newly created function. copy your ablove code and make a function and paste it in your custom function.
And get parent category(you should make first custom function to get paent term) and pass this term to your second custom function
Take a look at wp_list_categories() function.
Replace the entire code that you've provided here with this. wp_list_categories(array('title_li' => ''));
Add this to the stylesheet.
.cat-item {
list-style-type: none;
position: relative;
}
.cat-item .children {
display: none;
position: absolute;
top: 0;
}
.cat-item:hover > .children {
display: block;
}
Did you refer wordpress function wp_nav_menu?
You can visit here for wordpress nav,
https://codex.wordpress.org/Function_Reference/wp_nav_menu
And here is the guide for multiple level menus.
https://codex.wordpress.org/WordPress_Menu_User_Guide
I'm trying to create a hover-effect on a list-item within the wp_list_pages() function. I'm creating a theme for Wordpress, but can't seem to get the hover effect working. I'm pretty new at this, so bear with me.
My css looks like this:
a.nav:hover { color: yellow; }
So for my html-code I add the "nav"-class to my links, like this:
<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>
This works, it changes the color of the link to yellow. So far so good.
But when I try to change this html-code to php-code the class isn't there.
I use the wp_list_pages() function, like this:
<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>
And the outcome then is:
<ul class="nav">
<li class="page_item page-item-23">HOME</li></ul>
So my question is, how to I add the nav class to this link? Is there an attribute within the function or something? Again, I'm really new to this
from the wordpress docs for wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items :
ll list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.
with that, the easiest thing you can do is to just change your hover code to:
li.page_item:hover { color: yellow; }
Have a look at this.
Quote: "Add the following line to your theme's functions.php template file, and it will add a class attribute of "tag" to each link generated by wp_list_pages():
add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"tag\" ", $t);'));
I think that the proper way change the default class of a wp_list_pages function is this:
// add to functions.php
// add classes to wp_list_pages
function wp_list_pages_filter($output) {
$output = str_replace('page_item', 'page_item new-class', $output);
return $output;
}
add_filter('wp_list_pages', 'wp_list_pages_filter');
What if I have a different looks on each pages then I have to call only a specific class. The example below is the best way that worked for me.
page.index:
<aside class="menu-side">
<ul class="side-nav-list">
<li>
<!-- First child ( title of the page) -->
<?php the_title() ?>
</li>
<?php
if($theParent){
$findChildOf = $theParent;
}else{
$findChildOf = get_the_ID();
}
wp_list_pages(array(
'title_li' => NULL,
'child_of' => $findChildOf,
))
?>
</ul>
</aside>
CSS file:
.side-nav-list li a:link,
.side-nav-list li a:visited {
display: block;
padding: 1.6rem 1.2rem;
color: #2d234b;}
how can i make the active menu in codeIgniter, its not when hover, but when clicked, for example if we are in some category, that item in the menu is highlighted, how can be this done in CI?
Depends on your routing and menu generation script. Esiest method is to check for segments in uri. For example for static menu You can do this:
<?php $class = $this->uri->segment(1)=="someController"?"highlighted":""; ?>
Menu item
There are a few steps involved here.
Firstly, you need to determine which is the 'current' menu item or category. If you can structure your site so that there's a direct relationship between your URL structure and your top level menu items (and / or your categories) then this will help a lot.
You'll need a common section of code that generates your main menu. This code could iterate through an array of menu item titles to produce the HTML for the menu. If the array had keys for the URL segment and values for the menu item text...
$menuItems = Array(
"/home" => "Home",
"/products" => "Products",
"/faq" => "FAQ",
"/aboutus" => "About Us"
);
(Leading slashes included for clarity as to which are the URI segments and which are the Menu Titles only - you would usually omit the leading slash)
... then, while you're iterating through, you could check each item against the relevant segment of the current URL.
Secondly, having worked out which is the current item, you could add a css class to the relevant HTML element.
e.g.
$menuHtml = "<ul class='menu'>\r\n";
foreach($menuItems as $segment => $title) {
if($segment == $this->uri->segment(1)) {
$menuHTML .= "<li class='current'>$title</li>";
} else {
$menuHTML .= "<li>$title</li>\r\n";
}
}
$menuHtml .= "</ul>";
You'd then need to apply the required highlight styles in CSS to the li.current element:
li.current {
<your-highlight-css-styles-here>
}
I want to add a submenu of a wordpress menu into my theme. I want to use the wp_nav_menu function of Wordpress 3.0. And in other words, I want to see the submenu not the subpages which means that wp_list_pages is not the right function because I want the submenu and not the subpages.
Let's assume the menu structure looks like that:
Home
Entry1
Entry3
Entry4
Entry2
Entry5
Entry6
I want that if someone clicks on Entry1 (and makes it the parent) the Theme just shows the submenu of this entry. In the case of Entry1 it's:
Entry3
Entry4
I know that there is a code like that:
<?php
$children = ($post->post_parent) ? wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0') : wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if($children) { echo('<ul>'.$children.'</ul>'); }
?>
However, the point is that I'm talking about the menu structure and not the page structure. Oh, and the depth parameter does not work because it means to here and not from here.
I think there could be a solution with a custom walker but I don't know how to implement that.
Function reference for wp_nav_menu
http://codex.wordpress.org/Template_Tags/wp_nav_menu
I'm looking for a solution for this problem for so long so please help me. Thanks a lot.
In order to get this to work I had to hide the .sub-menu as soon as the page loaded. Then, show only the relevant sub-menu by targeting ".current_page_item .sub-menu"
$(document).ready(function() {
$(".sub-menu").hide(); // hide the submenu on page load
$(".current_page_item .sub-menu").show();
)};
This should help: From http://www.svennerberg.com/2009/02/creating-a-submenu-in-wordpress/
<?php
$has_subpages = false;
// Check to see if the current page has any subpages
$children = wp_list_pages('&child_of='.$post->ID.'&echo=0');
if($children) {
$has_subpages = true;
}
// Reseting $children
$children = "";
// Fetching the right thing depending on if we're on a subpage or on a parent page (that has subpages)
if(is_page() && $post->post_parent) {
// This is a subpage
$children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0");
$children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0");
} else if($has_subpages) {
// This is a parent page that have subpages
$children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0");
$children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0");
}
?>
<?php // Check to see if we have anything to output ?>
<?php if ($children) { ?>
<ul class="submenu">
<?php echo $children; ?>
</ul>
<?php } ?>
One solution is to put another wp_nav_menu function on page and to modify css to hide inactive menu items.