I am creating a website using HTML/bootstrap and to reduce the repetition of same code I tried using PHP include for footer and sidebar, like this:
<html>
<body>
<?php include('navigation.php'); ?>
Contents of this page here...
<?php include('sidebar.php'); ?>
<?php include('footer.php'); ?>
</body>
</html>
I wanted to do the same thing for navigation menu also, But as the highlighted links changes with each page I am not sure how to change that dynamically.
Since I am using bootstrap just need some method by which I can manipulate the class="active" in the menu links.
(NB: new to php.)
There are tho easy ways to do that. The best way to me is to put the contents of your navigation.php file in a function which has an argument. Then you call the function after your include and you pass as argument a number or a string which represents the item you need to put as active.
Your function then would be something like this:
<?php
function displayNavBar($activeItem){ ?>
<li class="">
<ul class="" > <li <?php if($activeItem=="Home"){echo "class='active'";}?>>
Home</li> <li>contact</li> <li class="active">privacy</li> <li>about</li </ul> </li>
<?php } ?>
Obviously I have written the cose only for the first item, you need to do the same with the others. And then in your file you have to call the function created:
displayNavBar("Home"):
I'm not sure about the structure of your site, but usually you would read the current url and set the active class according to that. So using, for example:
$current_page = $_SERVER['PHP_SELF'];
If you were at /index.php, then you would have
$current_page = '/index.php';
Then it is a simple matter of saying
<li<?php echo $current_page=='/index.php' ? ' class="active"' : ''; ?>>Home</li>
<li<?php echo $current_page=='/about.php' ? ' class="active"' : ''; ?>>About</li>
This is just an example. Set the current page as above, see what the result is using echo, then set the link as below.
Related
Along the top of my html template are nav links to individual pages such as home, contact, about and privacy.
These are the same on each page with one small difference, whichever page you're on is highlighted on the navbar.
This is achieved like this:
<li class="current">Home</li>
<li>Contact</li>
<li>About</li>
<li>Privacy</li>
In the above example, the Home page will be highlighted due to the use of class="current".
But I want to rename my pages as .php and to have the nav links in a separate header.php file which gets included in every page.
But this will mean that only the home page will be highlighted, regardless of what page you're on, as there's only one header.php.
Is there a way to get the class="current" to reflect the particular page name that is being viewed, eg contact.php ?
Something along the lines of class="current" = pagename ?
Or something like that.
You can assign Active class like bellow
Suppose your current page is contact.php
<?php
$current_url = 'index.php';
?>
<li <?php if($current_url == 'index.php'){ echo 'class="current"';}?>>Home</li>
<li <?php if($current_url == 'contact.php'){ echo 'class="current"';}?>>Contact</li>
<li <?php if($current_url == 'about.php'){ echo 'class="current"';}?>>About</li>
<li <?php if($current_url == 'privacy.php'){ echo 'class="current"';}?>>Privacy</li>
you can do like this.
$filename = basename($_SERVER['PHP_SELF']); // will retrieve the php file name.
<li <?php echo ($filename == 'index.php')? 'class="current"':''; ?>>Home</li>
<li>Contact</li>
<li>About</li>
<li>Privacy</li>
Like this to all <li> tags
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);
In my html page, I use a PHP include to insert my site-wide header:
<?php include 'header.php'; ?>
Here is the code in header.php:
<div id="header">
<div id="navigation">
<ul>
<li>home</li>
<li>about us</li>
<li>competition</li>
<li>media</li>
<li>sponsors</li>
<li>contact us</li>
</ul>
</div>
</div>
Here is the CSS in the header of the HTML document:
#nav_about { color:#4c005c; }
The "active" class in the inserted code is to change the color of that link to signify what page you are on. That functions fine, as "active" is defined in the CSS document linked to the html file. I want to modify the color of a particular link depending on what page it is included in. Thing is, the CSS on that page (the one defining #nav_about) does not apply when I test it out. The include works fine though.
In summary, I need to find a way to modify a site-wide snippet of HTML that is inserted via a PHP include with CSS on that page it is inserted in.
I am new to HTML and PHP, so I assume it is some lack of knowledge here.
A simple way to do change the class of the HTML element based on the current page you are on in PHP might look something like this:
<?php
$nav_links = array(
'/index.php' => array('id' => 'nav_home', 'label' => 'Home'),
'/about_us.php' => array('id' => 'nav_about', 'label' => 'About Us'),
// and so on for each link
);
?>
<div id="header">
<div id="navigation">
<ul>
<?php
foreach ($nav_links as $href => $link_info) {
if ($_SERVER['REQUEST_URI'] === $href) {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
} else {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
}
}
?>
</ul>
</div>
</div>
Here you would just apply class=active for the link that corresponds to the currently viewed page. This also makes it really easy to separate out you page/link configuration if you so desire.
Sounds like a selector specificity issue. What's the CSS for your navigation links?
If it's something like #navigation li {color: #abc}, that will take priority over the #nav_about selector.
Selector specificity is ranked by the number of ids, classes, and elements in each.
1 id + 1 element > 1 id.
Increase the specificity of the #nav_about selector (e.g. change it to #navigation #nav_about) and you should be fine.
Try using the traditional way, inside the PHP tags,
<?php
echo "<link rel='stylesheet' href='css-filename.css' type='text/css'>";
?>