TYPO3 Basics: Typoscript template

Typoscript is the configuration language of TYPO3. Each website needs at least one typoscript template, which will be placed on the root page. We will call it the main typoscript template. The term template may be a little confusing, as it is not a framework in which elements will be replaced, like the HTML/Fluid templates you'll use later on. Although it is possible to use only typoscript to build an entire website, you will use a minimum of typoscript code to make TYPO3 display your website. Nevertheless this tiny piece of typoscript is still called a "template".

In this main typoscript template will be configured how the website will be created and presented. You need to create this main typoscript template. Click on "List", then click on the "Root page". Click on the green plus icon in the right (content) part of TYPO3. A list of available content elements will show, and you choose "Template":

The setup of a basic typoscript template is very simple. However, you can configure a lot of (if not all) things for your TYPO3 website with typoscript, and learning all that stuff is not easy. But don't worry, our main goal right now is to get our basic website up and running. For that, we need just 2 lines of typoscript to begin with.

In the first part, the "General" tab, you enter the title of the template, which will be "Main template". And you enter the title of the website, which will be "TYPO3Buddy" in our example. In the setup part you'll enter 3 lines of typoscript:

config.doctype = html5

page = PAGE
page.typeNum = 0

With the first line, you specify the doctype of your website. The second line creates a new content object (cObject) of the PAGE type, named "page". The typeNum property is kind of unnecessary here, as we only really need it when we have multiple page objects (when using framesets for example). Default value also is 0 for the first page object. But it's good practice to include it nevertheless. You'll end up with this:

For more information on the PAGE object, check out this page on typo3.org. To check if your website is working, you may extend the setup part with another 2 lines (yeah, I know it's dazzling) of typoscript:

page.10 = TEXT
page.10.value = Hello world!

Which will show the legendary words "Hello world" on your website, at least when you've completed the remaining steps below and saved the typoscript template. So let's continue.

Click the "Options" tab. At the "Clear" section, check the Constants and Setup checkboxes. When loading this template, you'll start clean; previously set typoscript setup and constants will be ignored. Also check the "Rootlevel" checkbox. This indicates that this template marks the start of a new website:

Next, click the "Includes" tab. You will need to include static templates. Include "CSS Styled Content (css_styled_content)" to be able to render older content elements like "Text". If you use TYPO3 7 and higher, also include "Fluid Content Elements (fluid_styled_content)" and "Fluid Content Elements CSS (fluid_styled_content)" to be able to render newer content elements like "Text &  Media". Include it, by clicking on it:

You're done! Don't forget to save the template by clicking one of the save icons. If you have added the "hello world" text to your typoscript, check your website by refreshing your browser with CTRL+F5. It's certainly very rewarding to see these two words after all that hard work! If they don't show, you missed a step.

Please note: for recent versions of TYPO3, a so called entry point is created for the website. That's the main URL at which the website is available. In our case this was http://typo3buddy/autogenerated-1. Obviously we don't want this. We want people to see the website when they visit http://typo3buddy/. On the left side, under "Site management", click on "Sites" and then click on the "edit" icon. At the "general" tab, make sure that the entry point is http://typo3buddy/. Also edit the page properties of the root page and make sure that the URL segment of that page only contains a slash (/). Edit it by clicking the "eye with chain" icon. Also note that when you edit slugs/url segments, TYPO3 will create redirects from the old slug/url to the new one. This can break your site. An easy fix is to delete all redirects. Click on "Redirects" under "Site management" and delete the redirects. Of course you need to adjust this to your own situation.

For your information, there is another way to add, edit and view typoscript templates. Click on the "Template" menu item in the "WEB" menu on the left side and then on the Root page:

In this example, the typoscript "Main template" is selected. From the pull down menu on top you can select 4 options. The constant editor lets you edit constants used by TYPO3. These are only available when the "Main template" is selected. If you edit one of the constants, they'll appear in the "Constants" parts of your typoscript main template. Info/Modify lets you edit all parts of the selected typoscript template. The object browser shows all objects from the "Setup" part. And the template analyzer is a useful tool to debug errors in your typoscript. We'll not go into all that.

To edit the setup part of your typoscript "Main template", make sure the Main template is selected, and choose "Info/Modify" from the pull down menu. You'll see the following:

When you click "Edit the whole template record", you'll see the same as when editing the typoscript in "List" mode. You're not going to do that, instead click the pencil next to "Setup" to edit the Setup part of your typoscript "Main template". The benefit of using this method is the syntax highlighting. Your typoscript code is easier to read and edit:

But we won't use this in our tutorial. We'll stick to the "Edit in List mode" method. Furthermore, the syntax hightlighter in TYPO3 6.1 doesn't recognize Fluid commands (yet). It's up to you to decide which method you'd like to use.

Next step: choose between Templavoila and Fluid templating method ->