TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Fluid template tutorial

Fluid templating engine

The TYPO3Buddy Fluid website is a tutorial to rebuild the TYPO3Buddy Fluid website. TYPO3Buddy is built with the TYPO3 CMS and the Fluid content and templating suite and this chapter is a TYPO3 Fluid tutorial. Fluid is part of the TYPO3 CMS as of version 4.7 by default.

Please note: this tutorial uses old conventions and places the template files and folders into the fileadmin folder. This has the advantage that you can update the files in your CMS. The downside is that all recent TYPO3 documentation refers to template files in an extension. You can use the master template extension to get started. Read the sitepackage tutorial to get up to speed.

Basic requirements and recommendations

Minimal requirement to proceed with Fluid is that you have installed TYPO3 and you are able to log in to the backend. You have set up the basics of your TYPO3 website: you need to have a file folder structure, a basic page structure and a working typoscript template in the root page. You'll also use a special page called the Storage folder, where the "Backend layouts" will be stored. All these things are described in the previous chapter.

When you're ready to go...

Next, the following will be documented:

  1. Your HTML template and its corresponding CSS file
  2. Introduction to Fluid's templates, layouts and partials
  3. Create a Fluid content template file
  4. Create a backend layout
  5. Update the typoscript "Main template" to use Fluid templating
  6. Add content to the Home page
  7. Create a Fluid website layout file
  8. Create Fluid website partial files
  9. Link the existing Fluid content template to the Fluid layout
  10. Update the typoscript "Main template" to use the Fluid layout

These are the steps to create a website with just one content template. If you want to use multiple content templates, continue with the following steps:

  1. Create additional Fluid content template files
  2. Create additional backend layouts
  3. Update the typoscript "Main template" to use the Fluid content templates
  4. Assign the new backend layouts to pages
  5. Add content to the pages


The TYPO3Buddy Fluid tutorial could not have been made without this excellent article written by Thomas Deuling, as well as another fine article written by Jhay Rollz (which is no longer online) and of course the official Fluid reference.

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.