I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.
I have managed to create a dynamic navigation, using following code in my header.php:
<div class="nav">
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>
Which in HTML, translates to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li> About </li>
</ul>
</div>
I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li class="underline"> About </li>
</ul>
</div>
According to the docs, the current page item should already have a class .current-menu-item. you can use that to style the item with underline. Do you not see this class?
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items
Related
while making my custom navigation menus for my own Worpress theme, navigation menu's css code's some codes are working, some are not working while entering php navigation code for Wordpress theme.
This my php code for wordpress navigation menu
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'ul',
'container_class' => '',
'menu_class' => 'nav-link',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);?>
so i am having so many classes in navigation menu so my css code is very long that's why i am adding my html code for my navigiation bar. this my html code for navigation menu.
<ul>
<li class="nav-link" style="--i: .6s">
Home
</li>
<li class="nav-link" style="--i: .85s" >
Categories<i class="fas fa-caret-down"></i>
<div class="dropdown ">
<ul>
<li class="dropdown-link">
Motivation
</li>
<li class="dropdown-link">
Health
</li>
<li class="dropdown-link">
<a class=" href="/pages/science&tech.php">Science & Technology</a>
</li>
<li class="dropdown-link">
<a href='/pages/finance.php'>Finance</a>
</li>
<li class="dropdown-link">
Random
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.1s">
Archives<i class="fas fa-caret-down"></i>
<div class="dropdown">`enter code here`enter code here`
<ul>
<li class="dropdown-link">
Contact us
</li>`enter code here`
<li class="dropdown-link">
Privacy Policy
</li>
<li class="dropdown-link">
Terms & Condition
</li>
<li class="dropdown-link">
Disclaimer
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.35s">
About
</li>
</ul>
something wrong in my php code. can you give correct code for my navigation bar.
We don't see you code in context, but your 'container' element has wrong. You must set a nav or div, not ul (i suggest nav tag). Remember define 'container_class' too.
Then you must define your CSS rules including your container_class in spreadsheet. If is necessary, you must use !important.
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.
I have the following html structure:
<ul class="nav navbar-nav navbar-right navbar-fw">
<li class="dropdown">Home
<ul class="dropdown-menu">
<li>coach
</li>
<li>speaker
</li>
<li>training
</li>
<li>online content
</li>
<li>coming soon
</li>
<li>corporate
</li>
</ul>
I would like to use wp_get_nav_menu_bar to display the items of my WordPress menu.
For now use this and it's a list with my items
<?php wp_nav_menu( array( 'theme_location' => 'Top' ) ); ?>
In my current web application I am making use of KnpMenuBuilder and Bootstrap to make a menu. I want to add an unordered list to a list item element, so that it appears as a dropdown menu, just like the example(s) given in the Bootstrap documentation. For this I should also add a dropdown-menu class to this <ul></ul> tag. It should look something like this:
<ul>
<li>
...
</li>
<li><!-- or this should be <li class="dropdown"> not entirely sure
if this happens with javascript or something yet -->
<a href="#" class="dropdown-toggle">
Dropdown
</a>
<ul class="dropdown-menu">
<li>Dropdown menu item 1</li>
<li>Dropdown menu item 2</li>
</ul>
</li>
</ul>
I know you can add such element in the MenuBuilder class:
public function mainMenu(FactoryInterface $factory, array $options)
{
$menu = $factory->createItem('root', array(
'childrenAttributes' => array(
'class' => 'nav navbar-nav',
),
));
$menu->addChild('Home', array('route' => 'home'));
$menu->addChild('Movies', array('route' => 'movies'))
->setAttribute('class', 'dropdown');
$menu['Movies']->addChild('Add a movie', array('route' => 'movie_create_form'));
//This renders <li>movies<ul><li>Add a movie</li></ul></li>
//I want to add the drop-down class to the <ul></ul> tag
return $menu;
}
My current result:
<!-- Ofcourse <ul> tag should be around this aswell, but my question is not about the beauty of this code -->
<li>...</li>
<li dropdown="dropdown" class="active last">
<a href="#">
Dropdown
</a>
<ul class="menu_level_1">
<li class="first last">
<a href="#">
Dropdown menu item 1
</a>
</li>
</ul>
</li>
Or: http://pastebin.com/XHyYeWer
(original: http://pastebin.com/gnK2G0uz)
How should I change my (builder class) code?
Thanks in advance.
I just need to include an html file (that has my navigation bars for all my pages).
I've tried: <?php htmlentities(file_get_contents("include/navigation.html")); ?>
But nothing shows up at all.
I've checked other questions like this and the code above is always the answer. So why is it not working for me?
Here's my navigation file if needed:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">[ ] Advanced Web Development</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Résume
</li>
<li>
Blog
</li>
<li>
Projects
</li>
<li>
Contact
</li>
<!--
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
In your above example, php is creating a string from the file, but doing nothing with it. In order to make your code work, you would need to add an echo:
<?php echo htmlentities(file_get_contents("include/navigation.html"));
This is because there are generally three ways that functions can affect things:
Returning a value (what htmlentities does)
Modifying (a) value(s) passed into them (take a look at passing by reference
Echoing something directly or to the output buffer
Since htmlentities returns a value, nothing is sent to output. You would have to either save it to a variable for output later, or echo/print it to the output now.
Alternatively, you could include it as suggested by #David.
While using the echo on your normal code would be sufficent, if you want people to be able to access the HTML, you can include it in a php file itself, anywhere except inside the <?php ?> tag.
htmlentities() does not output to the browser. You still need to echo() or otherwise output.
<?php echo htmlentities(file_get_contents("include/navigation.html")); ?>
Or as suggested in the comments use include() to embed the entire file. PHP will attempt to process the file, so make sure it is error free if it contains any PHP code.
<?php include( "include/navigation.html" ); ?>
try:
<?php
$file = htmlentities(file_get_contents("include/navigation.html"));
echo $file;
?>