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
Nathan Richey
Courses Plus Student 1,248 PointsWhat is the best practice to include common header and footer in my case?
I am building a site in php in which i want to seperate header and footer into include folder and then want to use it on all pages, but there is a problem, In most of the pages i need to include seperate css in the header and seperate js in the footer not for page layout but for different tasks such as for slideshow, form validation, masking, data tables etc. I don't want to create different header and footer for each page. What is the best practice to solve such type of problem.
6 Answers
Matthew Atkins
22,916 PointsYou might try wrapping your stylesheets in an if, else if statement
<?php
if (isset($slider_styles)) {
echo '<link rel="stylesheet" href="/slider.css">';
} elseif (isset($some_styles)) {
echo '<link rel="stylesheet" href="/some-styles.css">';
}
?>
and then just set the appropriate variables on each page
<?php
$slider_styles = true;
$some_styles = true;
?>
You could probably do the same thing for both CSS and JS.
Ricky Catron
13,023 PointsYou could use a variable for the file source. Something along the lines of
<?php
$css = "index.css"
$js = "index.js"
include('includes/header.php')
?>
Nathan Richey
Courses Plus Student 1,248 PointsThanks Matthew Atkins, It means that I have to use if else if... well any other way to solve this problem, or it is the best way and the best practice.
Matthew Atkins
22,916 PointsNathan Richey There are different approaches to this, but in the end the point is to conditionally load your files. You can do this through PHP as shown above or similar methods using javascript. Take a look at tools like require.js. One method being a better practice than another may just depend on your situation. But, I think one of the above examples would work just fine.
Devin Gray
39,261 PointsI'm kind of late but as far as how to include the header and footer best into your page, I just followed what the beginner PHP application said to do with my page.
So say you want the home button to glow a certain color when you're on the home page, in your index.php file you'd state a variable for the page, in the same code you inclode your header.php file, here's an example from my site. like this.
<?php $section="home" ; include('inc/header.php'); ?>
now that you have your home page set as a variable, you call that variable in an IF statement when on that page, like matthew stated, and if you have a certain class that you want applied to the active page, include that into the if statement as well:
<li class="home"><a href="<?php echo 'index.php'; ?>" class="<?php if ($section == "home") { echo "selected";} ?>">Home</a></li>
so this statement says that this is the link to the home page, and if there is a variable of "home" on the index.php file, it will echo the class "selected" into the li tag, which will give it whatever css I have already linked in the header.php file. I hope I kinda explained it.
Matthew Atkins
22,916 PointsDevin Gray This works if you want to dynamically load attributes such as classes into the HTML, but I think what Nathan Richey is asking is how to load full stylesheets or javascript files into only certain pages based on the needs of each page individually. In his example, a page may have a slide show so he wants to load the stylesheet for that slideshow on that page, but maybe not on the other pages. He is trying to take a more modular approach to loading these files to cut down on page load.
Devin Gray
39,261 PointsMatthew Atkins Oh I got you, well if that's the case then what Matthew said works perfectly, Nathan Richey, I just got mixed up on what exactly was the question, but they are similar principles on how to solve the problem.
Nathan Richey
Courses Plus Student 1,248 PointsThanks Matthew, I followed what you said, and its works fine.
Matthew Atkins
22,916 PointsGreat man, glad to help!
Ricky Catron
13,023 PointsRicky Catron
13,023 PointsSorry for the beginner question but how do I make my code example look clean like yours? I tried but all I got was bold.
Matthew Atkins
22,916 PointsMatthew Atkins
22,916 PointsNo problem! I actually did the same thing and had to edit my answer. Try removing the colon after "...lines of:" and then make sure you hit "Return" before the code block.
Ricky Catron
13,023 PointsRicky Catron
13,023 PointsThank you so much!