Here to learn something? 

You’re in the right place.

These guides are short, focused, and easy to follow. Each one walks you through a single task — no detours, no surprises. Whether you're setting up TYPO3 for the first time or customizing content elements, you’ll find just one way to do it here: the way that works.

• No prior TYPO3 experience required
• Guaranteed outcome at the end of each guide
• Less than 30 minutes per guide

👉 Start exploring the guides now — or check out the Guides Registry to see the full list.

Want to contribute? 

We’d love your help — whether you want to fix a typo or write your own guide. You don’t need to be a professional writer, just someone who knows how to do something in TYPO3 and wants to help others succeed.

The Contributor Guide shows you how to get started.

Topics 

• Meet the TYPO3 Community
• Installation
• Basic Configuration
• Content Creation
• Site Packages

Guides 

• Sign Up for a My TYPO3 Account
• Sign Up for a TYPO3 Slack Account
• Edit Your Public My TYPO3 Profile

Learning objective 

In this step-by-step guide you will edit your profile information and change the visibility (privacy) settings for your information.

Here's an example of a real public profile, to show you how your profile could look:

Prerequisites 

Watch the video 

Watch this YouTube video to follow along with the steps below.

Navigate to the edit profile page 

In order to edit your profile, you must firs log in to your My TYPO3 account and find your way to the edit profile page.

1. In your web browser, navigate to my.typo3.org/login. If you are already logged in, you can continue from step 4.
2. Enter your username and password in the appropriate fields.
3. Click the Log in button. You will be forwarded to your internal user profile page.

4. In the large orange area, just below your name, click on the Manage link. You will be directed to your profile settings page.
5. In the navigation menu to the left, click on Profile. You will now see your edit profile page.

Edit your profile 

The edit profile page shows you information about your profile image (avatar), as well as editing fields for your profile information.

1. Fill in the information you like in the appropriate fields.

2. Towards the bottom of the page, click the black Add button to create links that can be listed on your profile. Each link has three elements:

   • An orange drop-down menu for selecting the type of link. Example: Facebook or Bluesky.
   • A field for the URL or username you would like to link to, depending on your selection in the drop-down menu.
   • A checkbox to highlight the link. Checking it will display the link at the top of your profile.

3. Click the orange Save button at the bottom of the page to save your changes.

Configuring the visibility of your information 

Your profile information may still not be visible on your public profile page. This is because your profile information is hidden by default, so you must update its visibility settings.

To the right of almost every field is a drop-down menu where you can choose the visibility of that field's information. Here's an example of how it looks:

1. For each field, use the drop-down menu to select the visibility setting you would like. The visibility setting is updated automatically, so there is no need to click the Save button.

Access more privacy and visibility settings 

You can configure the visibility of even more information on the Privacy settings page.

1. In the navigation menu to the left of the form, click on Privacy settings. You will be taken to a Privacy settings page looking something like this:

2. For each entry, use the drop-down menu on the right to select the visibility setting you would like. The visibility setting is updated automatically, so there is no need to click the Save button.

Check your profile 

It is now time to check how your profile is looking. As the fields that are visible may change whether you are logged in or not, it is also good to look at the profile in your browser's incognito mode or private browsing.

1. Click the black View public profile button to see your public profile as it looks now.
2. Copy the URL of the page.
3. Open a new incognito mode or private browsing window. In this window you are no longer logged in.
4. Paste in the URL of your profile page in the address bar.
5. Hit enter to visit the URL. You can now see your profile as others see it, if they are not logged in.

If you are missing some information, you can go back to the Privacy settings page and set more fields to Public.

Summary 

Congratulations! You have now edited your public My TYPO3 profile and changed the visibility settings for the fields.

Next steps 

Now that you have edited your public My TYPO3 profile, you might like to:

• Ask a colleague for their My TYPO3 username and visit their profile at my.typo3.org/u/<username>.

Resources 

• Set up a Gravatar account
• Read more about Avatars on Gravatar's support page

Learning objective 

In this step-by-step guide you will sign up for your own My TYPO3 account.

Prerequisites 

Registration form 

1. Visit my.typo3.org/register to start the process.
2. Fill in the registration form. Take care to read the instructions below each field.

4. Check the I have read and accept the privacy policy checkbox if it is OK for you.
5. Click the orange Register button. If you have errors in the form, you will be told so. Otherwise, you will be directed to the my.typo3.org home page. It will display this confirmation message:

Confirm your email adress 

During the registration process, you will need to confirm your email address.

1. Check your email. You should have received an email with the subject "Confirm your registration on my.typo3.org."
2. Open the email. It should look similar to the screenshot below:

3. Click the orange Confirm your account button. You will be directed to the my.typo3.org website, where a message will tell you that your email has been confirmed.

You should now be able to log in with your new account at my.typo3.org/login.

Summary 

Congratulations! You have now registered your My TYPO3 account.

Next steps 

Now that you have completed the registration process, you might like to:

• Sign Up for a TYPO3 Slack Account
• Edit Your Public My TYPO3 Profile

Resources 

