For the sake of this tutorial, I will assume you know how to use includes for headers and footers.
Let's say you have this very simple site:
index.php
Code: Select all
<div class="starter-template">
<h1>HEADER 1</h1>
<p class="lead">CONTENT GOES HERE</p>
</div>
header.php
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE GOES HERE</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
Code: Select all
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
In index.php, we will define a title and a name for the page. They can be whatever you want, but we will call upon $current_page elsewhere, so make sure it's specific enough!
Code: Select all
<?php
//Set values for page
$page_title = "My Awesome Shrine";
$current_page = "index";
//Load header
include_once('includes/header.php');
?>
<div class="starter-template">
<h1>HEADER 1</h1>
<p class="lead">CONTENT GOES HERE</p>
</div>
We will call our custom title in the header, and add conditional statements to our navigation to add class="active" to the current page.
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $page_title; ?></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="<?php if ($current_page == "index") { ?> active<?php } ?>"><a href="home.php">Home</a></li>
<li class="<?php if ($current_page == "about") { ?> active<?php } ?>"><a href="about.php">About</a></li>
<li class="<?php if ($current_page == "contact") { ?> active<?php } ?>"><a href="contact.php">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
Conditional Loading
The same basic idea applies! So let's say on the contact page, you wish to load a contact.min.js file.
footer.php
Code: Select all
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<?php
if ($current_page == 'contact') {
echo '<script src="js/contact.min.js"></script>';
} else {
echo ' ';
}
?>
</body>
</html>
So there you go! Have fun and make beautiful dynamic shrines with highlighting menus and conditionally loading scripts!