I'm working with a WordPress site, using the ACF plugin and I have navigation that is in two rows. The first row <li> NEEDS to be class="active" to second row even show up. I can get either the first row to show up as active, or second but not both.
To make things more fun, there is no reliable way to figure this using child-pages (it was tried). Some of nav objects are parent pages and I have no power over that.
And since the goal is to get this working with templates, hardcoding page names isn't an option either..
I somehow have to to "go back" in code if inner <li> is marked as active.
ACF fields:
ACF has upper nav with name, link and sub-navigation repeater.
and sub-navigation repeater has name and link for every sub-page.
In code there is <li> tags inside <li> tags iterated using ACF repeater and while have rows. $lang_code is used to figure from where to pull header texts.
<?php
$lang = get_locale();
$curr_page = get_permalink(); ?>
<nav role="navigation">
<ul class="navigation">
<?php if (have_rows('navigation', $lang_code)) :
while(have_rows('navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link') ){ echo 'active'; } ?>">
<?php the_sub_field('name') ?>
<ul class="sub-navigation">
<?php if (have_rows('sub-navigation', $lang_code)) :
while(have_rows('sub-navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link')){ echo 'active'; } ?>"><?php the_sub_field('name') ?></li>
<?php endwhile; //end sub while
endif; //end sub if ?>
</ul>
</li>
<?php
endwhile; // End navigation while
endif; // End navigation if
</ul>
</nav>
https://imgur.com/a/Ws8YA
Pictures, first one: FAQ is class="active", but since Support is not, nothing is shown. The second picture is while support is class="active", showing second row of links (with support active since they happen to be same page).
I've tried all kinds of parent iterating and counters in nav columns, but I still have no working answer.
I am considering going jQuery + PHP or something like that.
Try using jQuery:
$('.sub-navigation li.active').parents('li').addClass('active');
Code above add .active class to parent <li> of child that has .active class.
Related
I would like to have an if/then argument for 2 classes (from the css) for a menu item. One where the menu item is blue if it is NOT the active page, and one where the menu item is red if it IS the active page. I have figured out the active page portion, now I am trying to figure out the if it is not active portion. I hope that makes sense. I have included a code snippit below.
<ul class="menu ul">
<li><a class="Blue <?php if($page =='home'){echo 'active';}?>" href="../index.php" >Home</a></li>
I have tried multiple variations, however I cannot figure it out. Thanks for your help!
Oleksandr is correct: It's better to have your links styles blue by default and overwrite it with the active class.
If you would want to give a hyperlink either one class or the other based on a simple condition, I would recommend this syntax:
<ul class="menu ul">
<li>
<a class="<?= $page == 'home' ? 'active' : 'Blue' ?>" href="../index.php" >Home</a>
</li>
</ul>
The example above uses the ternary operator and the echo shortcut syntax, and simply echoes one of two values based on the outcome of the condition.
as far as I understood you want to add different classes to link depending on $page variable.
for this i would recommend you to just use else statement
<ul class="menu ul">
<li><a class="<?php if($page =='home'){echo 'Blue';}else{echo 'Red';} ?>" href="../index.php" >Home</a></li>`
However it would be much better to check state of $page somewhere up (to not make spagetti code). And then echo only class in the a element.
<?php if($page =='home'){$menu_class='Blue';}else{$menu_class= 'Red';};?>
<ul class="menu ul">
<li><a class="<?php echo $menu_class; ?>" href="../index.php" >Home</a></li></pre>
I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?
Navigation looks like this
And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.
Here is the navigation menu code
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li>Home</li>
<li <?php echo $class_current; ?>>Technician</li>
<li <?php echo $class_current; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Here is the PHP function I am trying to create
function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
echo ' class="current"';
}
else {
echo '';
}
$current = classCurrent();
return $current;
}
I know this is possible, I just can't figure it all out yet.
You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:
Class Activmenu {
public $technician = true;}
alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item
if(Activemenu->technician)? echo'class="activeclass"' : 0;
Checking urls you will run into problems, if later on you have to modify your url structure.
So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.
Example:
<?php $currentPage = 'technician';
<html>
So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.
<?php if ($currentPage=="technician") echo " class=\"current\""; ?>
Now just need to repeat this step for each page of the website.
This was also answered here PHP navigation menu
and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent
As a result the navigation code will end up looking something like this
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>>Home</li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>>Technician</li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Can anyone suggest a way I can get my class="selected" to work on my navigation in Wordpress?
I have a wordpress navigation setup:
If I am on the home page, my home page class is selected.
If I want to go to page one, I want this class to change in thenavigation so only this class loads and not the home page.
I use: class="selected" to activate my roll over effect.
I can get this to work on a fixed site, just not on wordpress, any suggestions here?
<div class="nav">
<ul>
<li class="selected">Home</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
Could I use an if statement here?
<?php if(is_home() ) {
//for example load class="selected"
} else {
//for example if other page don't load class="selected"
} ?>
From what I understood, you're using a hardcoded navigation, and not wp_nav_menu() from WordPress.
So, you can conditionally check for each page you are using:
<div class="nav">
<ul>
<li<?php echo is_home()? ' class="selected"'; '';?>>
Home
</li>
<li<?php echo is_page('Contact')? ' class="selected"'; '';?>>
Contact page
</li>
<li<?php echo is_single('My first Post')? ' class="selected"'; '';?>>
Myfirst post
</li>
</ul>
</div>
You should make use of the Conditional Tags present in WordPress.
If you look at the first <li> you will see <?php echo is_home()? ' class="selected"'; '';?> This code is expressed as a ternary operator which is the equivalent of
if( is_home() ){
echo ' class="selected"'; #echo class. white space in front so that it does not stick to the "<li"
else{
echo ''; #do nothing
}
In the example above, I used three functions:
is_home() - Returns true if you are on the home page
is_page($arg) - Returns true if you are on the page specified by $arg.
is_single($arg) - Returns true if you are on the post specified by $arg.
There are other conditional tags available that you can choose to use.
I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.
How can I dynamically set the activate state to work for each page?
Here is my current nav code:
<nav id="main-menu" class="padbot">
<ul id="ce">
<li class="cemenu">About</li>
<li class="cemenu">Consulting</li>
<li class="cemenu">Intelligence</li>
<li class="cemenu">Academy</li>
<li class="cemenu">Blog</li>
<li class="cemenu">Contact</li>
</ul>
I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.
Example:
<li class="cemenu active">About</li>
Thanks!
you could try something along the lines of
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>">About</li>
You can do this way:
This will add the active class to the <a> which contains the page from the url.
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.cemenu a[href*="'+page+'"]').addClass('active');
});
and if you want to add class to its parent li the replace the last line to this and css class should be like this:
.active a{
css
properties
for active li's a
}
// using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');
or
// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');
just tryout the fiddle here
First, there is a css pseudo class prepared for styling 'active' links :
a:active {css}
For your situation, you would have to add this class to your styling :
.active a, a:active {css}
But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.
Check this article and this other one about wordpress. It will help you.
Stack Overflow references :
How do I target each menu different items on active state in Wordpress
How to add Active states and icons in wordpress wp_nav_menu()
Loosing Nav Active State in Wordpress Dynamic Menu
google search
try something like this:
<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>
<ul>
<?php foreach($pages as $url => $page): ?>
<?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
<li<?php echo $isActive ? ' class="active"' : '' ?>>
<?php echo $page ?>
</li>
<?php endforeach ?>
</ul>
It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)
You can try like this
<li class="<?php
if($this_page=='Home'){
echo 'active';
}
?>">
Home
</li>
<li class="<?php
if($this_page=='Contact'){
echo 'active';
}
?>">
Contact
</li>
And then in your home page
$this_page='Home';
And in your contact page
$this_page='Contact';
You could use preg_replace() to add class="active" like this:
ob_start();
echo '<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
I'm currently working on a site for a client - It is all working fine but within the navigation I have setup of for the child links using the following code
<div id="sub_nav_del">
<h4>Take a seat</h4>
<?php
$subnav_parent = ($post->post_parent) ? $post->post_parent : $post->ID;
$pages = get_pages('child_of=' . $subnav_parent . '&sort_column=menu_order');
$count = 0;
foreach($pages as $page)
{ ?>
<ul>
<li>
<h5 class="del">
<a href="<?php echo get_page_link($page->ID) ?>" ><?php echo $page->post_title ?></a>
</h5>
</li>
</ul>
<?php
}
?>
</div>
You can see an example at http://www.lagourmetteria.co.uk/take-a-seat/wine-room/, for that page I would like the current pages link orange.
I would like it to make the current link to be a different colour just within the child navigation. Is there a simple way to do this, unfortunately my PHP skills aren't fantastic.
You already have what you need as a class in the <body> which is wine-room (probably the slug). So in your CSS you can do the following magic:
body.wine-room a[href*="wine-room"],
body.tasting-room a[href*="tasting-room"],
body.food-drink-menu a[href*="food-drink-menu"],
body.have-it-all-private-parties a[href*="have-it-all-private-parties"]
{
color: orange !important;
}
UPDATE
Added all slugs on that submenu.
UPDATE 2
Added !important to supersede any other style.