I have looked at prevous questions about this and people say php and have not found an answer. how do I convert my navbar to php and use it in multiple html pages. Could someone tell me how to do so? I am currently taking a codecademy course on php and it is really hard for me to understand so please be patient.
<div class="tabs">
<ul>
<a href="http://degraphic-design.dunked.com/contact-me" style="text-decoration:none">
<li class="contact">Contact</li>
</a>
<li class="dropdown">Shop</li>
<li class="forum">Forum</li>
<a href="index.html" style="text-decoration:none">
<li class="about">About</li>
</a>
<li class="team">Team</li>
<a href="http://degraphic-design.dunked.com/" style="text-decoration:none">
<li class="portfolio">Portfolio</li>
</a>
</ul>
</div>
Say you have about.php and home.php in the root of your website. Create a directory called partials (or whatever), go into partials and put the contents of your navigation HTML in a file called nav.php. Then in about.php and home.php, use this where you want to include the navigation code
<?php include 'partials/nav.php'; ?>
Here is one way (extremly basic):
Create a PHP file called index.php
<!DOCTYPE html>
<html>
<body>
<header>
<?php
include 'header.php';
/**
* say you wanted a different header for shop
* if($_GET['page'] === 'shop') {
* include 'header-shop.php';
* } else {
* include 'header.php';
*}
*/
?>
</header>
<div id="main">
<?php
include $_GET['page'].'.php'; // assuming your storing your pages in same path as index
?>
</div>
<footer>
<?php
include 'footer.php';
?>
</footer>
</body>
</html>
Then a header.php
<div class="tabs">
<ul>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
And create your page files contact.php, shop.php ect.
Updated to a slightly more elaborate example to give you the idea.
Related
To start off, if this has already been answered please point me to the right area as I have not yet been able to find it.
I have built a web sit which contains 4+ pages and I am using the php code include(filename.php); where filename.php is the name of the php file containing my header navigation. I also have a class named "current" which, before adding the include() statement was manually placed on each link within the navigation bar. I am trying to do this using jQuery as I have had to remove this class within the linked php file. I have tried writing the code as such:
<body>
<?php
$file_included = true;
// common code used in every page
if ($file_included == true) {
include("header.php");
} else {
header("Location:remedies.php");
}
?>
<script>
$(document).ready(function() {
$("#about").addClass("current");
});
</script>
however when I test this site on my server, the "current" class does not move to the currently selected link. The code contained within the linked .php file is as follows:
<div id="title">
<header>
<img src="images/Dragon-Catcher-Web-Logo.jpg" alt="Dragon Catcher Web Design Logo" id="design" style="padding-right: 15%; padding-left: 1%; padding-top: 1%;"/>
<span style="text-align: center;">Dragon Catcher Herbs</span>
</header>
<nav>
<ul id="navlist">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Beginner Herbalists</li>
<li>Herb List</li>
<li>Remedies</li>
<li>User Recommended</li>
</ul>
</nav>
not sure where I went wrong with my code but any and all help would be great.
I used your code and make two separate files as below:
question.php
<html>
<head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<?php
include("header.php");
?>
<script>
$(document).ready(function() {
$("#about").addClass("current");
});
</script>
</body>
</html>
header.php
<nav>
<ul id="navlist">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Beginner Herbalists</li>
<li>Herb List</li>
<li>Remedies</li>
<li>User Recommended</li>
</ul>
</nav>
And css class current applies on #about.
I think you didn't included jquery.js in your code. Just try this code.
I try to use jquery pjax to load my contents in a div. this works fine, but if i reload the page i have no content. i think i need to put the page content in the else{ part, but i don't want to set the whole html in a php variable. how to fix this?
index.php:
<?php
$title = 'Home';
if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){ ?>
<div id="content">
<h1>home</h1>
</div>
<?php echo "<title>{$title}</title>";
}else{
include 'wrapper.php';
}
?>
wrapper.php:
<ul class="nav navbar-nav" style='margin-left:20px;'>
<li><a href='index.php' data-pjax='content'>Home</a></li>
<li><a href='page1.php' data-pjax='content'>Demo 1</a></li>
<li><a href='page2.php' data-pjax='content'>Demo 2</a></li>
</ul>
<div id="content"></div>
The JS:
$(document).ready(function() {
$(document).pjax('a[data-pjax]', '#content', {
fragment: '#content'
});
});
page1.php
<?php if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){ ?>
<div id="content">
<h1>Page 1</h1>
</div>
<?php } else{ include 'wrapper.php';} ?>
page2.php
<?php if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){
?>
<div id="content">
<h1>Page 2</h1>
</div>
<?php }else{
include 'wrapper.php';
}
?>
You are only including the wrapper.php when the page is requested without PJAX (== the normal way). In wrapper.php the content is empty.
In wrapper.php you should include the correct page if the request origin is not PJAX:
First of all you should rename some files. Use index.php as the main lay-out file (what you intended to do with wrapper). Add the p as query param (which can be read true $_GET in PHP) to load pages when clicking links.
Create a file home.php which will be the default page loaded in #content at index.php.
index.php
<ul class="nav navbar-nav" style='margin-left:20px;'>
<li><a href='index.php' data-pjax='content'>Home</a></li>
<li><a href='index.php?p=1' data-pjax='content'>Demo 1</a></li>
<li><a href='index.php?p=2' data-pjax='content'>Demo 2</a></li>
</ul>
<div id="content">
<?php if(!isset($_SERVER['HTTP_X_AJAX'])) {
if(!isset($_GET['p'])) {
include('home.php');
}
else {
include('page'.$_GET['p'].'.php');
}
} ?>
</div>
This is very simple example. In live applications this should be done in another way to protect the script against certain attacks.
I'm guessing you are a starter. Please take a look at CodeIgniter. It is a framework which has a lot of ready-to-use functions. It has proven to be 'easy' to learn...
I am trying to use the php include tag for my header and footer, and can't seem to find the problem. My include code is fine in my index file, and my header.php file shows no errors, but t doesn't include the file when I preview it in a browser. Is this an easy fix or am I missing something.
My index.php file include snippet
<div id="container">
<?php include('include/header.php');?>
<div id="body">
My header.php file code
<?php
echo <<<END
<header>
<nav>
<li onclick="location.href='index.html';" style="cursor:pointer;">Home</li>
<li onclick="location.href='#';" style="cursor:pointer;">Contact</li>
<li onclick="location.href='#';" style="cursor:pointer;">FAQ's</li>
<li onclick="location.href='#';" style="cursor:pointer;">Product Solutions</li>
<li onclick="location.href='#';" style="cursor:pointer;">Services</li>
<li onclick="location.href='#';" style="cursor:pointer;">Request a Quote</li>
</nav>
</header>
END;
?>
It seems ok on my computer. Are you sure that's your header file is the right directory? It should be:
---- index.php
---- include (directory)
|---- header.php
If it's ok you must file permissions and be sure that index can include the header file.
Why do you need to use heredoc syntax?
Why not do this instead:
<?php
... some code ...
?>
<header>
<nav>
<li onclick="location.href='index.html';" style="cursor:pointer;">Home</li>
<li onclick="location.href='#';" style="cursor:pointer;">Contact</li>
<li onclick="location.href='#';" style="cursor:pointer;">FAQ's</li>
<li onclick="location.href='#';" style="cursor:pointer;">Product Solutions</li>
<li onclick="location.href='#';" style="cursor:pointer;">Services</li>
<li onclick="location.href='#';" style="cursor:pointer;">Request a Quote</li>
</nav>
</header>
<?php ... more code ... ?>
<!-- more html -->
You don't need echo. Any HTML not within tags are automatically outputted anyways. Remember that PHP is based on HTML. You can think of PHP as HTML with <?php?> tags mixed in.
Change this line:
<li onclick="location.href='#';" style="cursor:pointer;">FAQ's</li>
With this:
<li onclick="location.href='#';" style="cursor:pointer;">FAQ\'s</li>
The error was this:
FAQ's
And I changed it to this:
FAQ\'s
what do you mean by
echo <<<END ???
however the file header.php is in a separate folder ? look at in the console to see if it can locate the file or not... for me i used to work with :
require_once("include/header.php");
I have a php page that has many includes. The whole page runs fine, but for my navigation bar, it does not open any page when I click on it. Please, what is missing here. Any help will be appreciated. many thanks
Here are my codes for the includes
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Packages</span></li>
<li><span>Partners</span></li>
<li><span>Gallery</span></li>
<li class='last'><span>Contact Us</span></li>
</ul>
</div>
And here is my main page code:
<body>
<div id="wrapper">
<div>
<img src="images/banner.png" width="940" height="200" />
</div>
<?php include('includes/nav.php'); ?>
<?php include('includes/slider.php'); ?>
<?php include('includes/nav.php'); ?>
<?php include('includes/contents.php'); ?>
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</div> <!-- End #wrapper -->
</body>
Not sure of your file structure, but try removing the '../' on all you links
Change this:
<li class='active'><span>Home</span></li>
to this:
<li class='active'><span>Home</span></li>
Take the ../ out of your path.
When you include the nav.htm to your main page it acts as if it is in the main folder
Therefore if you use '../' it won't find it.
I am designing my own site. First I created a template with header.php and footer.php I put them in the includes folder. So, everytime I am going to make a new page like "about page" all I have to do is to call them using the code below:
<body>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
</html>
Here is the code in my header.php
<div id="headwrapper">
<header>
<div id="logo"><img src="images/adlogo.png"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
But my index.php and my about page have the same header image. Is there a way or code that can accomplish the work for different header images for every page? Example on index.php I want to have image1 and to my about page I want to have image2. That's all thank you by the way I am not using a wordpress my site is not a wordpress.
Another solution.
In header.php you call function $_SERVER['PHP_SELF'] for get page name and then selected image for that page. You could modify like this
<?php
$imageName = "";
if($_SERVER['PHP_SELF'] == "index.php")
{
$imageName = "images/1.png";
}
elseif($_SERVER['PHP_SELF'] == "aboutus.php")
{
$imageName = "images/2.png";
}
?>
<div id="headwrapper">
<header>
<div id="logo"><img src="'".<?=$imageName?>."'"/></div>
<div id="homefeature">622x82</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>portfolio</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</div>
</header>
</div><!--end of headwrapper-->
Given your structure, I think you can set your header file like this:
<body>
<?php $header_image = "about_us_header.jpg"; ?>
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and reference the variable in your header:
<div id="headwrapper">
<header style="background: url(<?php echo $header_image; ?>);">
But wait I thought of a better way
you can do it in css like this:
<body class="aboutus">
<?php include("includes/header.php"); ?>
<?php include("includes/footer.php"); ?>
</body>
and in your css stylesheet:
body.aboutus header {
background: url(whatever.jpg);
}