I have pretty long nav here, which I have to import to WordPress.
<header class="small">
<div class="yellow-stripe"></div>
<div class="container">
<nav role="navigation">
<ul class="navigation">
<li>
About us
<ul class="sub-navigation">
<li>We are</li>
<li>Our story</li>
<li>Why Ledil</li>
<li>Where</li>
<li>Management</li>
<li>Investors</li>
</ul>
</li>
<li>News</li>
<li>Events</li>
<li>FAQ</li>
</ul>
</nav>
<ul class="lang">
<li class="active">EN</li>
<li>ES</li>
<li>RUS</li>
</ul>
</div>
<div class="nav-button">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</header>
It's made in HTML and now I have to import it to WordPress. I got WordPress to include the header, and to load the whole thing just fine, and it looks great on page, but I would need to add class="active" for bootstrap nav to current page and to child pages too.
I found some answers by googling, but I didn't really get very far.
My function.php looks like this:
<?php
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
add_filter('nav_menu_css_class', 'special_nav_class', 10, 2);
function special_nav_class($classes, $item){
if( in_array('current_page_parent', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
?>
I'm not really sure what I should try. I find the whole WordPress thing very strange.
There seems to be no current_page_item class here.. should I do anything special to enable it?
li.current_page_parent a {} won't work, nor will setting class="<?php if (is_page('name-of-page')) echo 'active'; ?>" inside a tags... goddamn WordPress...
Never mind.. I'm just bit slow.... I put class="<?php if (is_page('why')) echo 'active'; ?>" inside every li element.
If anyone ends up here:
You should check if the page is active or the page is child of another page
<li class="<?php if (is_page('offices')) echo 'active'; ?>">Offices</li>
Checks if page is "offices" and
<li class="<?php if (is_page_child(143)) echo 'active'; ?> echo 'active'; ?>">
Checks if page is child page of page with id "143" and then echoes "active" inside class=" "
Related
I'm trying to style the active link with is_page() function. And it works for the first nav item. But when I click the "om" link it will get styling, but the styling for "hem" remains. But when I click the "blogg" and "tutorial" links none of the links gets any styling.
This is the code that I have in header.php.
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("/om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("/blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("/tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
Is this the wrong way to use the is_page()function? I'm a little lost here. The styling that gets applied is just a simple text-decoration: underline; CSS style.
Try this
<nav>
<button class="menuButton">Meny</button>
<div class="menu">
x
<ul>
<h2>Meny</h2>
<li class="<?php if (is_page("")) { echo "active-page"; } ?>">Hem</li>
<li class="<?php if (is_page("om")) { echo "active-page"; } ?>">Om</li>
<li class="<?php if (is_page("blogg")) { echo "active-page"; } ?>">Blogg arkiv</li>
<li class="<?php if (is_page("tutorial")) { echo "active-page"; } ?>">Tutorials arkiv</li>
</ul>
</div>
</nav>
I'm trying to make an active navigation bar using PHP where the current page will be highlighted or colored in the navigation bar. The code I used:
<ul class="topmenu">
<li <?php if($_GET['page']="home") { ?> class="active" <?php } ?>>
<b>Bienvenue</b>
</li>
<li <?php if($_GET['page']="livres") { ?> class="active" <?php } ?>>
<b>Livres</b>
</li>
<li <?php if($_GET['page']="bibliotheque") { ?> class="active" <?php } ?>>
<b>Bibliothèque</b>
</li>
<li <?php if($_GET['page']="universite") { ?> class="active" <?php } ?>>
<b>L'université</b>
</li>
<li <?php if($_GET['page']="contact") { ?> class="active" <?php } ?>>
<b>Contact</b>
</li>
</ul>
The code will put the attribut in the class active if the page is the current page in the navigation bar. However, all the attributs will be given the class active in this case. How do I fix this?
P.S: I am not looking for any JS or jQuery alternatives, I'm trying to make this work with PHP only.
You could use $_SERVER['SCRIPT_NAME'].
<ul class="topmenu">
<li <?php if($_SERVER['SCRIPT_NAME']=="/home.php") { ?> class="active" <?php } ?>><b>Bienvenue</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/livres.php") { ?> class="active" <?php } ?>><b>Livres</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/bibliotheque.php") { ?> class="active" <?php } ?>><b>Bibliothèque</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/universite.php") { ?> class="active" <?php } ?>><b>L'université</b></li>
<li <?php if($_SERVER['SCRIPT_NAME']=="/contact.php") { ?> class="active" <?php } ?>><b>Contact</b></li>
</ul>
I don't use PHP, but give the current page the active tag, and change it per file. Then a single class definition in the CSS handles changing the color for each page.
HTML:
<nav>
<a class="active" href="/home/">Home</a>
Calendar
Community
</nav>
CSS:
.active {
background-color: #4CAF50;
}
Declare page variables at the very top of each individual page.
Example: <? $page="home";?>
For each list item in your nav bar add if statment with corresponding variable and active class.
Example: <li class="<?if($page=="home"){?>active<?}?>"><b>Bienvenue</b></li>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.
I'm using bootstrap 4 class. I've achieved Active Class selection something like this.
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile1.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile1.php">Home
</a>
</li>
<li class="nav-item">
<a
<?php if ($_SERVER['SCRIPT_NAME'] == "/somepath/yourfile2.php") { ?>
class="nav-link active"
<?php } else { ?>
class="nav-link"
<?php } ?>
href="yourfile2.php">Home
</a>
</li>
Repeat this logic for further li tags. Hope this helps someone else.
The code work correctly if you use "==" instead of "=" in The if construct
Еxample:
if($_GET['page'] **==** "home")...
Instead:
if($_GET['page'] **=** "home")...
Hope this helps someone else...
I'm creating a website..When it comes to the navigation menu, I listed it and need the nav bar class to be active when that menu is clicked. It's fine to give class="active" for the list tag. But I need it to be active only when clicked. How can I achieve this .?
My list is :
<div class="menu">
<ul class="nav" id="nav">
<li class="active">
<?php echo anchor("cntrl/index","Home"); ?>
</li>
<li><?php echo $this->session->userdata('user_name'); ?></li>
<li>About</li>
<li>
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
<li>
<?php echo anchor('cntrl/logout','Logout'); ?>
</li>
<div class="clearfix"></div>
</ul>
<script type="text/javascript" src="<?php echo base_url(); ?>/js/responsive-nav.js"></script>
</div>
Well, I handle this sort of issue as follows:
set the active link (which is resided in the url when the link is clicked) into an variable in the controller function which is called by the link
$data['active_link'] = 'home'; # for example
check it in the view file (JS):
$(document).ready(function(){
var active_link = "<?php echo $active_link;?>";
$("li").removeClass('active');
$("#"+active_link).addClass('active');
});
Use the following code.
<li class="<?php echo (endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')? 'active':''); ?>">
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
Main part of this code is
endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')
Where $_SERVER['REQUEST_URI'] is your current URL. and 'cntrl/jobs' is your menu which is being checked with current URL.
I am using the Bootstrap navigation tabs to split a page (posts on my site. One page shows the posts which the user has made. The other page shows all posts. I am using $_GET variables to paginate the pages.
<ul class="nav nav-tabs" id="myTab">
<li class="active">My Posts</li>
<li>All Posts</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="myPosts">
<?php include "myPosts.php"; ?></div>
<div class="tab-pane" id="allPosts">
<?php include "allPosts.php"; ?></div>
</div>
I am displaying the content on each tab by including the relevant page link.
Here is an example of one of the links which should take the user to page 2.
2
This works fine for myPosts, but when I click on the second tab( all posts) and attempt to paginate, it takes me to the second page of myPosts. The pagination is all url based, so is there anyway to feed into the url what tab/div is active?
In the code you posted, you have <div class="tab-pane active" id="myPosts">
So the active class is hard coded in that div. If that's what you want, great... otherwise, I think we need to do something like this untested code when we generate the list:
<?php
//dummy data
$pages=array(
array('id'=>'1','posts'=>array('id'=>1,'content'=>'Go Bucks')),
array('id'=>'2'),//more posts
array('id'=>'3'),
);
?>
<ul class="nav">
<?php foreach($pages as $page): ?>
<li class="<?= ($page['id']===$_GET['page']) ? ' active':null ?>">
Page <?= $page['id'] ?>
</li>
<?php endforeach; ?>
</ul>
<div class="tab-content">
<?php foreach($pages as $page): ?>
<div class="tab-pane<?php if($page['id']===$_GET['page']){echo ' active in';} ?>">
//foreach posts here
</div>
<?php endforeach; ?>
</div>
The idea I'm trying to demonstrate is to test the page ID vs the $_GET['page'] value.
Another idea for you: check out bootstrap's example" http://getbootstrap.com/javascript/#tabs
You may enjoy using javascript here, or at least to inspect their example to work out the syntax and behavior you want.
I have made a navigation in php, which works perfect, well, almost perfect. I have 6 pages site and button of active page is highlighted with a different color. In 4 pages it works, but for "gold going green" and "About Ecuador" link remains not highlighted. Here is the code I used:
<?php
//initialize the page variables here so no errors occur in some server environments
$index="myButtons";
$about="myButtons";
$gold="myButtons";
$ecuador="myButtons";
$contact="myButtons";
$documents="myButtons";
//this line gets the file name without the dot and extension
$menuLinkid=basename($_SERVER['PHP_SELF'], ".php");
if($menuLinkid=="index"){
$index='myActiveButton';
} else if($menuLinkid=="about"){
$about='myActiveButton';
} else if($menuLinkid=="gold"){
$gold='myActiveButton';
} else if($menuLinkid=="ecuador"){
$ecuador='myActiveLink';
} else if($menuLinkid=="contact"){
$contact='myActiveButton';
} else if($menuLinkid=="documents"){
$documents='myActiveButton';
}
?>
<div id="header">
<div id="innerheader">
<h1 id="logo"><img src="img/logo.gif" /></h1>
<nav id="navigation">
<ul class="menu">
<li><a class="<?php echo $index; ?>" href="../index.php">Home</a></li>
<li>/</li>
<li><a class="<?php echo $about; ?>" href="../about.php">About</a></li>
<li>/</li>
<li><a class="<?php echo $gold; ?>" href="../gold-going-green.php">Gold going green</a> </li>
<li>/</li>
<li><a class="<?php echo $ecuador; ?>" href="../about-ecuador.php">About Ecuador</a></li>
<li>/</li>
<li><a class="<?php echo $contact; ?>" href="../contact.php">Contact</a></li>
<li>/</li>
<li><a class="<?php echo $documents; ?>" href="../documents.php">Documents</a></li>
</ul>
</nav>
</div><!-- /innerheader -->
</div><!-- /header -->
You set everthing to 'myActiveButton', and use myActiveLink for ecuador:
$ecuador='myActiveLink';
Try this:
$ecuador='myActiveButton';
Change,
else if($menuLinkid=="gold"){
$gold='myActiveButton';
to
else if($menuLinkid=="gold-going-green"){
$gold='myActiveButton';
& Change
$ecuador='myActiveLink';
to
$ecuador='myActiveButton';
and recheck.