I have my website, for example with this layout:
<?php include 'header.php';?>
<!-- CONTENT -->
<?php include 'footer.php';?>
Now, on each page, for example: home, contact, about us, etc, I have to add a class active to the menu. But since I have just one file with the header, how can I change some HTML in each single page?
Thanks, and sorry if this was asked before, I can't find this anywhere, and I don't know how to search for it.
Say, you 3 pages.
Get them in an array in header.php.
$pages = array();
$pages['home'] = 'Home';
$pages['about-us'] = 'About Us';
$pages['contact'] = 'Contact Us';
Show menu like and get current page parameter:
If the parameter matches your page, show active class.
<ul>
<?php
$current = isset($_GET['page']) ? $_GET['page'] : 'home';
if (! empty($pages)) {
foreach ($pages as $url => $title) {
$active = ($current == $page) ? 'active' : '';
// Observe, the class 'active', main logic is here.
?>
<li><?php echo $title;?></li>
<?php
}
}
?>
</ul>
Related
I have this code in header.php:
<?php
$page = "";
?>
<ul class="nav navbar-nav navbar-right nav-pos">
<li <?php if ($page == "home") { ?> class="active"<?php } ?>>Home</li>
<li <?php if($page == 'about') { ?> class="active"<?php } ?>>About us</li>
<li <?php if($page == 'contact'){ ?> class="active"<?php } ?>>Contact us</li>
<li class="hidden-xs"><i class="fa fa-search fa-rotate-90"></i></li>
</ul>
and on every page i put this code(and the name change depends on current page):
<?php include 'header.php';
$page = 'about' ?>
and in css i made this:
.active{color:red }
But it is not working... any idea why?
Thank you for time, I really appreciate it
The problem is that in your header.php you explicitly set $page = "" - which means none of the checks for $page == 'about'(etc) are passing.
Although you do set $page = 'about' in your main script, this is after the code in header.php has run, and its html output produced.
The solution is simple:
1) remove the $page = "" from header.php
2) set $page = "about" (or equivalent) before the include
You can do by using jQuery just adding this script in the footer section.
$(document).ready(function() {
// get current URL path and assign 'active' class
var pathname = window.location.pathname;
$('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
});
In your case, this will work.
$(function(){
var current = location.pathname;
$('.nav li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
});
first you should remove $page = ""; from header
<?php
$page = "";//remove this line in header file
?>
<ul class="nav navbar-nav navbar-right nav-pos">
Second in every page swap these two lines
<?php
$page = 'about';//swap these lines
include 'header.php' ;
?>
some details: when header load then $page is empty and your conditions false in li tag. so, before header load you should assign value to $page
the best way: you should used $_SERVER['REQUEST_URI'] instead of hard coded $page. Example:
$url= explode('/',$_SERVER['REQUEST_URI']);
$page = end($request_array);//this show your_page.php
$page=preg_replace('"\.php$"', '', $page )//this will remove .php extension
I just want to add a css class named "active" to my navigation links when its page opened using php.
In my website the content have broken into its individual components. And those components are separated, organized, and put back together using one index file. (website bootstrap file) Actually I am modularizing this website using php.
My Navigation is something similar to this code -
...
<li>
Dashboard
</li>
<li>
Page Two
</li>
<li>
Page Page Three
</li>
...
This is how my index.php looks like -
// Validate what page to show:
if (isset($_GET['p'])) {
$p = $_GET['p'];
} elseif (isset($_POST['p'])) { // Forms
$p = $_POST['p'];
} else {
$p = NULL;
}
// Determine what page to display:
switch ($p) {
case 'dashboard':
$page = 'dashboard.inc.php';
$page_title = 'Control Panel';
break;
case 'page-three':
$page = 'page-three.inc.php';
$page_title = 'Page Three';
break;
case 'page-two':
$page = 'page-two.inc.php';
$page_title = 'Page Two';
break;
// Default is to include the main page.
default:
$page = 'login.inc.php';
$page_title = 'Control Panel Login';
break;
} // End of main switch.
// Make sure the file exists:
if (!file_exists('./modules/' . $page)) {
$page = 'login.inc.php';
$page_title = 'Control Panel Login';
}
include('./includes/header.html');
include('./modules/' . $page);
include('./includes/footer.html');
I have no idea how to add active css class dynamically to my links. hope somebody may help me out.
Thank you.
Compare the current file with the page to load using $_SERVER['PHP_SELF'].
If they are equal:
case 'dashboard':
$page = 'dashboard.inc.php';
$page_title = 'Control Panel';
$class == ($page == $p) ? 'active' : '';
break;
And add this class to HTML.
<li class="<?php echo $class;?>">
...
if You are ok with JS/Jquery solution here it is
HTML CODE:
<ul class="menu">
<li>
Dashboard
</li>
<li>
Page Two
</li>
<li>
Page Page Three
</li>
</ul>
JS Code:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function(){
var PageName = getParameterByName('p');
$("li a[href*='"+PageName+"']").addClass("active");
});
Working example is here
http://jsfiddle.net/naveenkumarpg/f16yqrpx/3/
There are two ways of writing php snippets to place html on the home page and then html on all other pages... This is for Joomla 3.++
<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'HTML for HOME PAGE HERE';
} else {
echo 'HTML for ALL OTHER PAGES HERE';
} ?>
This code allows for just focusing on the home page only:
<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
echo 'HTML FOR HOME PAGE HERE';
}
?>
What I would like to do, specifically like the second code snippet, is focus on specific pages on the site....
The reason being is A. I don't want to create a template for every other page type I am creating... And B. I don't want to have to place template elements of styling in my html module positions. I feel the custom HTML or blog / article posts should simply be for content insertion.
So is there a way to instead of calling on the $menu->getDefault()) <<<< make that getPage???
Use JInput to get the page information from the request.
Found the answer. You can do a direct page edit and ifelse edits for multiple pages.
<?php
//This is the code for the page with menu ID 102
$menuID = JSite::getMenu()->getActive()->id ;
if ($menuID == '102')
{
echo '<strong>long</strong>';
}
?>
Here is the code for multiple pages.
<?php
//This is the code for the page with menu ID 6
$menuID = JSite::getMenu()->getActive()->id ;
if ($menuID == '6')
{
echo '';
}
elseif ($menuID == '2') //This is the HTML for page with menu ID 2
{
echo '';
}
elseif ($menuID == '4') //THis is the html for page with menu id 4
{
echo '';
}
else //This is the HTML code for the rest of the pages
{
echo '';
}
?>
Found the answer here.
Joomla if else for menu by ID or url
With my very little knowledge of jQuery and PHP, I have almost accomplished an accordion menu where the links display as 'active' when the active page is open, and the slider menu stays open on the correct section when on the active page.
I have added some php to the bottom links. The child links display as active when on the active page. However the parent element does not, and also closes itself.
I'd really appreciate any help!!!
Here's my code as it stands:
<ul id="accordion">
<ul class="parent">
<li>
CMS
<ul class="child">
<li>Intro to CMS</li>
<li>Specific CMS</li>
<li>Installing a CMS</li>
</ul>
</li>
</ul>
<ul class="parent">
<li>
<?php
if ($this_page=="Customising-Google-Forms" || $this_page=="Web-Event-Notes"){
echo "Other";
}else{
echo "Other";
}
?>
<ul class="child">
<?php
if ($this_page=="Customising-Google-Forms"){
echo "<li class=\"current\">Customising-google-forms</li>";
}else{
echo "<li>Customising Google Forms</li>";
}
?>
<?php
if ($this_page=="Web-Event-Notes"){
echo "<li class=\"current\">Web Event Notes</li>";
}else{
echo "<li>Web-Event-Notes</li>";
}
?>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function(){
// hide all links on load
$('ul.child').hide();
// for image
// $("a.slide:first").css("background-image","url('path')");
$('ul.parent a.slide').click(function(){
$('ul.parent a.slide').css("color","#000");
$('ul.parent a.slide').hover(function(){
$(this).css("color","#ef492f");
});
$('ul.parent a.slide').mouseout(function(){
$(this).css("color","#000");
});
$(this).mouseout(function(){
$(this).css("color","#000");
});
$(this).css("color","#000");
// slide all up
$('ul.child').slideUp('slow');
// show the links of current heading
$(this).next().find('a').show();
// slide down current heading
$(this).next().slideDown('fast');
// prevent default action
return false;
});
if($("ul li a").hasClass("current")) {
$(this).closest("ul").slideDown("fast") //open the menu
}
});
</script>
In my opinion the best way to accomplish this is by making a PHP array that contains the links and then build a html menu out of it. In this way PHP can control which of the links will hold the 'current' class based on the url parameters. The last step will be jquery to just grab the '.current' listitem and make it visible. The below may seem like a lot of work, but when you get it, it will be powerful and reusable :)
//Grab the page parameter somehow.. below = example
$page = $_GET['page'];
//Build menu array containing links and subs
$items = Array(
//highest level
'cms' => Array(
'title' => 'CMS',
//Array containing submenu items for cms
'subs' => Array(
'intro-to-cms' => Array('title' => 'Intro to CMS'),
'specific-cms' => Array('title' => 'Specific CMS'),
'installing-a-cms' => Array('title' => 'Installing a CMS')
),
)
);
//Display the menu
echo navlinks($items, $page);
/**
* Recursive function creates a navigation out of an array
* #param type $items
* #return string containing navigationlist
*/
function navlinks($items, $page=false)
{
$html = '<ul>';
foreach ($items AS $uri => $info) {
//Check if the pagename is the same as the link name and set it to current when it is
$html .= '<li'.($info['title'] == $page ? ' class="current"' : '').'>';
echo ' ' . $info['title'] . '';
//If the link has a sub array, recurse this function to build another list in this listitem
if (isset($info['subs']) && is_array($info['subs'])) {
$html .= navlinks($info['subs']);
}
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
I'm using following code to display my 3 level menu:
if(!$post->post_parent){
// will display the subpages of this top level page
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}else{
// diplays only the subpages of parent level
//$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
if($post->ancestors) {
// now you can get the the top ID of this page
// wp is putting the ids DESC, thats why the top level ID is the last one
$ancestors = end($post->ancestors);
$children = wp_list_pages("title_li=&child_of=".$ancestors."&echo=0");
// you will always get the whole subpages list
}
}
if ($children) { ?>
<ul id="submenu">
<?php echo $children; ?>
</ul>
<?php } ?>
It lists pages in side bar, second level then 3rd level too. I would like to include very top level too so i would like to my structure to look as follow:
*A
-a
--a
-b
--b
-c
--c
Where as above code is not listing main page i.e. *A, i hope that make sense and someone will be able to help
Thanks,
I found this code snippet at the wordpress codex site, and I think it's exactly what you're looking for, I've pasted it in for convenience:
<?php
//if the post has a parent
if($post->post_parent){
//collect ancestor pages
$relations = get_post_ancestors($post->ID);
//get child pages
$result = $wpdb->get_results( "SELECT ID FROM wp_posts WHERE post_parent = $post->ID AND post_type='page'" );
if ($result){
foreach($result as $pageID){
array_push($relations, $pageID->ID);
}
}
//add current post to pages
array_push($relations, $post->ID); // <---- THIS IS INCLUDING THE PARENT
//get comma delimited list of children and parents and self
$relations_string = implode(",",$relations);
//use include to list only the collected pages.
$sidelinks = wp_list_pages("title_li=&echo=0&include=".$relations_string);
}else{
// display only main level and children
$sidelinks = wp_list_pages("title_li=&echo=0&depth=2&child_of=".$post->ID);
}
if ($sidelinks) { ?>
<h2><?php the_title() ;?></h2>
<ul>
//links in <li> tags
<?php echo $sidelinks; ?>
</ul>
<?php } ?>
It also has some built-in logic to not display everything if this is a highest-level page. Hope this helps!
<div id="breadcrumbs">
Home
<?php
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ''.get_the_title($page->ID).'';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ' / '.$crumb;
?>
</div>
<h1><?php the_title(); ?></h1>
credit : Ivovic
from : http://wordpress.org/support/topic/display-page-parent-on-page-with-title?replies=13