Menu icon Foundation
Avoid repeating same code on every page

I'm new to Foundation and looking for the best practice to avoid repeating the same code (header, footer, etc) on each page of my website. In the past I've used php includes but wasnt sure if there was a better way with the Foundation Framework?

repeating regionsheaderfooterphp include

I'm new to Foundation and looking for the best practice to avoid repeating the same code (header, footer, etc) on each page of my website. In the past I've used php includes but wasnt sure if there was a better way with the Foundation Framework?

Brandon Arnold about 5 years ago

You can use PHP just fine with Foundation. For the docs and some client work we've had great luck with Assemble http://assemble.io/ and some ZURBians even use Mixture http://mixture.io/

Use what ever is comfortable for you.

JapperCat about 5 years ago

Thanks Brandon for your advice. I'm still in the testing phase with Foundation (already tried Bootstrap) and not sure how to use assemble.io or mixture.io ... and there's not enough time to learn right now. I've used php includes in previous sites with no problem, but on this particular site, I'm trying to avoid changing entire html site over to php extensions just so I can use php includes for the header and footer of every page.

Karl Ward about 5 years ago

Foundation gives you the tools for the layout, but it is up to you to use any CMS or backend (PHP etc) to add header/footer into a template that is included for every page. You could also use Ajax to load content into a page with state header/footer sections, but that would likely require some backend also ...

Dustin Stage about 5 years ago

Well definitely not it's initial purpose, It may be possible to use Interchange to load in some of this content. It seems to me that you could put your header and your footer into their own html files and load them in as the default.

<div data-interchange="[../header.html, (default)]"></div>
<section id="body">
...some content goes here...
</section>
<div data-interchange="[../footer.html, (default)]"></div>

I don't know if I like this approach as it requires some crucial pieces of a webpage reliant on javascript (a user who doesn't have javascript enabled wouldn't see the header or footer), but it can be done.

Marv Steigman about 5 years ago

That was a clever idea but doesn't seem to work correctly for me. Didn't spend a lot of time on it but although content comes in fine, top-bar links stop working.

If someone can make it work, please post back here.

Karl Ward about 5 years ago

I would avoid that suggestion. First of all, your main CSS and scripts (including Foundation) are usually included the header or footer, so interchange wont eve work since its not loaded yet! Besides, it is bad fior performance to have to split the page into 3 sections and load 2 sections with ajax.

Why are you not using PHP (or other backend) for this simple process? That is the BEST way to handle it.