<ul id="menu-primary">
<li></li>
<li></li>
<li></li>
<span></span> /* Add after the list items; before the closing </ul> tag */
</ul>
How to add <span> tags after the list items, to the WP-menu with id="menu-primary"?
EDIT
<ul id="menu-primary">
<li></li>
<li></li>
<li></li><li class="fix"></li> /* Add <li class="fix"></li> adjacent after the list items exactly as shown. */
</ul>
Why don't you create a class for the li ?
<ul id="menu-primary">
<li class ="class"></li>
<li class ="class"></li>
<li class ="class"></li>
/* Add after the list items; before the closing </ul> tag */
</ul>
Related
How to convert static HTML5 navigation menu to WordPress dynamic menu.
I want to output this HTML menu in WordPress.and I don't know how to make ul and li in this form.
Thanks for your help.
This is my HTML5 navigation menu
<ul class="nav topnav">
<li class="dropdown active">
<i class="icon-home"></i> Home <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Homepage 2</li>
<li>Homepage 3</li>
<li>Parallax slider</li>
<li>Landing page</li>
</ul>
</li>
<li class="dropdown">
Features <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Typography</li>
<li>Components</li>
<li>Icons</li>
<li>Icon variations</li>
<li class="dropdown">3rd menus<i class="icon-angle-right"></i>
<ul class="dropdown-menu sub-menu-level1">
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Pages <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>About us</li>
<li>FAQ</li>
<li>Team</li>
<li>Services</li>
<li>Pricing boxes</li>
<li>404</li>
</ul>
</li>
<li class="dropdown">
Portfolio <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Portfolio 2 columns</li>
<li>Portfolio 3 columns</li>
<li>Portfolio 4 columns</li>
<li>Portfolio detail</li>
</ul>
</li>
<li class="dropdown">
Blog <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Blog left sidebar</li>
<li>Blog right sidebar</li>
<li>Blog fullwidth</li>
<li>Post left sidebar</li>
<li>Post right sidebar</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
I want to convert it to WordPress menu with
wp_nav_menu()
How can I make this custom menu?
I don't want to use any plugins to make custom menu.
First, you need to register nav menu in functions.php like this:
function register_menu(){
register_nav_menu('main-menu', 'Main menu');
}
add_action('init', 'register_menu');
When you do this, new option will appear in your admin panel. Go to Appearance > Menus and start adding links, pages or whatever you want to be in your menu. You can specify depth as well. Once you are done with your menu, select location of the menu, which will in this case be your newly created 'Main menu'. Now you want to go back to your page template in code editor to display that menu. It is very hard to use wp_nav_menu() function to display such complex menu so we will use different approach. We will grab menu items for start:
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
Now goes the main part. We are looping through menu items and displaying it's data in combination with custom html elements:
<?php
$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
// check if menu has items
if(!empty($topMenuItems)){
?>
<ul>
<?php
foreach ($topMenuItems as $topMenuItem){
//Check if menu_item_parent property is set to 0.
That means that menu item is top level item.
if($topMenuItem->menu_item_parent == 0){
$topItemID = $topMenuItem->ID;
$submenuItems = array();
//check if there are submenu items for current top menu
item.
foreach ($topMenuItems as $submenuItem){
if($submenuItem->menu_item_parent == $topItemID){
$submenuItems[] = $submenuItem;
}
}
?>
<li>
<?php echo $topMenuItem->title ?>
<?php
// If there are submenu items for current item, display
them.
if(!empty($submenuItems)){
?>
<ul class="submenu">
<?php
foreach ($submenuItems as $subitem){
?>
<li>
<?php echo $subitem->title ?>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
<?php
}
}
?>
</ul>
<?php
}
?>
// Using this logic, you can go in depth how much you want to.
This is source code: and i want customize it, but i dont know how add "textgrandchild"
https://bootsnipp.com/snippets/eN3Q8
and also below is my source code:
<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
<ul>
<li>
Parent
<ul>
<li>
Child
<ul>
<li>
Grand Child
</li>
</ul>
</li>
<li>
Child
<ul>
<li>Grand Child</li>
<li>
Grand Child
<ul>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
</ul>
</li>
<li>Grand Child</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And when i customize, now i want add like 'Great Grand Child" in source in Myself customize, but i don't know how add ul and li
Can you add one "Great Grand Child" for each on my "textgrandchild" in below code pen?
So ill understand
my customized is below
https://codepen.io/anon/pen/dVQWVN
i want to change the default HTML of wordpress's nav in a my custom theme adding a caret in the li that has a sub menu.
The default html looks like:
<ul id="menu-menu" class="nav navbar-nav">
<li id="menu-item-98" class="classes">Normal item</li>
<li id="menu-item-105" class="classes menu-item-has-children dropdown">Has a sub menu
<ul class="sub-menu">
<li id="menu-item-113" class="classes">Sub menu item</li>
</ul>
</li>
</ul>
And I havo to change this in this form:
<ul id="menu-menu" class="nav navbar-nav">
<li id="menu-item-98" class="classes">Normal item</li>
<li id="menu-item-105" class="classes menu-item-has-children dropdown">
<a href="#">
Has a sub menu
<!-- ADD THIS PART -->
<span class="caret"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-113" class="classes">Sub menu item</li>
</ul>
</li>
</ul>
I think that it's possible do something like this with php in function.php but I don't know how. Can you help me? Thanks in advice.
Add your submenu under Appearance --> Menus.
Then, you can use the Chrome/Firebug inspector to find the class/id of the UL for the submenu(s) you would like to add the caret to. Modify your child theme's style.css with something like the following:
ul .sub-menu {
list-style-image: url('caret.gif');
}
<ul>
<li>
<a>name1</a>
<div>
<ul>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a>name2</a>
<div>
<ul>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
As we can se we hve some <ul>.
We would like use PHP Simple HTML DOM for get array with data ul up.
We want use code:
foreach($html->find('li') as $li) {
}
But in this example we see all li on display:
http://prntscr.com/5390mf
http://prntscr.com/5390pj
But we dont know how get only parrent li:
1.
<li>
<a>name1</a>
</li>
2.
<li>
<a>name2</a>
</li>
And only than get childrens ul in parrents li and all children li in li.
Tell me please how make it?
P.S.: if i do bad explain that I would like to receive, please write
First:
foreach($html->find('li',0) as $line) {
}
Second (if we can add class to parrent ul):
foreach($html->find('ul.parrent_ul->li') as $line) {
}
Enjoy!
foreach($html->find('ul > li') as $li) {
}
Should get only the top level li's - the one's that are direct children of the ul elements
I am going to add a footer in the sidebar that generated using dynamic_sidebar function in Wordpress. As you know, dynamic_sidebar generate a sidebar with following structure:
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
</li>
But I want to convert it to:
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
<div class="footer"></div>
</li>
<li class="sidebox">
<h3>The Header</h3>
<ul>
<li></li>
<li></li>
</ul>
<div class="footer"></div>
</li>
How I can implement it?
not sure how you would go about this in PHP, but if your JavaScript is fine, then you can do append child to the sidebox li, assuming that 1- footer contains the same content, OR 2- you have a differentiator (typically an id with incrementing number) to identify each individual block.