Justin Justin - 5 months ago 25
HTML Question

How to properly link CSS files with PHP footer and header

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.

Answer

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" 
    <?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>
        <!-- build navigation bar -->
        <?php include "header.php";?>
        <!-- main content -->
        <section>
            <!-- PAGE CONTENT HERE determined by $this_page value -->
            <!-- 'content_home.php', 'content_about.php'... have the content-->
            <?php include "content_$this_page" ?>
        </section>
        <section>
            <!-- include common footer -->
            <?php include "footer.php";?>
        </section>

        <!-- 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. Note that because stylesheets.php is included after $this_page variable is set, you can change the stylesheets you include based on the value of $this_page.

stylesheets.php

<?php
$folder = "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="<?="$folder/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$folder/$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)