0

So I've recently discovered how to use php includes to include a footer and header in each of my files to avoid copy pasting all the header/footer code to each file. But let's say I have a footer.php, header.php, home.php, and about.php

Do I have my title, opening html/body tag, etc. in the header.php or home.php and about.php. 

//header.php
<html>
   <head>
      links to header.css
      links to home.css
      links to about.css
   </head>
   <body>

//home.php
<?php include("header.php"); ?>  //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
   </body>
</html>

What Should I do to fix this? One way I thought of is to remove the beginning part(html,head,title) of the header.php file and move it home.css and about.css so they each have their own css links.

Improve this question
5
  • 1
    This is HTML 101 stuff. header-related code belongs in <head></head>. Markup tags belong in <body></body>. Commented Jul 1, 2016 at 22:56
  • at the header you start your html document and body(if you want) at the body you display the content and at the footer you close html, body tags Commented Jul 1, 2016 at 22:58
  • 1
    Could you link me to where it says that header-related code should be in the <head>. By header-related, I'm talking about logo and nav. I'm certain this goes in the body. @Fred-ii- Commented Jul 1, 2016 at 23:00
  • @MancharyManchaary I know how to do that, but my question is regarding the issue when I use include. In my header file I start my html doc and body. I then include this header file in my home file. However, this means I have to link home.css inside of header because the header file starts the html and body. By doing this, every file that includes the header file will inherently apply the home.css file Commented Jul 1, 2016 at 23:03
  • @Justin in your header.php you can use something like $_SERVER['REQUEST_URI'] to know at what page the header.php are, and that will give you ability to use if/else to include different kind of *.css files, just what you need for that page. for example $_SERVER['REQUEST_URI'] == '/' is a home page, $_SERVER['REQUEST_URI'] == '/about' is about page etc. You can create a php function to echo out your css links depending on what page header.php are: function getStyles() and use switch to include different kind of css files. Commented Jul 1, 2016 at 23:13

3 Answers 3

Reset to default
2

You're on the right track. Break out the stylesheets as well as the javascripts into other php files and include them as well. So all pages have the following structure.

home.php

<?php $this_page = "home.php"; 
      include "template.php";

For other pages, just replace the $this_page variable. The structure common to all pages is actually the template.

template.php

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <!-- CSS-->
        <?php include "stylesheets.php" ?>
    </head>
    <body>
        <!-- common header -->
        <?php include "header.php" ?>

        <section>
            <!-- PAGE CONTENT HERE determined by $this_page value -->
            <!-- 'content_home.php', 'content_about.php'... have the content-->
            <?php include "content_$this_page" ?>
        </section>

        <!-- common footer -->
        <?php include "footer.php" ?>

        <!-- link javascript files -->
        <?php include "scripts.php" ?>
    </body>
</html>

The only thing that changes from one page to the next is the value of $this_page. It's what determines which content gets loaded in the template above, and it also determines which CSS and JS files to include.

stylesheets.php

<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live

//Link each page to its CSS file
$styles = [
    'home.php' => 'home.css',
    'about.php' => 'about.css',
    'contact.php' => 'contact.css',
];

?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>

The same approach can be used with the javascript you link to in scripts.php. Now that your HTML is into discrete modules, it is easy to edit a part of your site without worrying about another part breaking. In particular I recommend never to open a tag in one php file and close it in another because that would be a nightmare to debug, maintain and modify as your site gets bigger.

About paths: Remember that when the browser sees the page, in place of include "stylesheets.php" and include "scripts.php", it will see the echoed contents of that file exactly as they are. So in those files you want your path to be either:

  1. absolute paths from your domain root (simplest)
  2. relative paths from the location of the top-level php file (eg home.php)
  3. just the file name, if it is located in PHP's include PATH (places where PHP looks for content by default before throwing an error)
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Sorry, I'm new to PHP and I kept rereading your explanation but the one part I couldn't get was: "Note that because this file is included after $this_page was set in template.php, you can change the stylesheets you include based on the value of $this_page." I'm not sure why we include the current page we're on (<?php include $this_page ?>) and how would we change the stylesheets.
Thank you very much for the edit. I was able to understand everything fully except for one part still. Your home.php includes template.php which includes home.php leading to an endless cycle so where would you have the code specific to each website?
@Justin You're right, I introduced an error during the multiple edit cycles. The actual content is hosted in content_home.php and that's what is included between the body tags in template.php. Updated my answer and it should be fixed.
And also to make sure, under your stylesheets.php should you add 2 more links for the header.css and footer.css? I don't see how else we would include the .css for the header and the footer
I would put CSS rules that I want on all pages in common.css. You could break out these rules in more CSS files but I don't see the benefit since you want these rules everywhere.
|
1

For header and nav you have to create a seperate file like nav.php which will contain only the nav and your site header not <head></head> and include it after your header.php. LIKE

//Home.php
<?php 
 include("header.php"); this will contain your head part mostly your .css and .js files
 include("nav.php"); This will only contain header and nav
 // home.php code goes here
?>

Also use below code will automatically get path to your root.

<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>

Then Add your files like this

 <link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">
Improve this answer

8 Comments

Sorry, but I'm not sure purpose the header.php in your example is use for. If my home.php wants to include home.css, how does the header.php do so? Thanks
if you include your home.css in header.php it will automatically be added to your home.php after you use include('header.php') this statment at the top of your home.php
But then every other php file, xyz.php, abc.php will also have access to header.php and might be accidentally styled
so don't include the include('header.php') at the top of other .php files where you don't want this thing.
you must visit this site to understand the structure. apaddedcell.com/…
|
0

the bottom line is your code being accessible & easy to maintain, I would have a head.php, header.php & footer.php file. In the head.php you may want to include your config.php if you are connecting to a database & also have all the <html><head><title><link><script> tags you will include in every page then on your index.php or home.php

include('head.php');
include('header.php');

etc etc

Improve this answer

5 Comments

So if I have another page such as about.php and it needs about.css, would I link about.css inside head.php? I thought this would create problems of certain elements accidentally being styled from different .css files. Or should I play really close attention to what I name my classes to solve this issue?
I would pay close attention to classes & id's, have one or as few css files as possible, again coming back to ease of maintenance & trying to minimize http requests if speed or SEO is important.
You will need to remember if you open your html tags in the head.php to close them in the footer.php
Hmm, I would be careful about opening a tag in one file and closing it in another. This makes for very difficult to debug code, and modifications will be complicated. I would rather nest include calls between tags. This is how I built my own pages (see my solution for details).
There is always more then one way for a solution, my logic is head is always first & footer is always last I every page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.