Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by Kim Lorimier
Kim Lorimier
6,818 Points

How do I correctly link my css file to both my index.php and my include php files when the whole site is within a folder

I have a local server with the folder Shirts4Mike.com. Within the folder I have index.php, css folder, includes folder, and images folder.

When I try to use header.php from my includes folder, the css only works on the home page, not the additional pages that are in the includes folder (shirts.php, contact.php, etc)

I have added an absolute link to the css which fixes it as long as I go to each page from the index.php page but not if I get there from the navigation buttons. Do I have the link wrong?

i.e. <li class="shirts <a href="includes/shirts.php">Shirts</a></li>

with the css as <link rel="stylesheet" href="//shirts4Mike.com/css/style.css" type="text/css">

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Hi Kim,

Let me suggest a slight restructure of your folder structure, which should help here.

Normally, your includes folder would not contain files like shirts.php or contact.php. The includes folder is generally just for partial files that we might use on other pages like shirts.php or contact.php. Files inside the includes folder would be files like header.php, footer.php, and or config.php.

I would bring all of your "page" files like shirts.php and contact.php and put them back into the root or main folder area.

It's kinda nice to have a config.php file, which will help you set up, and than allow PHP to generate the link to your CSS files automatically. It's not as difficult as it sounds.

So in your includes folder, I would have a config.php that looked like this:

<?php
define( "BASE_URL", "/yourfoldername/");
define("ROOT_PATH", $_SERVER["DOCUMENT_ROOT"] . "/yourfoldername/");

That's it.

Then, in my includes folder I might make a header.php file. That file could look like this:

<!DOCTYPE html>
  <html>
    <head>
      <title>My Title</title>
      <link href="<?php echo BASE_URL; ?>path/to/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <!--put all your site-wide navigation here-->
      <!--end this file-->

Now, on any file, whether it be an index.php file, shirts.php file, contact.php file, or whatever, you can open up the file like this

<?php
require_once("path/to/config.php");
//now we can use our config file
include(ROOT_PATH . "includes/header.php");
?>
<!--now we can continue our file with the content of this page here-->

Now because of all this, our links to our CSS and other assets like JS or images are generated for us. All we have to do is set or change our folder structure in one location (config.php file) and PHP does the rest.

This may be a lot to take in, but this exact process that this code comes from, is taught here at Treehouse. If you start with the "Build a Simple PHP Application", you will be walked through exactly the how what, and why behind all of this. I think you'll be happy if you take this course.

http://teamtreehouse.com/library/build-a-simple-php-application

Hope that helps.

Riaz Khan
Riaz Khan
10,188 Points

Hello.

I watched the video on building a PHP website where in the first module the teacher spoke about how to setup an include file. That works if the file is on the same level (where index.php resides) but if I go one level deeper /includes/header I can't get it to work. I haven't finished the whole course, does she go over how to deal with linking to files on different levels later in the course?

I followed your advice and got the css files to all link, but now my issue is I have an image in the header.php file which works in my index.php file, but won't work in /folder/folder2/file.php. because the relative links won't link. How would I go about fixing that? I am very new to PHP. Any help appreciated.

Kim Lorimier
Kim Lorimier
6,818 Points
Kim Lorimier
Kim Lorimier
6,818 Points

That is a wonderful suggestion. I had been googling a solution and come across the gist of this but not so clear and step by step. I am actually in the second topic of the PHP class right now. I really like it and find that PHP makes a lot of sense to me. Thanks again.

Anthony T
Anthony T
7,968 Points
Anthony T
Anthony T
7,968 Points

I have tried this and didn't work. Probably because I am working locally. Would that be the case?