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

HTML

Josh Vaughn
Josh Vaughn
2,289 Points
Posted by Josh Vaughn
Josh Vaughn
2,289 Points

Looking for Open Source Alternative to Dreamweaver Templates

Back in the day I used Dreamweaver - which allowed us to set up Master Templates so that repeating sections, such as headers and footers etc, could be repeated on all the pages on the site that used that template.

Now I'm using Sublime Text, Sass, and other open source methods to create sites. I would like to be able to pull a header section, or a footer section in as a partial into every page on my site - thereby allowing me to centrally manage those repeating sections and have them update on every page in the site where they are used.

Simple issue. However I'm having trouble knowing where to search to find a solution. I thought it might be Javascript Templating (Mustache, Handlebars etc) but so far that doesn't seem like what I'm looking for.

Suggestions anyone? Thanks

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

You could use PHP includes.

For example you could have the header of your website in a seperate PHP file called "header" and call it at the start of each page that requries the header, then you will only need to update the contents of header.php to change the header across all pages.

Example:

Contents of header.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
    </head>
    <body>
        <h1> This is my header </h1>

Contents of footer.php

        <p> This is my footer </p>
    </body>
</html>

and then include both for example in your index.php file.

<?php
    include('./includes/header.php');
?>

<p> This is my index page </p>

<?php
    include('./includes/footer.php');
?>

This would be the output to the browser of your index.php file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
    </head>
    <body>
        <h1> This is my header </h1>
        <p> This is my index page </p>
        <p> This is my footer </p>
    </body>
</html>

In my personal opinion using a backend such as PHP, Python, Ruby on Rails etc is a better method then using Javascript or jQuery as they rely on the user having javascript installed and or enabled.

If you are unsure where to begin with PHP there is a track here on team treehouse :)

https://teamtreehouse.com/tracks/php-development

Josh Vaughn
Josh Vaughn
2,289 Points
Josh Vaughn
Josh Vaughn
2,289 Points

Hi Ashely - thanks for the response.

I should have mentioned that I'm looking for a solution for static sites, strictly for my dev environment - not PHP sites. Unless there is a way to use PHP includes only in development and then upload the site as static, then that would be a different story.

It turns out that javascript templating is actually is probably the answer I was looking for. The tutorials for Mustache / Nunjucks etc that I found in my initial research did not focus on using them for that purpose, hence my confusion about whether I was on the right track or not.

I'm still having a bit of trouble finding clear, fairly comprehensive tutorials on how do just this one thing and get it running with Grunt. I'm a bit weak on JavaScript right now and don't have much time set aside to work on learning it all from the ground up .. I'm simply trying to solve this one issue and stay working without a major detour right now. Is it possible to use PHP only on the front-end the way I am describing here?