I'm have an issue with a WordPress theme that I am making using Twitter Bootstrap.
I have two menu's, one of which is a Nav_Walker to which that displays correctly and highlights an active post category if selected, however, the next menu is used to display child pages on the parent page and is using code to do it (See Code). It outputs all the child pages correctly but it doesn't trigger active on the child page menu entry that is being looked at therefor I can't set the active menu item to look any differently.
<?php
if ($post->post_parent)
$children = wp_list_pages("title_li=&child_of=" . $post->post_parent . "&echo=0");
else
$children = wp_list_pages("title_li=&child_of=" . $post->ID . "&echo=0");
if ($children) {
?>
<?php } ?></pre>
<ul class="nav nav-tabs nav-stacked uppercase">
<li class="menu-heading"><h6>OVERVIEW</h6></li>
<?php echo $children; ?>
</ul>
The the code outputs:
<ul class = "nav nav-tabs nav-stacked uppercase">
<li class = "menu-heading"><h6>OVERVIEW</h6></li>
<li class = "">SUB PAGE 1</li>
<li class = "">SUB PAGE 2</li>
<li class = "">SUB PAGE 3</li>
</ul>
The class for the li remains empty when the page is active.
Does anyone know how I can work around this?
Thanks in advance!!
Related
I am building a custom wordpress theme using underscores and want to add two div's inside the navigation. I know I have to use a custom Walker, but I don't know exactly how and all i can find is how to customize the list items themselves. But all I need is to div's on top of the generated list.
This is what i get now:
<div class="menu-all-pages-container">
<ul id="primary-menu" class="menu">
<li>Menu item 1</li>
<li>Menu item 1</li>
...etc
</ul>
</div>
What I want to have:
<div class="menu-all-pages-container">
<div id="mydiv"></div>
<div class="button"></div>
<ul id="primary-menu" class="menu">
<li>Menu item 1</li>
<li>Menu item 1</li>
...etc
</ul>
</div>
As I said, I think I need a custom Walker and customize the start_el() function? But I am lost after that..
Thanks in advance :)
You can use wp_nav_menu_items filter. try this:
add_filter('wp_nav_menu','add_custom_nav_elements', 10, 1);
function add_custom_nav_elements( $nav ) {
$elements = '<div id="mydiv"></div><div class="button"></div>';
return $elements . $nav;
}
If you looking for add elemets only for primary menu, try this:
add_filter('wp_nav_menu','add_custom_nav_elements', 10, 2);
function add_custom_nav_elements( $nav, $args ) {
$elements = '<div id="mydiv"></div><div class="button"></div>';
if( $args->theme_location == 'primary' )
$nav = $elements . $nav;
return $nav;
}
And add this in where you want to add menu:
<div class="menu-all-pages-container">
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</div>
i am trying to highlight the page i am in this is what i have so far
<ul class="navigation list-unstyled components">
<li class="active">
Home
</li>
<li>
Contacts
</li>
<li>
aboutus
</li>
<li>
aboutyou
</li>
</ul>
Here is the only jquery I have tried so far, but it doesn't seem to work:
$(".navigation a").on("click", function () {
$(".navigation ").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
If you're building a standard WordPress website, then your pages will reload when you click a navigation link, so even if you set the class with jQuery it will be reset on page load.
What you should do is to set the class of the navigation elements in PHP.
This code is just a mockup, please adjust it to fit your needs:
$home = is_front_page();
# Checks if it's the site front page
$contacts = is_page('contacts');
# Checks if the current page is a page called 'contacts'
$aboutus = is_page('aboutus');
# Checks if the current page is a page called 'aboutus'
$aboutyou = is_page('aboutyou');
# Checks if the current page is a page called 'aboutyou'
<ul class="navigation list-unstyled components">
<li <?php if ($home) {echo 'class="active"';} ?>>
Home
</li>
<li <?php if ($contacts) {echo 'class="active"';} ?>>
Contacts
</li>
<li <?php if ($aboutus) {echo 'class="active"';} ?>>
aboutus
</li>
<li <?php if ($aboutyou) {echo 'class="active"';} ?>>
aboutyou
</li>
</ul>
I have tried pretty much every solution that was available online but cannot get the class="active" to change dynamically for each menu section.
When someone clicks the top level menu item it opens up the second level menu and if someone click the on a second level menu item in that section class="active" needs to remain on the top level menu li tag.
I have the following function that generates my bootstrap menu:
function getMenu() {
global $connection;
mysqli_select_db($connection, "c9");
$query = ("SELECT testName, testId FROM testType");
$result_set = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($result_set)) {
$testId = $row['testId'];
$testName = $row['testName'];
echo '<li>'; //This is where class="active" needs to be added
echo '<span class="nav-label">'.$testName.'</span>';
echo '<ul class="nav nav-second-level collapse">';
echo '<li>Summary Report</li>';
echo '<li>Add Data</li>';
echo '</ul>';
echo '</li>';
}
}
And the menu structure is as follows:
<ul class="nav metismenu" id="side-menu">
<li class="active">
<a href="/">
<span class="nav-label">Summary</span>
<ul class="nav nav-second-level collapse in">
<li>Reports</li>
</ul>
</li>
<li><a href="#">
<span class="nav-label">Temperature</span>
<ul class="nav nav-second-level collapse">
<li>Summary Report</li>
<li>Add Data</li>
</ul>
I have a database which stores a hierarchy of foods.
Category(id_cat,name_cat);
his_low_cat(id_cat,id_low_cat);
A category can have 0..n low category. If it had no lower category I do a id_cat,-1 field in his_low_cat.
I do not know if it's possible but I would like to show it in a kind of "pulldown menu"
(if you have any other idea on how to show a full hierarchy please suggest it)
Like this :
echo " <div id=\"menu\">
<ul class=\"niveau1\">
<li class=\"sousmenu\">Food
<ul class=\"niveau2\">
<li class=\"sousmenu\">Sous menu 1.1
<ul class=\"niveau3\">
<li>Sous sous menu 1.1.1</li>
</ul>
</li>
<li>Sous menu 1.2</li>
</ul>
</li>
</ul>
</div>";
My first cat is "food" and then it derives into 4 lowers categories, which derive themselves in more.
The problem is that it must be dynamic and load field from my database.
The goal would be to be able to catch the clicked value and use it in another .php
How would I do this?
Recursion is definitely the way to go with this problem, I've coded up this solution:
<?php
function nestElements($elements, $depth=0)
{
foreach($elements as $elementName=>$element)
{
echo str_repeat("\t", $depth).'<ul class="niveau'.($depth+1).'">'."\n";
if(is_array($element))
{
echo str_repeat("\t", $depth+1)."<li class=\"sousmenu\">${elementName}\n";
nestElements($element, $depth+2);
echo str_repeat("\t", $depth+1)."</li>\n";
}
else
{
echo str_repeat("\t", $depth+1)."<li class=\"sousmenu\">${elementName}</li>\n";
}
echo str_repeat("\t", $depth)."</ul>\n";
}
}
nestElements(array("Food"=>array("Meat"=>array("Poultry"=>array("Chicken"=>"Meat/Poultry/Chicken"), "Beef"=>array("Hamburgers"=>"Meat/Beef/Hamburgers", "Steak"=>"Meat/Beef/Steak")), "Dairy"=>array("Cow"=>"Dairy/Cow", "Sheep"=>"Dairy/Sheep")), "name"=>"url"));
?>
Testing with this:
<?php
nestElements(array("Food"=>array("Meat"=>array("Poultry"=>array("Chicken"=>"Meat/Poultry/Chicken"), "Beef"=>array("Hamburgers"=>"Meat/Beef/Hamburgers", "Steak"=>"Meat/Beef/Steak")), "Dairy"=>array("Cow"=>"Dairy/Cow", "Sheep"=>"Dairy/Sheep")), "name"=>"url"));
?>
Results in:
<ul class="niveau1">
<li class="sousmenu">Food</li>
<ul class="niveau2">
<li class="sousmenu">Meat</li>
<ul class="niveau3">
<li class="sousmenu">Poultry</li>
<ul class="niveau4">
<li class="sousmenu">Chicken</li>
</ul>
</ul>
<ul class="niveau3">
<li class="sousmenu">Beef</li>
<ul class="niveau4">
<li class="sousmenu">Hamburgers</li>
</ul>
<ul class="niveau4">
<li class="sousmenu">Steak</li>
</ul>
</ul>
</ul>
<ul class="niveau2">
<li class="sousmenu">Dairy</li>
<ul class="niveau3">
<li class="sousmenu">Cow</li>
</ul>
<ul class="niveau3">
<li class="sousmenu">Sheep</li>
</ul>
</ul>
</ul>
<ul class="niveau1">
<li class="sousmenu">name</li>
</ul>
To parse it you'd have to make a mod_rewrite which redirects to index.php?r=TheURL and from their, explode the r parameter using "/" as the delimeter, then you have a list of menus and submenus that the clicked link was from. By adding another parameter the url coul be automatically generated.
Edit: Fixed problem with original code output seen below
<li class="sousmenu">Sheep</li>
<li class="sousmenu">Sheep</li>
To generate the array:
<?php
function genArray(&$targetArray, $parentID=null){
$res=(is_null($parentID))?mysql_query("SELECT * FROM categorie WHERE id_cat NOT IN (SELECT id_low_cat FROM hislowcat) ORDER BY id_cat DESC;"):mysql_query("SELECT *, (SELECT name_cat FROM categorie WHERE id_cat= '".$parentID ."') AS name_cat FROM hislowcat WHERE id_cat= '" .$parentID ."'");
if(!is_null($parentID) && !mysql_num_rows($res))
{
$res3=mysql_query("SELECT name_cat FROM categorie WHERE id_cat='${parentID}';");
$row3=mysql_fetch_array($res3);
$targetArray[$row3['name_cat']]=$row3['name_cat'];
return;
}
while(($row=mysql_fetch_array($res)))
{
//echo $row->name_cat;
if(is_null($parentID))
{
if(!isset($targetArray[$row['name_cat']]))
{
$targetArray[$row['name_cat']]=array();
}
genArray($targetArray[$row['name_cat']], $row['id_cat']);
}
else
{
genArray($targetArray[$row['name_cat']], $row['id_low_cat']);
}
}
}
$array=array();
genArray($array);
print_r($array);
?>
Notice how $targetArray is set up as a reference, this way we can treat it one-dimensionally.
In Wordpress, I'm looking for some way to add a "last" and a "first" class to list items inside Wordpress widgets. The HTML could look like this:
<div class="widget-area">
<ul >
<li class="widget_recent_comments">
<h3 class="widget-title">Recent comments</h3>
<ul id="recentcomments">
<li class="recentcomments">Comment 1</li>
<li class="recentcomments">Comment 2</li>
<li class="recentcomments">Comment 3</li>
<li class="recentcomments">Comment 4</li>
</ul>
</li>
<li class="widget_my_links">
<h3 class="widget-title">My links</h3>
<ul id="my-links">
<li class="item">Link 1</li>
<li class="item">Link 2</li>
<li class="item">Link 3</li>
<li class="item">Link 4</li>
<li class="item">Link 5</li>
</ul>
</li>
</ul></div>
In this example above i'd like to have first/last classes added to the li with "Comment 1", "Comment 4", "Link 1" and "Link 5".
Is there an easy workaround for this? (I don't want to do this with javascript)
Thank you.
I'm guessing these lists are generated in a loop. So what you could do, is create a variable before you go into the loop, and set it's value to 1 ($i = 1). Than at the end of the loop, add one up ($i++). Now, where you want the first/last class to appear, you can do
<?php if($i == 1):
echo ' first';
elseif( $i == $number_of_items )
echo 'last';
endif;
?>
At $i == $number_of_items, you are comparing the max with the current, so you know you have the last if the statement is true.
Hope this answers your question.
Well the first-item is easy, just use
ul#my-list li:first-child {
/* special styles */
}
It's not adding a class, but you can still style it. There is not a similar css rule for :last-child unfortunately