• [Frequently asked questions about your My TYPO3 profile])(https://my.typo3.org/faq/category/profile)

Learning objective 

In this step-by-step guide you will sign up for a TYPO3 Slack account.

Prerequisites 

Request a Slack invite 

1. Log in to your My TYPO3 account at [my.typo3.org/login] (https://my.typo3.org/login>). After logging in, you will be directed to your profile page.
2. On your profile page, look for the Connected Services section.
3. Click on the Invite Me button. An email with an invitation link will be sent to your email.

Confirm invitation mail 

1. Open your email client and look for the invitation email.
2. In the email, click on the Join Now link. A Slack user account setup page will open in your web browser.
3. When prompted, enter your desired password for the TYPO3 Slack workspace.
4. Complete your Slack profile setup.

Summary 

You can now access TYPO3 Slack and chat with the community at typo3.slack.com

Next steps 

Now that you have your Slack account up and running, you might like to:

• Learn more about how to use Slack

Resources 

• Slack help center
• Download the Slack app

Topics 

• Install TYPO3 with Composer
• Install TYPO3 without Composer
• Set up TYPO3 with DDEV

Guides 

• Set Up TYPO3 with DDEV

Learning objective 

In this step-by-step guide, you will learn to install and configure DDEV, create and run a TYPO3 project locally with Composer, and manage your development environment using essential DDEV commands.

Prerequisites 

Watch the video 

Watch this video to follow along with the steps below.

Create the installation directory 

Create an empty directory for your TYPO3 project and change into it:

mkdir my_project
cd my_project

[!Note] The directory where you run the following commands must be empty.

Do not initialize Git or open the folder in an IDE before running the commands, as these may create files in the directory (for example hidden files).

Create a New DDEV Project 

1. Initialize a new DDEV project. The ddev config command will prompt you for details of your setup. TYPO3 is included in the list of preconfigured project types.

   ddev config --php-version 8.4 --docroot public --project-type typo3
   

   Copied!

• Docroot Location — The docroot is the folder containing the files accessible to the webserver, including the entry point index.php. It is commonly named public. Do not change the docroot during this installation process. You can change it later if necessary, however most guides assume your docroot is called public.
• Project Type — Always set the project type to typo3.

Start the DDEV 

1. Start the DDEV project:

   ddev start

The webserver environment is now running, but TYPO3 is not yet installed.

Install TYPO3 

1. Install TYPO3 using Composer:

   ddev composer create "typo3/cms-base-distribution:^13"

You now have a Composer-based TYPO3 installation.

Directory structure after composer installation 

At this point, your project folder should contain the following files and directories:

config/
packages/
public/
vendor/
LICENSE
.ddev
.gitignore
composer.json
composer.lock
README.md

Additional folders like var and subfolders like config/sites will be created during the setup process.

Set up TYPO3 using the console 

At this point, important files and folders are still missing, and your database does not yet contain any tables.

All of these will be created during the setup process.

1. To perform an interactive guided setup, run:

   ddev typo3 setup --server-type=other --driver=mysqli --host=db --port=3306 --dbname=db --username=db --password=db

2. When prompted, provide the following answers to match the default DDEV configuration:

   Admin username (user will be "system maintainer") ? j.doe
   Admin user and installer password ?
   Admin user email ? j.doe@example.org
   Give your project a name [default: New TYPO3 Project] ? My Project
   Create a basic site? Please enter a URL [default: no] https://my-project.ddev.site
   ✓ Congratulations - TYPO3 Setup is done.
   

   Copied!

Summary 

Congratulations! You now have a fully functional TYPO3 project running in a local DDEV environment, complete with a Composer-based installation, configured database, and ready-to-use development setup that mirrors a real-world server.

Next steps 

Now that you have a working TYPO3 project running locally with DDEV, you might like to:

• Backend Basics

Resources 

• Docker: Installation Guide
• DDEV: Get Started
• DDEV: Installation

Topics 

• Backend Basics
• Warning: Uninitialized string offset 0 in /opt/guides/vendor/phpdocumentor/guides/src/ReferenceResolvers/DocumentNameResolver.php on line 60 Warning: Uninitialized string offset 0 in /opt/guides/vendor/phpdocumentor/guides/src/ReferenceResolvers/DocumentNameResolver.php on line 60
• Site Configuration
• Implement Site Sets

Guides 

• Enabling and disabling a page in the page tree
• Modifying the page properties
• Clearing the Frontend Cache in the TYPO3 Backend
• Enabling and disabling a page in the page properties
• Enabling and disabling a page in the List Module

Learning objective 

In this step-by-step guide, you will learn how to clear the TYPO3 frontend cache using the Flush Frontend Caches function available in the administrative toolbar.

Prerequisites 

Clearing the Frontend Cache 

1. Log in to your TYPO3 backend as explained in Log in in to the TYPO3 backend (CREATE).

2. In the backend, locate the administrative toolbar at the top of the screen. This bar contains various administrative icons, including the cache icon.

   

3. Click on the lightning icon (the clear cache icon) in the administrative toolbar. This action will open a dropdown menu with two cache-related options.

4. From the dropdown menu, select the option labeled "Flush frontend caches"

   

5. After clicking the option, the lightning icon will display a brief loading spinner animation to indicate the cache is being cleared. The spinner will disappear quickly (usually within a few seconds) once the process is complete.
6. Verify your changes by opening your website's frontend in a new browser tab and reloading the page. It's highly recommended to perform a hard refresh (pressing Ctrl + F5 or Cmd + Shift + R) to bypass your browser's local cache as well. The website should now display your latest updates.

Summary 

You successfully cleared the TYPO3 frontend cache by using the Flush Frontend Caches option in the administrative toolbar.

You confirmed the action's success by observing the loading indicator or notification, depending on your TYPO3 version.

Resources 

• Caching in TYPO3

Learning objective 

In this step-by-step guide you will disable and enable a page using the visibility toggle in the list of pages in TYPO3's List Module.

Prerequisites 

Disable a page 

In this step, we will disable a page by using the visibility toggle in the list of pages in TYPO3's List Module.

1. In the module menu, choose the "List" module.
2. In the page tree, choose a page that you would like to disable. The page must not be disabled already.
3. In the page tree, click on the name of the page's parent page. A list of pages and other resources belonging to the page will appear in the Content area to the right of the Module Menu and Page Tree. (If you wonder: In the screenshot below, "Pages" is the parent page of "Default".)

4. In the list of pages, find the page you would like to disable.

5. Locate and click the disable (hide) toggle button for the page you would like to hide. In the screenshot above, the toggle button for the page "Default" is outlined in orange.

In the page tree, the disabled page will now have a red-and-white "no entry" sign on the page's icon, as shown in the screenshot at the top of this page.

Enable a page 

In this step, we will enable the disabled page again.

1. In the module menu, choose the "List" module.
2. In the page tree, click on the name of the disabled page's parent page. If you're progressing straight from disabling the page, it's probably still selected. A list of pages and other resources belonging to the page will appear in the Content area to the right of the Module Menu and Page Tree. (If you wonder: In the screenshot below, "Pages" is the parent page of "Default".)

4. In the list of pages, find the page you would like to disable.

5. Locate and click the enable (un-hide) toggle button for the page you would like to hide. In the screenshot above, the toggle button for the page "Default" is outlined in orange.

In the page tree, the disabled page will now have a normal page icon, like the one shown in the screenshot at the top of this page.

Summary 

You have now disabled and re-enabled a page using TYPO3's List Module.

Next steps 

A page tree can also be enabled and disabled in other ways than this:

• Enabling and disabling a page in the page properties
• Enabling and disabling a page in the page tree

Resources 

• Enabling and disabling a page in the page properties
• Enabling and disabling a page in the page tree
• Introduction to the TYPO3 Backend

Learning objective 

In this step-by-step guide you will disable and enable a page through the page properties interface.

Prerequisites 

Disable a page 

In this step, we will disable a page by setting the page's visibility toggle to disabled.

1. In the page tree, choose a page that you would like to disable.
2. Access the page's page properties as described in Modifying the page properties
3. In the page properties interface, choose the "Access" tab.

4. In the "Visibility" section, click the "Page visible" toggle to change it to disabled (off).

5. Click the "Save" button.

The page tree will update and the page will now have a red-and-white "no entry" sign on the page's icon, as shown in the screenshot at the top of the page.

Enable a page 

In this step, we will enable a page by setting the page's visibility toggle to enabled.

1. In the page tree, find the page you disabled previously.
2. Access the page's page properties as described in Modifying the page properties
3. In the page properties interface, choose the "Access" tab.

4. In the "Visibility" section, click the "Page visible" toggle to change it to enabled (on).

5. Click the "Save" button.

The page tree will update and the page will now have a normal page icon without the red-and-white "no entry" sign on the page's icon, as shown in the screenshot at the top of the page.

Summary 

You have now disabled and re-enabled a page using TYPO3's page properties interface.

Next steps 

A page tree can also be enabled and disabled in other ways than this:

• Enabling and disabling a page in the page tree
• Enabling and disabling a page in the List module

Resources 

• Enabling and disabling a page in the page tree
• Enabling and disabling a page in the List module
• Introduction to the TYPO3 Backend

Learning objective 

In this step-by-step guide you will disable and enable a page using the contextual menu in the TYPO3 page tree.

Prerequisites 

Disable a page 

In this step, we will disable a page in the page tree.

1. In the page tree, choose a page that you would like to disable. The page must not be disabled already.
2. Click on the page icon or right-click on the page name to bring up the context menu.
3. From the context menu, choose "Disable".

The disabled page will now have a red-and-white "no entry" sign on the page's icon, as shown in the screenshot at the top of the page.

Enable a page 

In this step, we will enable the disabled page again.

1. In the page tree, find the page you disabled previously.
2. Click on the page icon or right-click on the page name to bring up the context menu.
3. From the context menu, choose "Enable".

Summary 

You have now disabled and re-enabled a page using the context menu of TYPO3's page tree.

Next steps 

A page tree can also be enabled and disabled in other ways than this:

• Enabling and disabling a page in the page properties
• Enabling and disabling a page in the List module

Resources 

• Enabling and disabling a page in the page properties
• Enabling and disabling a page in the List module
• Introduction to the TYPO3 Backend

Learning objective 

In this step-by-step guide you will learn how to access, edit, and manage the following page properties in TYPO3:

• Page Title
• Title for search engines
• Keywords for Meta data

The same steps will apply if you need to modify other page properties.

Prerequisites 

Watch the video 

Watch this video about editing the page properties to follow along with the steps below.

Modify the page properties 

1. In the backend, open the Page module from the module menu on the left side.

   

2. Click on the icon of the page you want to modify. A context menu will appear.

   

3. In the General Tab, modify the field Page title.

   

4. In the SEO Tab, modify the field Title for search engines.

   

5. In the Metadata Tab, modify the field Keywords.

   

6. Save your modifications.

Summary 

You updated the properties of a TYPO3 page and modified key fields, such as the page title, SEO title, and metadata keywords.

Next steps 

Now that you have modified the page properties, you might like to:

• Add content to your page

Resources 

• Page properties

Guides 

• Change A TYPO3 Site's Default Language
• Set Up a Site Configuration

Learning objective 

In this step-by-step guide you will learn how to change your TYPO3 site's default content language from English to another language using the Site Management module.

Prerequisites 

Understanding the default language 

TYPO3's default language is the primary language configured for your website content. This setting:

• Defines the language for your default content in the page tree
• Sets the fallback language when translations are not available
• Determines the language displayed to frontend visitors by default

The default language is always represented by language ID "0" in TYPO3's system.

Change the default language 

1. In the backend, navigate to Site Management > Sites from the left-hand menu.

   

2. Click on your site configuration (typically named "main" or your domain name) and open on the Languages tab.
3. Find the default language entry (listed first with language ID "0" and usually in English).
4. Click the on the default language entry.

5. The language configuration form is opening:

   

   Update these fields:

   • Title: Enter your new default language name (e.g., "German")
   • Locale: Enter the locale code by using the dropdown menu (e.g., "de_DE.UTF-8" for German, "fr_FR.UTF-8" for French)
   • Language Tag: Enter the IETF language tag (e.g., "de-DE" for German, "fr-FR" for French)
   • Base URL: Keep this as "/" (as your default page entry)
   • Navigation Title: Type in the Language Title for your Navigation (e.g. "German")
   • Flag item: Search for the right flag icon for your language

6. For German your changes should look like this now:

   

   Click Save to apply your changes.

7. Go to the Page Module and click on a page in the pagetree.
8. You can see a little flag-icon on your content. Verify that the new flag is shown.
9. Open your website's frontend in a new browser tab and verify that the language settings have been applied correctly.

Summary 

You successfully changed your TYPO3 site's default content language by editing the language configuration in the Site Management module. Your website now uses the new language for all default content.

Next steps 

Now that you've changed the default language, you might like to:

• Configure additional content languages (CREATE) to create a multilingual website
• Translate existing content (CREATE) into your new default language
• Manage language fallbacks (CREATE) for handling missing translations

Resources 

• TYPO3 Site Handling Documentation
• Language Configuration Reference
• List of ISO 639 language codes

Learning objective 

This guide explains how to create and configure a new site in a TYPO3 installation.

Prerequisites 

• A running TYPO3 instance.
• A "root page" created in the page tree to serve as the starting point of the new website.

Navigate to the Sites Module 

1. Log in to your TYPO3 backend.
2. In the main menu, go to SITE MANAGEMENT > Sites.

Create a New Site Configuration 

1. Click the "Add new site configuration" button or the + icon if you already have other sites.
2. TYPO3 will often suggest creating a site based on an existing root page that is not yet configured.

3. In the General tab, add your information to the following fields:

   • Site Identifier: A unique, lowercase name for the site (e.g., my_website). This is used internally by TYPO3.
   • Root Page ID: This is the most important setting. Select the page from your page tree that will be the root of your website (e.g., your "Home" page).
   • Base URL: The primary domain for the site, including the protocol (e.g., https://www.example.com/).
4. In the Languages tab, click Create new Language. A new language form will appear.

5. Fill in the following fields with your information:

   • Title: The human-readable name of the language (e.g., "English").
   • Entry Point: The URL segment for this language. The default language should use /. Additional languages might use a prefix (e.g., /de/).
   • Locale: The locale for the language, which is important for date formatting and other localizations (e.g., en_US.UTF-8).

6. In the Error Handling tab, fill in the following fields with your information:

   • Switch to the Error Handling tab.
   • Define how TYPO3 should handle HTTP error status codes, such as 404 Not Found.
   • You can set a specific page to display, redirect to another URL, or use a custom Fluid template for each error code.
7. Click the Save button to store your new site configuration.

Summary 

You have successfully created a site configuration. Your website is now accessible through the configured domain, and TYPO3 knows which page tree belongs to it.

Next Steps 

• Add More Languages: If your site is multilingual, you can add more languages in the Languages tab by repeating steps 4–5 above.
• Domain Variants: Create variants for different domains or subdomains that point to the same site but might have slightly different settings.
• Static Routes: For advanced URL routing, you can explore the Static Routes tab.

Guides 

• Create a Site Set with Editable Settings and Custom CSS

Learning objective 

In this guide, you will build a practical, working site set named my-vendor/base inside your site package (EXT:sitepackage). The site set will:

• Add a default meta description and site contact info (editable in backend)
• Add a simple backend configuration
• Render them in a simple Fluid template
• Load a custom CSS file to style the title

Prerequisites 

Create the Site Set folder and manifest 

Every site set is defined inside a manifest that defines its name and dependencies.

1. Inside your extension, create a folder called base inside of your extension's site sets folder: EXT:sitepackage/Configuration/Sets
2. Inside the base folder, create a plain text file called config.yaml.

3. Copy the following YAML into the config.yaml file:

   name: 'my-vendor/base'
   label: 'Base Site Set'
   dependencies: []
   optionalDependencies: []
   hidden: false
   

   Copied!

   Tip

   The meaning of the configuration properties is explained in the Site Set Definition section of the TYPO3 documentation.
4. Save the file.

Add editable site settings 

We will now define custom site settings. These can be edited and customized for each site in the Sites module in the TYPO3 backend.

1. Inside the base folder, create a file called settings.yaml. This file will contain the custom setting properties.

2. Copy the following YAML into the settings.yaml file:

   settings:
     site:
       meta:
         description: 'Default meta description from settings.yaml'
       contact:
         email: 'contact@example.com'
   

   Copied!

   Tip

   Read more about Custom Site Settings in the TYPO3 documentation.
3. Save the file.
4. Inside the base folder, create another file, this time called settings.definitions.yaml. This file defines how the custom settings in the settings.yaml file should be displayed in the backend.

5. Copy the following YAML into the settings.definitions.yaml file:

   settings:
     site.meta.description:
       type: string
       label: 'Base Settings: Meta Description'
       default: 'Default meta description from definitions'
     site.contact.email:
       type: string
       label: 'Base Settings: Contact Email'
       default: 'contact@example.com'
   

   Copied!

   Tip

   Read more about Site Settings Definitions in the TYPO3 documentation.
6. Save the file.

Add TypoScript for page rendering 

Site sets can also contain TypoScript configurations. In this case we will define page rendering and include a CSS file.

1. Inside the base folder, create a file called setup.typoscript.

2. Copy the following TypoScript into the setup.typoscript file:

   page = PAGE
   page.10 = FLUIDTEMPLATE
   page.10 {
     templateName = Default
     templateRootPaths.10 = EXT:sitepackage/Resources/Private/Templates/
     partialRootPaths.10 = EXT:sitepackage/Resources/Private/Partials/
     layoutRootPaths.10 = EXT:sitepackage/Resources/Private/Layouts/
   
     dataProcessing {
       10 = TYPO3\CMS\Frontend\DataProcessing\SiteProcessor
     }
   }
   
   # Include custom CSS
   page.includeCSS.base = EXT:sitepackage/Resources/Public/Css/base.css
   

   Copied!
3. Save the file.

Add backend configuration 

Site sets can also reconfigure the TYPO3 backend. In this case we will change the header of the Common section of the New Content Element Wizard by modifying the Page TSConfig configuration options.

1. Inside the base folder, create a file called page.tsconfig.
2. Copy the following TypoScript into the page.tsconfig file:

mod.wizards.newContentElement.wizardItems.common.header = Common Elements (Site Set active)

3. Save the file.

Add a CSS file 

Site sets can also include frontend resources, like images and CSS files. Previously, we defined TypoScript that included a CSS file. Now we will create this file inside the site package's Resources folder.

1. Inside your site package extension, create these three folders inside each other: Resources/Public/Css. (Don't worry if the folders already exist.)
2. Inside the Css folder, create a plain text file called base.css.
3. Copy the following CSS into the base.css file:

/* Base Site Set Styles */
h1 {
  color: darkred;
  font-weight: 700;
}

4. Save the file.

Create a simple Fluid template to test the settings 

Site sets can also include Fluid templates. In this case we will create a simple template that displays the custom site settings we have defined. This is thanks to the SiteProcessor we defined in our TypoScript. It allows us to access the settings at site.settings in the fluid template.

1. Inside the site package extension, create the folders Resources/Private/Templates/Default inside each other. (Don't worry if the folders already exist.)
2. Inside the Default folder, create an HTML file called Default.html.
3. Copy the following HTML into the Default.html file:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<body>
  <h1>Site Settings Test</h1>

  <p><strong>Meta Description:</strong> {site.settings.site.meta.description}</p>
  <p><strong>Contact Email:</strong> {site.settings.site.contact.email}</p>

</body>
</html>

4. Save the file.

Register the Site Set in your site configuration 

1. Open your site configuration file. It is located in config/sites/<your-site>/config.yaml, where <your-site> is your site’s identifier.

2. Add the following line to the dependencies section:

   dependencies:
     - my-vendor/base
   

   Copied!
3. Save the file.

Clear caches and verify 

1. Clear caches as described in ClearingFrontendCacheInTypo3Backend.
2. Open Backend → Site → Settings module. You’ll see your Base Settings: Meta Description and Contact Email fields.
3. Change the value of the fields.
4. Save the settings.

5. Visit your site’s frontend. You should see.

   Site Settings Test
   Meta Description: (your value from step 3)
   Contact Email: (your value from step 3)
   

   Copied!
6. Confirm that the H1 title appears in dark red. This confirms that the CSS file is loaded.
7. Go back to the TYPO3 backend.
8. Create a new content element to bring up the New Content Element Wizard. Check the wizard’s Common section and confirm that the title has changed to "Common Elements (Site Set active)." This confirms that the Page TSConfig configuration is loaded.

Summary 

You now have a complete Site Set that provides:

• Editable custom site settings (in Backend → Sites → Settings)
• Custom TypoScript that loads a custom Fluid template and CSS file.
• A working Fluid template that displays site settings.
• Automatically included CSS styling.

This Site Set can now be reused across any project — just add - my-vendor/base to the dependencies: section of another site’s config.yaml.

Next steps

Now that you have created your site set, you might like to:

• Explore the Site Set Reference to learn more about all the available options.
• Include CSS through the Fluid Template instead of through TypoScript.

Resources 

• Site Sets Reference
• Custom Site Settings
• Site Settings Definitions
• TypoScript
• Fluid
• SiteProcessor

Topics 

• Create and Organize Pages
• Add Content Elements
• Work with the Rich Text Editor
• Manage Media Assets

Guides 

• Create a Page with Drag and Drop

Learning objective 

In this step-by-step guide you will create a new page in the TYPO3 backend using the drag & drop method.

Prerequisites 

Watch the video 

**Watch this tutorial on YouTube to follow along. Only the first part of the video (creating a page with drag & drop) is relevant for this guide.

Create a page using drag & drop 

1. In the backend, open the Page module from the left-hand menu.

   

2. Expand the page tree so you see the place where you want to add your new page.
3. At the top of the page tree, locate the new page icons (representing different page types).

4. Drag the Standard page icon and drop it:

   1. Between two existing pages → creates a sibling page at the same level
   2. On top of an existing page → creates a child page under that parent
5. When prompted, enter a title for your new page and press Enter
6. Confirm the new page appears in the page tree at the position you selected.

Summary 

You created a new TYPO3 page by dragging a page icon from the top of the page tree and dropping it into position. This is the quickest way to add pages while building your site structure.

Next steps 

Now that you’ve added a page, you might like to:

• Enable a page so it becomes visible in the frontend
• Create a page with the context menu (CREATE) for more precise placement
• Add content to your page

Resources 

• Creating pages in the TYPO3 Editors Tutorial

Topics 

• Create a Basic Site Package
• Use the Bootstrap Package
• Customize Templates
• Implement Your Design

Guides 

• Create the Site Package File Structure
• Activate the Site Package
• Register and Install a Site Package

Learning Objective 

In this guide, you will learn how to activate your Site Package by adding its Site Set to your site using the TYPO3 Backend's Sites module.

Prerequisites 

Open the Site Configuration 

1. Log in to the TYPO3 Backend.
2. Open the Sites module from the module menu.
3. Click on your site (e.g. "Home") to open its configuration.
4. Scroll down to the Site Sets section and select My Site Package from the list of available items by clicking on it.
5. Confirm that your Site Package now appears in the list of selected items.
6. Click Save to save your changes.
7. Clear the frontend cache. If you are unsure how to do this, refer to Clearing the Frontend Cache in the TYPO3 Backend.

Summary 

You have successfully activated your Site Package. Its Site Set is now assigned to your site, and all bundled configuration is active. You are now ready to start customizing your site package with templates, styles, and more.

Next Steps 

Now that your Site Package is fully active, you might like to:

• Create a Site Set with Editable Settings and Custom CSS (CREATE)

Resources 

• Site Sets
• Site Handling

Learning objective 

In this step-by-step guide you will learn how to manually create the essential directory structure and the composer.json file for a TYPO3 site package.

Create the Directory Structure 

1. Navigate to the root of your TYPO3 installation. In a standard setup, custom extensions are placed in a folder named packages/.
2. If the packages/ folder does not exist yet, create it in the root of your TYPO3 installation`.
3. Create a new directory for your Site Package (e.g., my_site_package) with the following minimal structure:

packages/my_site_package/
├── Configuration/
│   └── Sets/
│       └── SitePackage/
├── Resources/
│   ├── Private/
│   └── Public/
└── composer.json

• Configuration/Sets/: Used for configuration bundles called Site sets.
• Resources/: Stores your HTML templates (Private) and assets like CSS or images (Public).

Create the composer.json file 

The composer.json file is the most critical component. It tells TYPO3 that this directory is a valid extension.

1. Create the file at packages/my_site_package/composer.json.
2. Copy the following content into the file:

{
    "name": "my-vendor/my-site-package",
    "description": "Minimal Site Package for TYPO3 v13",
    "type": "typo3-cms-extension",
    "license": ["GPL-2.0-or-later"],
    "require": {
        "typo3/cms-core": "^13.4"
    },
    "autoload": {
        "psr-4": {
            "MyVendor\\MySitePackage\\": "Classes/"
        }
    },
    "extra": {
        "typo3/cms": {
            "extension-key": "my_site_package"
        }
    }
}

Key information:

• name: The Composer t3coreapi:ext-composer-json-property-name (lowercase, using hyphens).
• extension-key: The internal TYPO3 extension key (using underscores).

3. Save the file.

Create a Site Set 

For TYPO3 to identify your Site Package as a configuration source, you must define a Site Set.

1. Create a file at packages/my_site_package/Configuration/Sets/SitePackage/config.yaml.
2. Add the following content:

name: 'my-vendor/my-site-package'
label: 'My Site Package'
dependencies:
    - typo3/fluid-styled-content

3. Save the file.

Summary 

You have successfully created the skeletal structure of a TYPO3 Site Package. TYPO3 will now be able to recognize this folder as a valid extension once it is registered via Composer.

Next steps 

Now that the basic structure is ready, you might like to:

• Register and Install the Site Package via Composer
• Activating the Site Set in the Site Configuration (CREATE)

Resources 

• Generate a site package
• Resources folder
• composer.json in TYPO3
• Site sets

Learning Objective 

In this guide, you will learn the two essential Composer commands to link and activate your local Site Package folder within your TYPO3 installation.

Prerequisites 

Register the local package path 

First, you must tell your project's root composer.json where to look for custom packages. This creates a link to your packages/ folder.

1. In your Terminal, make sure you are in your project root by running pwd.
2. Run the following command:

composer config repositories.site-package path packages/my_site_package

This command adds a "repositories" section to your main composer.json file. It allows Composer to treat the local folder like a remote repository.

Install the package 

Installing a package with Composer means adding it to your package’s requirements. Use the vendor and package name exactly as you defined them in the Site Package's composer.json file.

1. Run the following command in your Terminal:

composer require my-vendor/my-site-package

The extension is now officially installed in the system.

Summary 

You have successfully registered and installed your Site Package. It is now recognized by TYPO3 as a valid extension and is ready to be activated.

Next Steps 

Now that the package is installed, the final step to make it functional is:

• Activate the Site Package in the Site Configuration

Resources 

• Composer Documentation

Topics 

• Content Management
• Multilingual Websites
• Extensions
• Frontend Development

Topics 

• Set Up Page Types
• Create Custom Content Elements
• Configure the Backend Layout
• Manage Backend User Permissions

Guides 

• Customize a content element template

Learning objective 

In this step-by-step guide you will override the Subpages content element. This content element displays a list of subpages to the current page. We’ll modify the template so it also displays an image together with the name of each subpage.

Prerequisites 

Create a page and subpages 

To have something for the Subpages content element, we’ll create a page in the page tree and then add some subpages to it.

1. In the page tree, create a page with a number of subpages as described in Creating Pages. In our case, we create a page called “Subpage menu test” with three subpages called “Subpage 1,” “Subpage 2,” and “Subpage 3.”

   

2. For each of the subpages

   1. Access the page’s page properties, as described in Page Properties.
   2. In the page properties form, click on the Resources tab.
   3. Under Files, upload an image or add a relation to an existing image.
3. On the page “Subpage menu test”, add a content element of the type “Subpages,” using the steps in Add content in the TYPO3 backend.

If you preview the page “Subpage menu test,” the content should look something like this:

Copy the content element template file 

It is not recommended to edit the original template file. These can easily be overwritten during upgrades. Instead, we make a copy of the template file and place it within our sitepackage extension.

1. Locate the MenuSubpages.html template file within the folder vendor/bk2k/bootstrap-package/Resources/Private/Templates/ContentElements.
2. Copy the file into your sitepackage extension’s Resources/Private/Templates/ContentElements folder. Don’t change the file name.

The sitepackage extension is already configured so TYPO3 will look for custom content element templates in this location.

Modify the template file 

1. Open the file you just created using your IDE or a plain text editor: Resources/Private/Templates/ContentElements/MenuSubpages.html

2. Add this code on a blank line after the <li> tag:

   <f:image image="{page.files.0}" height="250" /\>
   

   Copied!
3. Clear TYPO3's cache as described in Clearing the Frontend Cache in the TYPO3 Backend

Summary 

You have now overridden the Fluid template of the Subpages content element so it also displays an image together with the name of each subpage in the list.

The final result should look something like this:

Next steps 

Now that you have overridden a content element's Fluid template, you might like to:

• Add custom CSS Styles to a Fluid Template (CREATE)

Resources 

• Create a custom content element type
• Overriding the default templates of content elements

Guides 

• Configure a Backend Layout With Two Columns

Learning Objective 

In this step-by-step guide you will create a custom Backend Layout with two columns in an existing Site Package and apply it to all subpages of a specific starting page. The columns will be named:

• “Left” (colPos = 0)
• “Right” (colPos = 2)

They will be displayed as two vertical columns in the Page → Columns view in the TYPO3 Backend.

Prerequisites 

Define the Backend Layout in Page TSconfig 

You will store Backend Layout definitions in your Site Set’s Page TSconfig.

1. Open or create the file EXT:sitepackage/Configuration/Sets/base/page.tsconfig.
2. Open the file in an IDE or plain text editor.

3. Add the following code snippet to the file:

   # --------------------------------------------------------
   # Backend Layout: Two Columns
   # --------------------------------------------------------
   mod.web_layout.BackendLayouts.two_columns {
     title = Site Layout: Two Columns
     config {
       backend_layout {
         colCount = 2
         rowCount = 1
   
         rows {
           1 {
             columns {
               1 {
                 name = Left
                 colPos = 0
               }
               2 {
                 name = Right
                 colPos = 2
               }
             }
           }
         }
       }
     }
   }
   

   Copied!

   This code snippet defines a Backend Layout with ID "two_columns", containing one row with two columns “Left” and “Right”.

4. Save the file.
5. Clear all caches to apply the changes, as explained in Clearing All Caches Using the Clear Cache Menu (CREATE).

Your page layout is now availabe in the page properties of all pages in your site.

Select the backend layout for a single page 

1. In the TYPO3 Backend, go to the Page module.
2. Choose a page with subpages on your site, for example, the root page.
3. Access the page properties, as explained in Modifying the page properties.
4. In the page properties, select the Appearance tab.
5. From the Backend Layout (this page only) dropdown menu, select the "Site Layout: Two Columns" option.
6. Save and close the page properties.
7. In the page tree, click on the page title to reload the layout. You should now be able to add content elements to two columns labeled “Left” and “Right”.

You can click on subpages to confirm that the layout is not applied to them.

Inherit the Backend Layout to All Subpages 

Often, you want an entire section of the site to use the same layout automatically.

1. Access the page properties for the page you chose previously, as explained in Modifying the page properties.
2. In the page properties, select the Appearance tab.
3. From the Backend Layout (subpages of this page) dropdown menu, select the "Site Layout: Two Columns" option.
4. Save and close the page properties.
5. In the page tree, click on subpages to the page you chose and verify that all subpages of the page now use the layout you selected.

Tip

When you edit the page properties of a subpage, you will see that the name of the inherited layout is mentioned below the label of the Backend Layout (this page only). Choosing a different layout from the dropdown menu will override the inherited layout.

Summary 

You have now created a custom Backend Layout with two columns and applied it to a single page and all subpages of that page.

Next steps 

• Render the layout in the frontend as explained in Create a Two-Column Layout With Fluid (CREATE)

Resources 

• Backend Layout

Topics 

• Configure Content Languages
• Translate Content
• Manage Language Fallbacks
• Work with Translation Services

Topics 

• Find and Install Extensions
• Configure Common Extensions
• Customize Extension Templates
• Troubleshoot Extension Issues

Topics 

• Understand Fluid Templates
• Create Responsive Layouts
• Implement Frontend User Registration
• JavaScript and CSS

Guides 

• Add CSS and JavaScript to a Fluid Template
• Add Global CSS and JavaScript with TypoScript

Learning objective 

In this step-by-step guide, you will learn how to create custom CSS and JavaScript files and include them in your site's Fluid templates using the f:asset.css and f:asset.js ViewHelpers.

Prerequisites 

Create Your Asset Files 

First, you need to create the CSS and JavaScript files within your site package's directory structure.

1. Navigate to your site package's Resources/Public/ directory.
2. Create two new sub-directories: Css and JavaScript.

3. Inside the Css directory, create a new file named custom-styles.css. Add a simple CSS rule for testing:

   body {
     background-color: #f0f0f0;
     border: 5px solid #ff8700;
   }
   

   Copied!

4. Inside the JavaScript directory, create a new file named custom-scripts.js. Add a simple JavaScript alert for testing:

   alert('Hello from custom-scripts.js!');
   

   Copied!

   Your file structure should now look like this:

   └── your_sitepackage/
       └── Resources/
           └── Public/
               ├── Css/
               │   └── custom-styles.css
               ├── JavaScript/
               │   └── custom-scripts.js
               └── ...
   

   Copied!

Include Assets in Your Fluid Template 

Now, you will link these new files in the main Fluid layout file of your site package.

1. Open the main HTML template file for your site's layout. This is commonly located at your_sitepackage/Resources/Private/Layouts/Page/Default.html.

2. Add the <f:asset.css> and <f:asset.js> ViewHelpers inside the <head> section of the file. These ViewHelpers tell TYPO3 to add the respective files to the page.

   Update the code to include the new assets as shown below. The identifier is a unique name, and href points to the file location using the EXT: syntax.

   <head>
       ...
       <f:asset.css identifier="my-custom-styles" href="EXT:your_sitepackage/Resources/Public/Css/custom-styles.css" />
       <f:asset.js identifier="my-custom-scripts" href="EXT:your_sitepackage/Resources/Public/JavaScript/custom-scripts.js" />
       ...
   </head>
   

   Copied!

   Make sure to replace your_sitepackage with the actual key of your site package extension.

Clear the Cache and Verify 

Finally, clear the TYPO3 caches to ensure your changes are loaded, and then check the frontend of your website.

1. Log in to the TYPO3 backend.
2. Click the "Clear all caches" lightning bolt icon in the top toolbar.

3. Open your website in a new browser tab.

   • You should see the styles from custom-styles.css applied to the page (a light gray background and an orange border).
   • You should see a JavaScript alert box appear with the message "Hello from custom-scripts.js!".

Summary 

Congratulations! You have successfully added custom CSS and JavaScript files to your TYPO3 site using Fluid Asset ViewHelpers. You can now easily manage assets that are specific to your templates.

Next steps 

Now that you know how to include assets in Fluid, you might like to:

• Add Global CSS and JavaScript with TypoScript
• Explore using other ViewHelpers in your templates.

Resources 

• f:asset.css ViewHelper Reference
• f:asset.js ViewHelper Reference

Learning objective 

In this step-by-step guide, you will learn how to create custom CSS and JavaScript files and include them globally on your site using the page.includeCSS and page.includeJS TypoScript properties.

Prerequisites 

Create Your Asset Files 

First, you need to create the CSS and JavaScript files within your site package's directory structure.

1. Navigate to your site package's Resources/Public/ directory.
2. Create two new sub-directories: Css and JavaScript.

3. Inside the Css directory, create a new file named custom-styles.css. Add a simple CSS rule for testing:

   body {
     background-color: #f0f0f0;
     border: 5px solid #20c997;
   }
   

   Copied!

4. Inside the JavaScript directory, create a new file named custom-scripts.js. Add a simple JavaScript alert for testing:

   alert('Hello from custom-scripts.js!');
   

   Copied!

   Your file structure should now look like this:

   └── your_sitepackage/
       └── Resources/
           └── Public/
               ├── Css/
               │   └── custom-styles.css
               ├── JavaScript/
               │   └── custom-scripts.js
               └── ...
   

   Copied!

Include Assets Using TypoScript 

This method is best for assets that should be loaded on every page of your site.

1. Open your site package's main TypoScript setup file. This is typically located at your_sitepackage/Configuration/TypoScript/setup.typoscript.

2. Add the page.includeCSS and page.includeJS properties to your page object configuration. You can assign a key (like style or js) and set the value to the path of your asset file using the EXT: syntax.

   page {
       # ... other page configuration
   
       includeCSS {
           style = EXT:your_sitepackage/Resources/Public/Css/custom-styles.css
       }
   
       includeJS {
           js = EXT:your_sitepackage/Resources/Public/JavaScript/custom-scripts.js
       }
   }
   

   Copied!

   Make sure to replace your_sitepackage with the actual key of your site package extension.

Clear the Cache and Verify 

Finally, clear the TYPO3 caches to ensure your changes are loaded, and then check the frontend of your website.

1. Log in to the TYPO3 backend.
2. Click the "Clear all caches" lightning bolt icon in the top toolbar.

3. Open your website in a new browser tab.

   • You should see the styles from custom-styles.css applied to the page (a light gray background and a green border).
   • You should see a JavaScript alert box appear with the message "Hello from custom-scripts.js!".

Summary 

Congratulations! You have successfully added global CSS and JavaScript files to your TYPO3 site using TypoScript. This centralized approach is excellent for managing your site's core assets.

Next steps 

Now that you have experience with including assets globally, you might like to:

• Learn how to conditionally load assets on specific pages using TypoScript conditions.
• Explore how to configure and bundle assets for better performance.

Resources 

• TypoScript Reference: includeCSS
• TypoScript Reference: includeJS

Topics 

• Extension Development
• System Integration
• Performance Optimization
• Deployment and DevOps

Topics 

• Create a Basic Extension
• Develop with Extbase and Fluid
• Build Non-Extbase Extensions
• Create Extension APIs

Topics 

• Connect to External Services
• Implement Single Sign-On
• Set Up REST APIs
• Integrate with Third-party Systems

Topics 

• Configure Caching
• Set Up a CDN
• Database Optimization
• Implement Static Site Generation

Topics 

• Set Up CICD Pipelines
• Implement Git Workflows
• Containerization with Docker
• Kubernetes Deployment

Topics 

• Regular Maintenance
• Security
• Monitoring
• Troubleshooting

Topics 

• Backup and Restore Procedures
• Update TYPO3 Core
• Update Extensions
• Database Maintenance Tasks

Topics 

• Implement Security Best Practices
• Set Up HTTPS
• Manage User Authentication
• Security Incident Response

Topics 

• Set Up Application Monitoring
• Configure Log Management
• Implement Alerts
• Performance Monitoring

Topics 

• Debug Common Issues
• Use the Admin Panel
• Work with Exception Logs
• Get Community Support

Topics 

• Budgets and Expenses
• Information and Content

Guides 

• Create a Direct Reimbursement in the Reimbursement Tool
• Add a Payment Method in the Reimbursement Tool
• Create a Regular Reimbursement in the Reimbursement Tool

Learning objective 

In this step-by-step guide you will add bank or PayPal account information to the Reimbursement Tool.

Prerequisites 

Log in to the Reimbursement Tool 

1. In your web browser, go to reimbursement.typo3.com.
2. If you are not already logged in, click on the gray Login button.

You will see the Reimbursement Tool dashboard. It is titled My Reimbursements.

Add a payment method 

1. Click on your name in the top right corner to open the user menu.

2. From the user menu, select Payment Methods. You will be redirected to the payment methods summary page.

3. Click on the black Add payment method button. You will be redirected to the payment method creation form. The form will default to the IBAN payment method.
4. From the Type drop-down menu, select either Bank transfer (IBAN) or PayPal. The form will update accordingly.

The next steps are different, depending on which payment method you selected.

Fill in the form for Bank transfer (IBAN) 

1. In the Type drop-down menu, ensure that Bank transfer (IBAN) is selected.

2. Fill in the other fields as follows:

   • IBAN: Enter your IBAN number, as supplied by your bank. The IBAN consists of up to 34 alphanumeric characters, starting with a two-character country code. For example: XX12345678901234
   • BIC/SWIFT: Enter your bank’s BIC/SWIFT code, as supplied by your bank. The BIC/SWIFT code consists of up to 11 alphanumeric characters. For example: FOOBAR123
   • Account holder: The name of the account holder, presumably your name.
3. Check the Set this as my preferred payment method checkbox if you would like to use this payment method as your default payment method.
4. Click on the orange Save button. You will be redirected to the payment methods summary page.

Your payment method should now be visible in the list on the payment methods summary page.

Fill in the form for PayPal 

1. In the Type drop-down menu, ensure that Bank transfer (IBAN) is selected.
2. In the PayPal email field, enter the email address connected to your PayPal account.
3. Check the Set this as my preferred payment method checkbox if you would like to use this payment method as your default payment method.
4. Click on the orange Save button. You will be redirected to the payment methods summary page.

Your payment method should now be visible in the list on the payment methods summary page.

Summary 

You have now created a payment method and can receive reimbursements from the TYPO3 Association to your bank or PayPal account.

Next steps 

• Create a Regular Reimbursement in the Reimbursement Tool
• Create a Direct Reimbursement in the Reimbursement Tool

Resources 

• IBAN
• BIC/SWIFT

Learning objective 

In this step-by-step guide you will request that the TYPO3 Association pays an invoice directly to the issuer using a Direct Reimbursement.

Prerequisites 

Log in to the Reimbursement Tool 

1. In your web browser, go to reimbursement.typo3.com.
2. If you are not already logged in, click on the gray Login button.

You will see the Reimbursement Tool dashboard. It is titled My Reimbursements.

Create a reimbursement 

1. On the Reimbursement Tool dashboard, click the black Request Reimbursement button. You will be redirected to a page asking you to choose Regular Reimbursement or Direct Expense.

2. In the Direct Reimbursement box, click the orange Create button. You will be redirected to the request reimbursement form.

2. Complete the form by filling in the fields:

   • Budget: Choose the budget you want to use for this reimbursement.
   • Purpose: Choose the purpose that fits with your reimbursement.
   • Short description: Describe the purpose of your receipts / expenses. Example: "Invoice for Enterprise CMS Conference in Durban"
   • Address: Enter the address of the payment recipient.

3. Ensure that you have read the Travel Expense and Reimbursement Regulations before you check the checkbox.
4. Click the orange Save and Continue button. You will be redirected to the reimbursement summary page.

You have now created the reimbursement request itself, and you are ready to add an invoice to be paid directly to the issuer by the TYPO3 Association.

Add an invoice or receipt 

We are now going to add an invoice or receipt and the necessary documentation. You must repeat this step for every invoice or receipt. We recommend submitting separate reimbursement requests for each invoice issuer.

1. On the reimbursement summary page, click the Add receipt button. You will be redirected to the Add expense with a receipt form.

2. Complete the form by filling in the fields:

   • Expense description: Enter a short description of what the expense is for. Example: "Ticket for Enterprise CMS Conference in Durban"
   • Currency of this reimbursement Choose the currency of the expense.
   • Total expense on receipt: To avoid errors, all the digits should be entered as an integer, including the subunit amount (e.g., cents), without a decimal point. For example: 100.00 is entered as 10000.
   • Upload receipt: Upload the invoice or receipt scanned or photographed as a PDF, PNG, or JPG file.
   • Date of expense: Click on the field and select a date from the pop-up calendar. The date must be the same as the date on the invoice or receipt.
3. Click the orange Save button. You will be redirected to the reimbursement summary page.

Submit the reimbursement for approval 

When you have added all expenses, you can submit the reimbursement for approval.

1. On the reimbursement summary page, click the Submit for approval button.

The budget owner will be notified about the new reimbursement request.

Summary 

You have now created a reimbursement request and submitted it for approval. The money will be transferred to the invoice issuer within 14 days after the budget owner has approved your request.

Next steps 

Once the payment has been received, you can change the status of the reimbursement to Paid by clicking on the Mark as paid button on the reimbursement summary page.

Resources 

• The European Central Bank’s Euro foreign exchange reference rates

Learning objective 

In this step-by-step guide you will create a reimbursement for expenses incurred and submit it for approval.

Prerequisites 

Log in to the Reimbursement Tool 

1. In your web browser, go to reimbursement.typo3.com.
2. If you are not already logged in, click on the gray Login button.

You will see the Reimbursement Tool dashboard. It is titled My Reimbursements.

Create a reimbursement 

1. On the Reimbursement Tool dashboard, click the black Request Reimbursement button. You will be redirected to a page asking you to choose Regular Reimbursement or Direct Expense.

2. In the Regular Reimbursement box, click the orange Create button. You will be redirected to the request reimbursement form.

2. Complete the form by filling in the fields:

   • Budget: Choose the budget you want to use for this reimbursement.
   • Purpose: Choose the purpose that fits with your reimbursement.
   • Short description: Describe the purpose of your receipts / expenses. Example: "Travel to the TYPO3 Camp in Berlin"
   • Payment method: Choose how you would like the TYPO3 Association to transfer the money to you.

3. Ensure that you have read the Travel Expense and Reimbursement Regulations before you check the checkbox.
4. Click the orange Save and Continue button. You will be redirected to the reimbursement summary page.

You have now created the reimbursement request itself, and you are ready to document your expenses.

Add an invoice or receipt 

We are now going to add an invoice or receipt and the necessary documentation. You must repeat this step for every invoice or receipt.

1. On the reimbursement summary page, click the Add receipt button. You will be redirected to the Add expense with a receipt form.

2. Complete the form by filling in the fields:

   • Expense description: Enter a short description of what the expense is for. Example: "Train ticket Berlin–Düsseldorf"
   • Currency of this reimbursement Choose the currency of the expense.
   • Total expense on receipt: To avoid errors, all of the digits should be entered as an integer including the subunit amount (e.g., cents), without a decimal point. For example: 100.00 is entered as 10000.
   • Upload receipt: Upload the invoice or receipt scanned or photographed as a PDF, PNG, or JPG file.
   • Date of expense: Click on the field and select a date from the pop-up calendar. The date must be the same as the date on the invoice or receipt.
3. Click the orange Save button. You will be redirected to the reimbursement summary page.

You should repeat this step for every invoice or receipt you want to submit.

Add expense for driven kilometers 

If travel by car is necessary and sanctioned by the regulations, you can reimburse driven kilometers.

1. On the reimbursement summary page, click the Add driven kilometers button. You will be redirected to the Add expense for driven kilometers form.

2. Complete the form by filling in the fields:

   • Expense description: Enter information about your journey’s origin and destination.
   • Kilometers: Enter the total number of kilometers driven. The reimbursed amount will be calculated automatically.
   • Date of expense: Click on the field and select the date of your journey from the pop-up calendar.
3. Click the orange Save button. You will be redirected to the reimbursement summary page.

You should repeat this step for every journey you want to reimburse.

Submit the reimbursement for approval 

When you have added all expenses, you can submit the reimbursement for approval.

1. On the reimbursement summary page, click the Submit for approval button.

The budget owner will be notified about the new reimbursement request.

Summary 

You have now created a reimbursement request and submitted it for approval. The money will be transferred to you within 14 days after the budget owner has approved your request.

Next steps 

Once you have received your reimbursement, you can change the status of the reimbursement to Paid by clicking on the Mark as paid button on the reimbursement summary page.

Resources 

• The European Central Bank’s Euro foreign exchange reference rates

Guides 

• Edit an Official TYPO3 Team or Committee Page

Learning objective 

In this step-by-step guide you will edit the page of a team or committee through the TYPO3 backend.

Prerequisites 

Access the page properties 

All of the editable page content for a basic team or committee page is stored in the Page record, so you will not have to edit content elements.

1. Log in to the typo3.community backend at typo3.community/typo3 as explained in Log in to the TYPO3 backend (CREATE). You should see your team or committee’s page in the page tree with an orange icon ().
2. Access the page’s page properties as explained in Modify the Page Properties.

Modify the page content in the page properties 

1. Make sure the Group configuration tab is selected. It should look something like this:

2. Edit the fields as required.

   • Page visible: Setting this option to disabled will hide your page. Use if your team or committee has been disbanded.
   • Group title: The name of your team or committee.
   • Path segment: The URL path for your team or committee page. (You should not change this unless your team or committee has been renamed.)
   • Group image: The image that will be displayed on your team or committee page and on cards elsewhere on the TYPO3 websites.
   • Group short description: A short description of your team or committee that will be displayed on your team or committee pageand on cards elsewhere on the TYPO3 websites.

   • Group long description: A long description of your team or committee. Include information on

     • The tasks of your team or committee.
     • Information about regular meetings.
     • How to contact you, e.g., on TYPO3 Slack.
     • The process for joining and leaving.
     • Links to the output of your team or committee.

   • Group members: Add or remove team members.

     • Select user: Select the team member's user from the list.
     • Override role: Enter the team member's role, or simply "Member".
3. Save the changes.

Summary 

Congratulations! You now have updated the information on your team or committee page.

Next steps 

Now that you have updated the information, you might like to:

• Let your team members know about the changes.
• Tell about the updated information on social media.
• Encourage new members to join your team or committee.

Resources 

• TYPO3 Association Policy for Committees & Official Teams

Published Guides 

Missing Guides 

• Add custom CSS Styles to a Fluid Template CREATE

  • Mentioned in: Customize a content element template

• Create a Site Package CREATE

  • Mentioned in: Configure a Backend Layout With Two Columns

• Adding Page TSconfig to a Site Package CREATE

  • Mentioned in: Configure a Backend Layout With Two Columns

• Clearing All Caches Using the Clear Cache Menu CREATE

  • Mentioned in: Configure a Backend Layout With Two Columns

• Create a Two-Column Layout With Fluid CREATE

  • Mentioned in: Configure a Backend Layout With Two Columns

• Log in to the TYPO3 backend CREATE

  • Mentioned in: Edit an Official TYPO3 Team or Committee Page

• Activating the Site Set in the Site Configuration CREATE

  • Mentioned in: Create the Site Package File Structure

• Create a Site Set with Editable Settings and Custom CSS CREATE

  • Mentioned in: Activate the Site Package

• Log in in to the TYPO3 backend CREATE

  • Mentioned in: Change A TYPO3 Site's Default Language

• Configure additional content languages CREATE

  • Mentioned in: Change A TYPO3 Site's Default Language

• Translate existing content CREATE

  • Mentioned in: Change A TYPO3 Site's Default Language

• Manage language fallbacks CREATE

  • Mentioned in: Change A TYPO3 Site's Default Language

• Log in to the TYPO3 backend CREATE

  • Mentioned in: Modifying the page properties

• Locate and use the TYPO3 backend's administrative toolbar CREATE

  • Mentioned in: Clearing the Frontend Cache in the TYPO3 Backend

• Create a Site Package CREATE

  • Mentioned in: Create a Site Set with Editable Settings and Custom CSS

• Create a page with the context menu CREATE

  • Mentioned in: Create a Page with Drag and Drop

Learning objective 

In this step-by-step guide you will {describe what the learner will accomplish}.

Prerequisites 

Watch the video 

{Optional. If available, embed the YouTube video version of this tutorial from the TYPO3 official channel.}

Watch this video to follow along with the steps below.

{Task name} 

Scope check time

Don't start writing until you have a clear scope.

If you're unsure about the goal, the audience, or the prerequisites — go back and fix it now. Writing the task section without a solid scope will lead to frustration when you’re deep in the details.

{Optional explanatory text}

1. {Write the first step. Start with a verb.} {Optional: Code sample or screenshot that helps the learner complete this step.} {Optional: Expected outcome.}
2. {Write the next step. Start with a verb.}

{Task name} 

{Optional explanatory text}

1. {Write the first step. Start with a verb.} {Optional: Code sample or screenshot that helps the learner complete this step.} {Optional: Expected outcome.}
2. {Write the next step. Start with a verb.}

{Task name} 

{Optional explanatory text}

1. {Write the first step. Start with a verb.} {Optional: Code sample or screenshot that helps the learner complete this step.} {Optional: Expected outcome.}
2. {Write the next step. Start with a verb.}

{For Project guides, use this section to link to existing step-by-step guides}

Summary 

{State the outcome of the step-by-step guide to recap what the learner has achieved.}

Congratulations! You now have {outcome}.

Next steps 

{List links to tasks that the learner could do next.}:

Now that you have {achieved goal}, you might like to:

• Task 1
• Task 2
• Task 3…

Resources 

{Optional. List links to related material.}

• Resource 1
• Resource 2
• Resource 3…

Contributor Guide Contents 

• What are step-by-step guides?
• What are project guides?
• Using the template
• Interlinking
• Similar software scenarios
• Submit for review

What are they not? 

Step-by-step guides aren’t examples. Examples are usually found in the documentation, and help to illustrate concepts — they are meant to be studied and understood. Step-by-step guides, in contrast, take the reader through a path of sequential steps, and are designed to be actively followed to learn a new concept.

Modular by design 

Step-by-step guides are modular. Each guide is an atomic unit of action — small, focused, and self-contained, with one learning objective and one clear outcome. Guides can be combined to form larger tutorials or workshops, or used independently for self-led learning.

How do step-by-step guides fit in the existing TYPO3 documentation ecosystem? 

How project guides extend step-by-step guides 

Project guides compose several atomic step-by-step guides into a larger or more advanced outcome.

Use a project guide when:

• Multiple distinct tasks are required
• Some tasks are already covered in other guides
• It would take more than 30 minutes or feel overwhelming as one block

Examples

• Build a multilingual site
• Develop a custom frontend plugin with user authentication

Project guides are modular 

Project guides follow the same template as regular step-by-step guides, the only difference is that the Task section looks a bit different.

Project guides are fully modular. They are made entirely by linking out to existing step-by-step guides, like ingredients in a recipe.

You should only create a project guide once all the step-by-step guides it depends on have been created. This helps avoid incomplete or blocked project guides.

Exception: In rare cases, an author may find that some procedural steps don’t justify a standalone guide — perhaps because they’re too minor, too specific, or only make sense in the context of the larger flow. In these situations, it may be appropriate to include a small number of inline steps within a project guide. Use this approach only when a task truly cannot stand alone.

Contents 

• Titles
• About the Conceptual Overview section
• About the Learning Objective section
• About the Prerequisites section
• About the Video section

• About the Task section

  • Key principles for effective tasks:
  • Tips for writing steps
  • Task section examples
  • Tips for when you have too many steps {#tips-for-when-you-have-too-many-steps}
  • Resist the urge to explain everything
• About the Summary section
• About the Next steps section
• About the Resources section

Learning objective 

In this step-by-step guide you will create a new Step-by-Step guide and create a pull request, asking for your guide to be included in the TYPO3 Step-by-Step guides.

Here is the approach we'll take:

• Create a GitHub account
• Copy content from the template
• Create a new file
• Create a fork
• Commit your changes
• Open a pull request

Prerequisites 

Create a GitHub user account 

The TYPO3 Step-by-Step guide files are stored online, at a website called GitHub. This is a place where people upload and collaborate on collections of files and folders relating to their file-based projects.

To edit files at GitHub, you need to create a user account there. Let's create one.

1. In your browser, visit Creating an account on GitHub in the GitHub Documentation.
2. Read the information on the page.
3. Follow the 4 steps in the Signing up for a new personal account section.

You now have a user account on GitHub. At the end of the sign-up process, you should be logged in as a user. You must always be logged in on GitHub in order to edit and contribute to files in repositories and projects there.

Copy content from the template 

All step-by-step guides should be based on the template file. It includes important instructions and makes the job of writing the guide easier. You need to copy it so it can be the starting point for your new guide.

1. Visit the step-by-step guide template in your web browser by clicking this link: github.com/TYPO3-Documentation/TYPO3CMS-Guide-StepByStep/blob/contrib/Documentation/90Contribute/10Template/Index.md
2. When the page has loaded, click the "Copy raw file" button. The button has no text, but an icon with two partially overlapping squares. In the screenshot below, it is highlighted with an orange frame and there is an orange arrow pointing to it.

You have now copied the raw Markdown code of the template, and you're ready to paste it into a new file.

Create a new file 

We'll create a file for our new step-by-step guide. Unless you know where in the structure your guide belongs, new guides should be placed in a dedicated folder for new (or incoming) guides.

1. In your web browser, go to the Step-by-Step guides repository at github.com/TYPO3-Documentation/TYPO3CMS-Guide-StepByStep. It will look a bit like in the screenshot below.

2. In the list of files and folders, click on "Documentation". This will load a new list of files and folders.
3. In the list of files and folders, click on the folder called "00Incoming". This will load a similar list, showing the filed and folders contained within that folder. This is where new guides are created. It will look a bit like in the screenshot below, but the exact files might change.

4. Click on the "Add file" button. A drop-down menu will appear.

5. Select "Create new file" from the drop-down menu. You'll see a warning page similar to the screenshot below, saying "You need to fork this repository to propose changes."

Create a fork 

Each collection of files and folders is called a repository. In order to edit files in a repository, you must first make your own copy of it. Such a copy is called a fork. It's not referring to the cutlery item, but it's rather a reference to a fork in the road. When you make changes to the repository, it diverges from the original. (Don't worry, later on we'll merge the two together again.)

1. Click the green "Fork this repository" button. This will start a forking process that may take a few seconds. Once the process is finished, you will see something like the screenshot below:

Note

Don't worry, if GitHub displays a message like this one. This is just as expected.

2. Where it says "Enter file contents here" is a text editor. Paste in the step-by-step guide template that you copied previously.
3. Enter a name for your file in the text box where it says "Name your file…". The Using the Template guide explains exactly what your file name should be, how it should be formatted, and that it must end in ".md".

When you are finished, it should look something like in this screenshot:

Write the guide 

Here is the point in the process when you write the step-by-step guide. See [Using the Template] 30UsingTheTemplate.md) for help to write each section of the guide.

Commit your changes 

Committing your changes means the same as saving them, but you also add a message saying what changes your save action includes.

1. Click the green "Commit changes…" button. A dialog titled "Propose Changes" will appear.

2. Fill in the fields in the dialog:

   • Commit message: Briefly describe what you've done. Use just a few words or the title of your Step-by-Step guide.
   • Extended description: Optional. You can add a longer description here.
   • Commit Email: You can usually leave this unchanged. This is the email address that will be related to your commit.
3. Click the green "Propose changes" button. This will open a new page titled "Comparing changes," looking something like the screenshot below:

Open a pull request 

When you're finished writing your guide, you're ready to ask for it to be copied from your fork into the official step-by-step guide repository.

To tell the Step-by-Step Guide maintainers that you have new things to contribute, you must open a pull request. Basically a request to "please, pull in my changes."

You're still on the "Comparing changes" page shown in the screenshot above.

1. Click the green "Create pull request" button. The "Create pull request" form will appear, as shown in the screenshot below.

2. In the "Add a title" field, check that the title is how you'd like it to be. It should be the same as you entered in your commit message earlier.
3. Click the green "Create pull request" button.

Your pull request has now been created and the maintainers will be alerted. They will review your Step-by-Step guide and let you know if they have any questions.

Summary 

Thank you for contributing to TYPO3! You have now written and contributed your very own Step-by-Step Guide using only your browser and the tools available at GitHub.

Next steps 

Now that you have written your guide, you can continue by creating more Step-by-Step Guides or make changes to the one you have already created. It is also possible to add screenshot files to your guide to make it more visual.

Resources 

• Markdown Cheat Sheet
• Step-by-Step Guide Contributor Guide
• Using the Step-by-Step Guide Template

Links between step-by-step guides 

Inside a step-by-step guide you will normally link to other step-by-step guides in these three places:

• In the Prerequisites section, if the guide you link to must be completed before starting the current guide.
• In the Next steps section, so the reader can continue to other guides after finishing the current guide.
• Within the steps, if the step requires existing knowledge, for example: Create a new page as described in [Create a new page](CreateANewPage.md).

Links between step-by-step guides and the TYPO3 documentation 

Step-by-step guides and encyclopedic documents should link to each other, in both directions.

How to find a guide or documentation page to link to 

Do a search

• Check the Step-by-Step Guide registry
• Use the TYPO3 Documentation search function — it is powerful and comprehensive. Try a few different terms or phrasing variations.

If your search turns up nothing useful, that may be a good sign that your guide really is needed.

See what others have done

Look at step-by-step guides written by other contributors that sit before or alongside yours in the structure. See what documentation pages they link to. This saves you the trouble of searching the docs from scratch.

If your guide builds on or shares a task with a similar guide, chances are it will already have referenced the same concepts, terminology, or documentation pages that you’re looking for. For example, creating pages, adding content elements, accessing page properties, etc.

How to link to missing guides 

Sometimes, while writing a step-by-step guide, you’ll need to reference a related guide that doesn’t exist yet. This might happen:

• In the prerequisite section. For example, a skill or configuration that the learner needs first.
• During a task. For example, “Before continuing, make sure you’ve [Created a custom backend layout]” — but that guide isn’t written yet.

That’s okay! Missing guides are part of a growing system, and it’s important not to lose your flow or get side-tracked. Here’s how to handle them.

1. Link to the missing guide anyway. If the guide doesn’t exist, link to the title it should have as if it does. Use the normal way you'd insert a link using MarkDown syntax: [Link text](relative/path-to-guide/)
2. Add the missing guide to the structure. Don’t worry about writing the guide yourself — just give it a logical placeholder. See How to Place Guides in the Structure for more information.

Missing guides will be tracked automatically. An automated script keeps track of missing guides by tracking links to step-by-step guides that don’t yet exist (essentially, broken internal links within the repository). These will be listed as not-yet-created, with the option to click a link to create them.

One guide per scenario — optimized for SEO 

• SEO visibility: Each guide title becomes a unique, keyword-targeted entry point.
• Clarity: One guide, one clear path — no branching or conditional steps.

Example hierarchy:

└── Getting Started
    └── Installation
        └── Local Development Environments
            ├── Install TYPO3 on macOS with DDEV
            ├── Install TYPO3 on Windows 11 with DDEV
            └── Install TYPO3 on Ubuntu 22.04 with DDEV

Or:

└── Advanced Implementation
    └── Deployment and DevOps
        └── Server Stack Scenarios
            ├── Install TYPO3 with Apache and MySQL
            ├── Install TYPO3 with Nginx and MariaDB
            └── Install TYPO3 with Caddy and PostgreSQL

To boost SEO further, use long-tail keywords in the title and conceptual overview. For example: “This guide walks you through how to install TYPO3 CMS on Ubuntu 22.04 using Composer and DDEV — ideal for developers working in a Linux environment.”

We can also cross-link to related guides, for example, “Using macOS instead? See our macOS installation guide.”

Extract shared tasks into atomic guides 

Instead of repeating similar chunks across guides, we’ll use modular content reuse strategies to minimize duplication.

For example, for “Install TYPO3 on Windows 11 with DDEV”, we might:

• Create one atomic guide for “Install DDEV on Windows 11”
• Create another for “Run the TYPO3 browser-based installer”
• Link both into the OS-specific guide, which focuses on the Windows-specific context

Minimum requirements 

All TYPO3 Step-by-Step Guides must include the following required sections:

• Title — Starts with a verb and reflects the overall learning objective
• Conceptual overview — Follows the title directly (no heading), uses plain language, and stays under ~100 words
• Learning objective — Describes what the learner will achieve by completing the guide
• Prerequisites — Lists required software, tools, environments, and any conceptual knowledge

• Task section

  • Includes at least one task with numbered steps
  • Each step begins with a verb and describes one action
  • Each task includes at least one expected outcome
• Summary — Recaps what has been achieved
• Next steps — Suggests logical follow-on tasks

The following sections are optional but strongly encouraged:

• Resources — Links to supporting material
• Video — Embedded video version of the guide (from the official TYPO3 YouTube channel)

Use the template and writing instructions to complete each section.

All required sections must be complete and free of placeholders like “TBD.”

Every guide will have room for improvement — that’s expected. That’s why all TYPO3 step-by-step guides include a feedback section to collect reader-reported gaps and issues.

Definition of done 

A step-by-step guide is ready for submission when:

[ ] All required sections are complete — no placeholders [ ] Numbered steps are logical, testable, and lead to the expected outcome [ ] Screenshots or code examples are included where appropriate and follow TYPO3 guidelines [ ] Relevant concepts or references are linked where needed [ ] Language is clear, concise, and action-oriented [ ] The guide has been tested by the author [ ] The guide follows TYPO3 writing conventions and formatting rules [ ] The guide fits its intended scope. (One learning objective per guide, or a project guide for more complex, multi-step processes.)

Task-based learning paths 

Beginners often look for a guided way of solving a particular task, such as getting started with a basic website or building a web application. Below are three examples of such task-based learning paths. Note that all of them were created from the primary structure by taking out irrelevant guides; no further adjustments (such as reordering the guides, adding guides that don’t exist in the primary structure, or choosing a different hierarchy) have been applied.

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Installation/
│   │   ├── Install TYPO3 with Composer
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
│   │   ├── Set Up a Site Configuration
│   └── Site Packages/
│       ├── Use the Bootstrap Package
├── Building Websites/
│   ├── Content Management/
│   │   ├── Set Up Page Types
│   ├── Extensions/
│   │   ├── Find and Install Extensions

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Installation/
│   │   ├── Install TYPO3 with Composer
│   │   ├── Install TYPO3 without Composer
│   │   ├── Set up TYPO3 with DDEV
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
│   └── Site Packages/
│       ├── Create a Basic Site Package
│       └── Implement Your Design
├── Building Websites/
│   ├── Content Management/
│   │   ├── Set Up Page Types
│   │   ├── Create Custom Content Elements
│   │   ├── Configure the Backend Layout
│   │   └── Manage Backend User Permissions
│   ├── Multilingual Websites/
│   │   ├── Set Up Multiple Languages
│   │   ├── Translate Content
│   │   ├── Manage Language Fallbacks
│   │   └── Work with Translation Services
├── Advanced Implementation/
│   ├── Performance Optimization/
│   │   ├── Configure Caching
│   │   ├── Set Up a CDN
│   │   ├── Optimize Database
│   │   └── Implement Static Site Generation
└── Maintenance and Security/
    ├── Regular Maintenance/
    │   ├── Backup and Restore Procedures
    │   ├── Update TYPO3 Core
    │   ├── Update Extensions
    │   └── Database Maintenance Tasks
    ├── Security/
    │   ├── Implement Security Best Practices
    │   ├── Set Up HTTPS
    │   ├── Manage User Authentication
    │   └── Security Incident Response

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Installation/
│   │   ├── Install TYPO3 with Composer
│   │   ├── Install TYPO3 without Composer
│   │   ├── Set up TYPO3 with DDEV
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
├── Building Websites/
│   ├── Extensions/
│   │   ├── Find and Install Extensions
│   │   ├── Configure Common Extensions
│   │   ├── Customize Extension Templates
│   │   └── Troubleshoot Extension Issues
├── Advanced Implementation/
│   ├── Extension Development/
│   │   ├── Create a Basic Extension
│   │   ├── Develop with Extbase and Fluid
│   │   ├── Build Non-Extbase Extensions
│   │   └── Create Extension APIs
│   ├── System Integration/
│   │   ├── Connect to External Services
│   │   ├── Implement Single Sign-On
│   │   ├── Set Up REST APIs
│   │   └── Integrate with Third-party Systems
│   └── Deployment and DevOps/
│       ├── Set Up CI/CD Pipelines
│       ├── Implement Git Workflows
│       ├── Containerize with Docker
│       └── Kubernetes Deployment
└── Maintenance and Security/
    ├── Regular Maintenance/
    │   ├── Backup and Restore Procedures
    │   ├── Update TYPO3 Core
    │   ├── Update Extensions
    │   └── Database Maintenance Tasks
    ├── Security/
    │   ├── Implement Security Best Practices
    │   ├── Set Up HTTPS
    │   ├── Manage User Authentication
    │   └── Security Incident Response
    ├── Monitoring/
    │   ├── Set Up Application Monitoring
    │   ├── Configure Log Management
    │   ├── Implement Alerts
    │   └── Performance Monitoring
    └── Troubleshooting/
        ├── Debug Common Issues
        ├── Use the Admin Panel
        ├── Work with Exception Logs
        └── Get Community Support

Role-based learning paths 

Users who want to take on a particular role in their TYPO3 team can take a role-based learning path. Standard roles include editors, integrators, developers, and administrators. These learning paths are a filtered subset of the primary structure without further restructuring.

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
│   │   ├── Create Your First Pages
│   ├── Content Creation/
│   │   ├── Create and Organize Pages
│   │   ├── Add Various Content Elements
│   │   ├── Work with the Rich Text Editor
│   │   └── Manage Media Assets
├── Building Websites/
│   ├── Content Management/
│   │   └── Manage Backend User Permissions
│   ├── Multilingual Websites/
│   │   ├── Translate Content
│   │   ├── Manage Language Fallbacks
│   │   └── Work with Translation Services

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Installation/
│   │   ├── Install TYPO3 with Composer
│   │   ├── Install TYPO3 without Composer
│   │   ├── Set up TYPO3 with DDEV
│   │   └── Upgrade an Existing TYPO3 Installation
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
│   │   ├── Create Your First Pages
│   │   ├── Set Up a Site Configuration
│   │   └── Implement Site Sets (v13+)
│   ├── Content Creation/
│   │   ├── Create and Organize Pages
│   │   ├── Add Various Content Elements
│   │   ├── Work with the Rich Text Editor
│   │   └── Manage Media Assets
│   └── Site Packages/
│       ├── Create a Basic Site Package
│       ├── Use the Bootstrap Package
│       ├── Customize Templates
│       └── Implement Your Design
├── Building Websites/
│   ├── Content Management/
│   │   ├── Set Up Page Types
│   │   ├── Create Custom Content Elements
│   │   ├── Configure the Backend Layout
│   │   └── Manage Backend User Permissions
│   ├── Multilingual Websites/
│   │   ├── Set Up Multiple Languages
│   │   ├── Translate Content
│   │   ├── Manage Language Fallbacks
│   │   └── Work with Translation Services
│   ├── Extensions/
│   │   ├── Find and Install Extensions
│   │   ├── Configure Common Extensions
│   └── Frontend Development/
│       ├── Understand Fluid Templates
│       ├── Create Responsive Layouts
│       ├── Implement Frontend User Registration
│       └── Add Custom JavaScript and CSS
└── Maintenance and Security/
    ├── Regular Maintenance/
    │   ├── Backup and Restore Procedures
    │   ├── Update TYPO3 Core
    │   ├── Update Extensions
    │   └── Database Maintenance Tasks
    ├── Security/
    │   ├── Implement Security Best Practices

TYPO3 Step-by-Step Guides/
├── Advanced Implementation/
│   ├── Extension Development/
│   │   ├── Create a Basic Extension
│   │   ├── Develop with Extbase and Fluid
│   │   ├── Build Non-Extbase Extensions
│   │   └── Create Extension APIs
│   ├── System Integration/
│   │   ├── Connect to External Services
│   │   ├── Implement Single Sign-On
│   │   ├── Set Up REST APIs
│   │   └── Integrate with Third-party Systems
│   ├── Performance Optimization/
│   │   ├── Configure Caching
│   │   ├── Optimize Database
│   │   └── Implement Static Site Generation
└── Maintenance and Security/
    └── Troubleshooting/
        ├── Debug Common Issues
        ├── Use the Admin Panel
        ├── Work with Exception Logs
        └── Get Community Support

TYPO3 Step-by-Step Guides/
├── Getting Started/
│   ├── Installation/
│   │   ├── Install TYPO3 with Composer
│   │   ├── Install TYPO3 without Composer
│   │   ├── Set up TYPO3 with DDEV
│   │   └── Upgrade an Existing TYPO3 Installation
│   ├── Basic Configuration/
│   │   ├── First-time Backend Setup
│   │   ├── Set Up a Site Configuration
│   │   └── Implement Site Sets (v13+)
├── Building Websites/
│   ├── Content Management/
│   │   ├── Set Up Page Types
│   │   ├── Create Custom Content Elements
│   │   ├── Configure the Backend Layout
│   │   └── Manage Backend User Permissions
│   ├── Multilingual Websites/
│   │   ├── Set Up Multiple Languages
│   ├── Extensions/
│   │   ├── Find and Install Extensions
│   │   ├── Configure Common Extensions
│   │   ├── Customize Extension Templates
│   │   └── Troubleshoot Extension Issues
├── Advanced Implementation/
│   ├── Performance Optimization/
│   │   ├── Configure Caching
│   │   ├── Set Up a CDN
│   └── Deployment and DevOps/
│       ├── Set Up CI/CD Pipelines
│       ├── Implement Git Workflows
│       ├── Containerize with Docker
│       └── Kubernetes Deployment
└── Maintenance and Security/
    ├── Regular Maintenance/
    │   ├── Backup and Restore Procedures
    │   ├── Update TYPO3 Core
    │   ├── Update Extensions
    │   └── Database Maintenance Tasks
    ├── Security/
    │   ├── Implement Security Best Practices
    │   ├── Set Up HTTPS
    │   ├── Manage User Authentication
    │   └── Security Incident Response
    ├── Monitoring/
    │   ├── Set Up Application Monitoring
    │   ├── Configure Log Management
    │   ├── Implement Alerts
    │   └── Performance Monitoring
    └── Troubleshooting/
        ├── Debug Common Issues
        ├── Use the Admin Panel
        ├── Work with Exception Logs
        └── Get Community Support

The guide structure philosophy 

The TYPO3 Step-by-Step Guides are structured to benefit beginners while being useful for advanced users as well.

• The main structure is hierarchical for easy and unambiguous navigation
• Topics are sorted from beginner to advanced to support steady progress while allowing readers to select topics of interest
• Guides can be prerequisites to other guides, forming a (simple) knowledge graph.

Common Placement Scenarios and Solutions 

This section provides additional guidance for cases that refuse to get classified through the classification steps. Most likely, your guide idea matches one of the following scenarios:

Worked Example 

Let’s walk through how we might evaluate and place a step-by-step guide that doesn’t have an obvious home: “Enable Open Graph tags for social media sharing”

Learning objective 

This guide explains how to create and configure a new site in a TYPO3 installation.

Prerequisites 

• A running TYPO3 instance.
• A "root page" created in the page tree to serve as the starting point of the new website.

Navigate to the Sites Module 

1. Log in to your TYPO3 backend.
2. In the main menu, go to SITE MANAGEMENT > Sites.

Create a New Site Configuration 

1. Click the "Add new site configuration" button or the + icon if you already have other sites.
2. TYPO3 will often suggest creating a site based on an existing root page that is not yet configured.

3. In the General tab, add your information to the following fields:

   • Site Identifier: A unique, lowercase name for the site (e.g., my_website). This is used internally by TYPO3.
   • Root Page ID: This is the most important setting. Select the page from your page tree that will be the root of your website (e.g., your "Home" page).
   • Base URL: The primary domain for the site, including the protocol (e.g., https://www.example.com/).
4. In the Languages tab, click Create new Language. A new language form will appear.

5. Fill in the following fields with your information:

   • Title: The human-readable name of the language (e.g., "English").
   • Entry Point: The URL segment for this language. The default language should use /. Additional languages might use a prefix (e.g., /de/).
   • Locale: The locale for the language, which is important for date formatting and other localizations (e.g., en_US.UTF-8).

6. In the Error Handling tab, fill in the following fields with your information:

   • Switch to the Error Handling tab.
   • Define how TYPO3 should handle HTTP error status codes, such as 404 Not Found.
   • You can set a specific page to display, redirect to another URL, or use a custom Fluid template for each error code.
7. Click the Save button to store your new site configuration.

Summary 

You have successfully created a site configuration. Your website is now accessible through the configured domain, and TYPO3 knows which page tree belongs to it.

Next Steps 

• Add More Languages: If your site is multilingual, you can add more languages in the Languages tab by repeating steps 4–5 above.
• Domain Variants: Create variants for different domains or subdomains that point to the same site but might have slightly different settings.
• Static Routes: For advanced URL routing, you can explore the Static Routes tab.