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.
Related
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.
I am looping through some images of houses where all have a link to the house detail page. But i have one image that is in the that has a different link where it is being linked to the staff page.
Issue
How do i get that one link to go to the Staff detail page. I have tried to show different blocks of code depending on what class is inserted from the CMS? any suggestions?
<?php
$page_link = team;
if ( $page_link == {#page} ) {
?>
<a href="/team" class="{#remove_link} {#page}" >
<div class="project {#grey_scale} grid-item {#tile_size_width} {#tile_size_height}" style="background:url('{#image_1}{#video_image}');background-size: cover; background-position:center;">
</div>
</a>
<?php
} else {
?>
<a href="{#guid}" class="{#remove_link} {#page}" >
<div class="project {#grey_scale} grid-item {#tile_size_width} {#tile_size_height}" style="background:url('{#image_1}{#video_image}');background-size: cover; background-position:center;">
</div>
</a>
<?php
}
?>
First of all, you dont need to duplicate the whole HTML. You could just set the if around the <a> like:
<?php
$page_link = "team";
if ( $page_link == {#page} ) {
?>
<a href="/team" class="{#remove_link} {#page}" >
<?php } else { ?>
<a href="{#guid}" class="{#remove_link} {#page}" >
<?php } ?>
You need to know what is on {#page}. If it's "team", then you can do your if thing. If not, you have to adjust your $page_link to the same of your {#page} var.
If your team-page adress is something like stansmith.com/pages/team, then you have to change the <a href="/team"> to <a href="/pages/team">.
Please tell me if you need more help.
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);
My goal is to have action icons in lists that correspond to how the list item is tagged or categorized.
For example, if I have a list item that is a webinar it should have a webinar icon next to it, the next item in the list might be a white paper, which should have a white paper icon next to it. The population of the icons should be controlled by how the list item is tagged or categorized.
I don't know where to start; any suggestions are appreciated. Thanks!
EDIT:
Thought it might be helpful if I show the list I'm wanting to modify - technically, the items that I want to modify are in the span class=meta" section, but I'm open to using whatever method worls:
<ul class="sub_nav">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active last">
<a href="#resource_center" title="Resources II">
Featured Resources
</a>
</li>
</ul>
<div id="resource_center">
<?php
$resources = get_posts("post_type=resource&posts_per_page=2&cat=31&tag=featured");
?>
<?php foreach ($resources as $key => $resource): setup_postdata($resource); ?>
<?php if ($key === 0): ?>
<?php endif ?>
<p><span class="meta"><?php echo apply_filters('get_the_date',mysql2date('m.d.Y', $resource->post_date), 'm.d.Y') ?></span>
<?php echo $resource->post_title ?> – <?php echo strip_tags(get_the_excerpt()) ?></p>
<?php endforeach; ?>
<span class="more">Read More</span>
</div>
Just name all your icons after the tags they correspond to and put them in the same folder on your server (let's say http://www.yoursite.com/tagicons)
In your loop, just iterate the meta tag inside an image tag
<img src="http://www.yoursite.com/tagicons/{$tag}.png" />
Paste the code you're using to iterate your list items if you need more help.
Cheers
-D
EDIT:
I se you're using wordpress.
Refer to http://codex.wordpress.org/Function_Reference/wp_get_post_tags
to see how to get the tags you're looking for.
If you are generating the list inside the WordPress loop you can add the category as a class to the list element. For example:
...loop started
$categories = get_the_category();
$ids = '';
foreach ($categories as $category) {
$ids .= ' ' . $category->slug;
}
echo '<li class="' . $ids '">This item</li>';
...more loop
Then utilize CSS to style the list block.
While I think both of these solutions would have worked, I decided to go with a third solution I discovered as I researched options to meet my use case. This one was ideal because I was able to seamlessly fit it into my existing code structure and because I have a relatively low number of resources that I need to add the featured image to.
I added the code below, which basically uses the post's featured image as a left-aligned thumbnail.
<?php if ( has_post_thumbnail()): ?>
<?php
$thumb_id = get_post_thumbnail_id($resource->id);
$args = array(
'p' => $thumb_id,
'post_type' => 'attachment'
);
$thumb_image = get_posts($args);
$thumb_caption = $thumb_image->post_excerpt;
?>
<?php if (!empty($thumb_caption)): ?>
<div class="caption"><?php echo $thumb_caption ?></div>
<?php endif ?>
<?php the_post_thumbnail('sidebar-thumb'); ?>
<?php endif; ?>
Followed by this code snipped to grab the image and put it by the list item:
<?php echo get_the_post_thumbnail($id, 'thumbnail', array()); ?>
Here's a screen shot of my test site list section after I added the code - it's exactly what I was looking for:
Thanks for the suggestions and help, it got me moving in the right direction!
I am using php includes to limit redundancy on my pages, how can I have my navigation have the current page selected with say a certain color for the HOME button when my navigation is called from a header.php file.
If i were to say to add a "active" class to the home.php item and add a style so it looked different, that would happen across the board for all my pages, which is why I am using includes in the first place, how can I have one header.php file with my navigation, that also allows each page the ability to show the current page you are on reflected in the navigation?
This is the nav portion of the header.php file
<ul>
<li>About Us</li>
<li>Portfolio</li>
<li>News</li>
<li>Contact</li>
</ul>
This is the index.php file that the header.php file is included in
<?php
include("includes/header.php");
?>
<div class="span-8" id="welcome">
<p>Lorem ipsum</p>
</div>
<div class="span-16 last" id="slideshow">
<img src="images/introImage1.png" alt="fountain">
<img src="images/introImage2.png" alt="bench">
<img src="images/introImage3.png" alt="bridge">
</div>
<?php
include("includes/footer.php");
?>
Try this:
<ul>
<?php
$pages = array('index.php' => 'About Us', 'portfolio.php' => 'Portfolio', 'news.php' => 'News', 'contact.php' => 'Contact');
foreach($pages as $url => $title) {
$li = '<li ';
if($_SERVER[ 'PHP_SELF' ] == $url) {
$li .= 'class="active"';
}
$li .= '>' . $title . '</li>';
echo $li;
}
?>
</ul>
Another option would be to set an attribute against the body tag, and then use a matched pair to change the styling of any number of elements.
So, on your main (home) page, you may have:
<body id="home">
Home
About Us
Then, within your CSS have:
body#home a.home , body#about a.about {
color:#999;background-color:#000; }
And, yet another option would be to include a single CSS statement inside the actual page.
<style type="text/css">
a[href="<?php echo basename( $_SERVER['PHP_SELF'] ); ?>"] ,
a[href="<?php echo $_SERVER['PHP_SELF']; ?>"] {
/* Styles for Current Page Links */ }
</style>
Of course, that is dependent on the browser being able to use that CSS Selector.
And, if you want to be completely sure that all links to the file are covered (including full URIs), then also include the following selector:
a[href="http<?php
echo ( $_SERVER['HTTPS'] ? 's' : '' ).'://'.
$_SERVER['HTTP_HOST'].(
( $_SERVER['HTTPS'] && $_SERVER['SERVER_PORT']!=443 )
|| ( !$_SERVER['HTTPS'] && $_SERVER['SERVER_PORT']!=80 ) ?
':'.$_SERVER['SERVER_PORT'] : '' ).
$_SERVER['PHP_SELF']; ?>"]
UPDATED: Corrected PHP Variables to use.