45+ TypoScript Tipps & Tricks

Sind Sie ein TYPO3-Integrator auf mittlerem oder fortgeschrittenem Niveau? Und auf der Suche nach TypoScript Tipps und Tricks? In diesem TYPO3 Blog-Beitrag finden Sie eine Liste von coolen TypoScript-Snippets, die Ihnen helfen werden, qualitativ bessere & produktive TYPO3-Websites zu erstellen.

TypoScript ist eigentlich nur eine Konfigurationssprache - streng genommen. Tatsache ist, dass TypoScript zwei Arten von Publikum hat: 1. Haters; Die Anfänger, die glauben, dass TYPO3 wegen der TypoScript-Sprache nicht populär wird, 2. Lovers; Die erfahrenen Anwender, die fest daran glauben, dass TYPO3 mit TypoScript flexibler und leistungsfähiger ist. Es bedeutet, in der Anfangsphase wird es Ihre Zeit und Aufmerksamkeit als Lernkurven benötigen; Sobald Sie besser in die Hände von TypoScript kommen - werden Sie die Macht von TypoScript spüren.

Mythos: TypoScript ist eine Skriptsprache.
Wissen Sie warum!

Liebe TYPO3-Leser, wie Sie wissen, mein Ritual; Bevor wir beginnen, lassen Sie uns an die Leute erinnern, die sehr hart an dem TYPO3 Open Source Community-Projekt gearbeitet haben. Besonders Kasper, der Gründer von TYPO3, hat vor über 20 Jahren so geniale TypoScript-Lösungen geschaffen. #T3Kudos an alle TypoScript-Mitwirkenden.

Let’s start with some misunderstandings and wrong statements about TypoScript.

Myth: TypoScript Is a Scripting Language

Read one of my popular TypoScript blogs at  My ultimate goal is to step-by-step guide you to initiate and feel confident about TYPO3 TypoScript. I’m sure you will learn the fundamentals and architecture to know the power of TypoScript. t3planet.com/blog/typoscript/

More TypoScript Myths

I recommend reading TYPO3’s official documentation about Myths, FAQ, and acknowledgments, which includes topics stated below for beginners.

• Myth: “TypoScript has the same syntax as JavaScript.”
• Myth: “TypoScript is a proprietary standard.”
• Myth: “TypoScript is very complex.”
• Why not XML Instead?

In recent TYPO3 projects and extensions, People often use .ts. According to TYPO3 coding guidelines, Please always use the “.typoscript” file extension for your TypoScript files.

// Wrong-way
typo3conf/ext/yourextension/Configuation/setup.txt
typo3conf/ext/yourextension/Configuation/setup.ts

// Correct-way
typo3conf/ext/yourextension/Configuation/setup.typoscript

Yes, of course! Your TypoScript code will not work for wrong cases. Consider below TypoScript snippet “Value” is a false one.

// Correct
myObject = TEXT
myObject.value = <strong>Some HTML code</strong>

// Wrong
myObject = text
myObject.Value = <strong>Some HTML code</strong>

If you are a beginner, then don't be afraid of TypoScript. Because, technically speaking, TypoScript is just a long PHP configuration array.

// TypoScript Configuration
myObject {
  backgroundColor = blue
  backgroundColor.transparency = 95%
}

// Result PHP Configuraton Array
$typoScript = [
    'myObject.' => [
        'backgroundColor' => 'blue',
        'backgroundColor.' => [
            'transparency' => '95%'
        ]
    ]
]

About naming convention to create TypoScript objects, Use only A-Z, a-z, 0-9, “-“, “_” and periods (.) for object paths!

// Escaping example:
my\.escaped\.key = test
// This will result in an object named my.escaped.key with the value “test”.

You can simply import or include TypoScript using modern `@import` or traditional `<INCLUDE_TYPOSCRIPT />` way as presented in the below TypoScript tutorial.

// Import a single file
@import 'EXT:myextensionkey/Configuration/TypoScript/setup.typoscript'

// Option 1. Import multiple files in a single directory, sorted by file name
@import 'EXT:myextensionkey/Configuration/TypoScript/*.typoscript'

// Option 2. It's possible to omit the file ending, then "*.typoscript" is appended automatically
@import 'EXT:myextensionkey/Configuration/TypoScript/'

// Option 3. Traditional TypoScript Includes
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/html/setup.typoscript">

// Option 4. Include Based on TypoScript Condition
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:myextensionkey/Configuration/TypoScript/user.typoscript" condition="[loginUser = *]">

Oh, my friend, I hope you are not using any of the below bad practices to write your TypoScript.

• Should avoid storing TypoScript code as template record in a database.
• Should avoid storing TypoScript files into the fileadmin folder.
• Should follow global standards files and folders (see below) structure.

According to the TYPO3 core and community standards, Please always configure your TypoScript with the below structure.

typo3conf/ext/yourextnsion/Configuration/

└─
    TSconfig
    └─
        ├── Page/setup.typoscript (for page PageTSConfig)
        ├── User/setup.typoscript (for user TSconfig)
    TypoScript
    └─
        ├── constants.typoscript
        ├── setup.typoscript

Using TypoScriptParser TYPO3 core API, you can grab a TypoScript setup.

// Your TypoSCript Code
myObject = TEXT
myObject {
  backgroundColor = blue
}

// Create TypoScriptParser to your extension’s controller
$TSparserObject = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\TypoScript\Parser\TypoScriptParser::class);
$TSparserObject->parse($tsString);

echo '<pre>';
print_r($TSparserObject->setup);
echo '</pre>';

// Output
Array
(
  [myObject] => TEXT
  [myObject.] => Array
  (
    [backgroundColor] => blue
  )
)

echo '
     <div style="background-color:' . $TSparserObject->setup['myObject.']['backgroundColor'] . '">
        // Your Code
     </div>
';

While you are speed testing your TYPO3 site, most modern speed & performance analyzers get common problems of “Rendering Blocking JavaScript”. The general solution is to use the `defer` or `async` attribute while including JavaScript files. TypoScript allows you to configure, check below TypoScript snippet.

page = PAGE
page.includeJSFooter {
    test = typo3conf/ext/myextension/Resources/Public/Js/scripts.js
    test.async = 1

    test2 = typo3conf/ext/myextension/Resources/Public/Js/custom.js
    test2.defer = 1
} 

By default, Rendering exact errors in the frontend is disabled in development mode. You can simply configure `contentObjectExceptionHandler` to enable TYPO3 errors. Here are the TypoScript tutorials.

// Enable for default exception handler (enabled by default in production context)
config.contentObjectExceptionHandler = 1

// Use a class name for individual exception handlers
config.contentObjectExceptionHandler = TYPO3\CMS\Frontend\ContentObject\Exception\ProductionExceptionHandler

// Customize the error message. A randomly generated code is replaced within the message if needed.
config.contentObjectExceptionHandler.errorMessage = Oops an error occurred. Code: %s

// Configure exception codes which will not be handled, but bubble up again (useful for temporary fatal errors)
tt_content.login.20.exceptionHandler.ignoreCodes.10 = 1414512813

// Disable the exception handling for an individual plugin/ content object
tt_content.login.20.exceptionHandler = 0

// ignoreCodes and errorMessage can be both configured globally …
config.contentObjectExceptionHandler.errorMessage = Oops an error occurred. Code: %s
config.contentObjectExceptionHandler.ignoreCodes.10 = 1414512813

// … or locally for individual content objects
tt_content.login.20.exceptionHandler.errorMessage = Oops an error occurred. Code: %s
tt_content.login.20.exceptionHandler.ignoreCodes.10 = 1414512813

Using `typeNum`, you can define your customized PAGE object; here is the example of TypoScript AJAX request and response.

// Create your customized TypoScript Page Object
myAjax = PAGE
myAjax {
   typeNum = 9951
   config {
      disableAllHeaderCode = 1
      admPanel = 0
      debug = 0
   }

   // Prevent caching if necessary
   10 = COA_INT
   10 < plugin.tx_myextension_myajaxplugin
}

// Call through AJAZ
yoursite.com/?type=9951

In the same way, you can create another typeNum and set up a header content-type suitable for JSON format.

// Create your customized TypoScript Page Object
myJSON = PAGE
myJSON {
   typeNum = 9952
   10 =< tt_content.list.20.tx_myextension_myjsonplugin
   config {
      disableAllHeaderCode = 1
      additionalHeaders.10.header = Content-type:application/json
      admPanel = 0
   }
}

// Call through AJAZ
yoursite.com/?type=9952

In some situations, you will need to manipulate your data using TypoScript. You can use `stdWrap.replacement` to search and replace your data.

page.10 = TEXT
page.10 {
    value = Try to Find my_words
    stdWrap.replacement {
        10 {
            search = _
            replace.char = 32
        }
        20 {
            search = to Find
            replace = to search
        }
        30 {
            search = #a (Try|Find)#i
            replace = got
            useRegExp = 1
        }
    }
}

= This simply assigns a value to an object path.

:= This operator assigns a value to an object path by calling a predefined function that modifies the existing value of the current object path in different ways.

myObject = TEXT
myObject.value = 1,2,3
myObject.value := addToList(4,5)
myObject.value := removeFromList(2,1)
produces the same result as:

myObject = TEXT
myObject.value = 3,4,5

To write better and structured TypoScript code, Try to use {} as much as possible. Here is the TypoScript example for code redundancies.

myObject = TEXT
myObject.stdWrap.field = title
myObject.stdWrap.ifEmpty.data = leveltitle:0

myObject = TEXT
myObject {
   stdWrap {
      field = title
      ifEmpty {
         data = leveltitle:0
      }
   }
}

To simply copy a particular TypoScript object by reference, Use the “=<” operator. Here is an example.

// Create TypoScript Object
omeObject = TEXT
someObject {
   value = Hello world!
   stdWrap.wrap = <p>|<p>
}

// Let’s copy whole object by reference
anotherObject =< someObject
someObject.stdWrap.wrap = <h1>|<h1>

You know well that you can unset your TypoScript object with just the “>” operator.

// Initiate TypoScript object

myObject = TEXT
myObject.value = <strong> HTML - code </strong>

// Unset it
myObject >

Do you want to create a one-page TYPO3 site? This little TypoScript tutorial will help you quickly make a one-page TYPO3 site with the best backend usability.

Whenever you create your custom TYPO3 extension, you may probably need to include TypoScript. Follow this TYPO3 snippet to make the Include TypoScript feature.

<?php
#Configuration/TCA/Overrides/sys_template.php:

defined('TYPO3') or die();

call_user_func(function()
{
   $extensionKey = 'myextension';
   /**
    * Default TypoScript
    */
   \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
      $extensionKey,
      'Configuration/TypoScript',
      'Some descriptive title'
   );
});

While development, sometimes frontend admin panel helps debug - Just enable below to display admin panel.

// Enable Frontend Admin Panel Using TypoScript
config.admPanel = 1

You can use TypoScript conditions using many ways, as below.

Option 1. Using ELSE and END

[condition]
    // some more TypoScript (only parsed if the condition is met.)
[ELSE]
    // some TypoScript
[END]

Option 2. Using GLOBAL

[condition]
    // some more TypoScript (only parsed if the condition is met.)

[GLOBAL]
    // some TypoScript

page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

[loginUser('*') or ip('127.0.0.1')]
   page.20 = TEXT
   page.20 {
      value = Only for logged in users or local setup
      stdWrap.case = upper
   }
[GLOBAL]

Valid/Invalid TypoScript Conditions

// Correct TypoScript Conditions
someObject {
   1property = 234
}

[loginUser('*')]
someObject {
   2property = 567
}

// Invalid TypoScript Conditions
someObject {
   1property = 234
   [loginUser('*')]
   2property = 567
}

someObject {
   1property = 234
   [GLOBAL]
   2property = 567
}

Since TYPO3 v9, TYPO3 has collaborated with Symfony to use expression language. You can use existing useful variables/functions and also able to create your custom TypoScript conditions.

// Variables:

[page["backend_layout"] == 1]
   page.42.value = Backend layout 1 chosen
[END]

// Functions:

[loginUser('*')]
   page.42.value = Frontend user logged in
[END]
[getTSFE().isBackendUserLoggedIn()]
   page.42.value = Backend user logged in
[END]

// Strings:

[request.getNormalizedParams().getHttpHost() == 'www.example.org']
   page.42.value = Http Host is www.example.org
[END]

// Arrays:

[page["pid"] in [17,24]]
   page.42.value = This page is a child of page 17 or page 24
[END]

// Equality:

[applicationContext == "Development"]
   page.42.value = The application context is exactly "Development"
[END]

// Wildcards:

[like(applicationContext, "Development*")]
   page.42.value = The application context starts with "Development"
[END]

// Regular expressions:

[applicationContext matches "/^Development/"]
   page.42.value = The application context starts with "Development"
[END]

// Array operators:

[17 in tree.rootLineIds || 24 in tree.rootLineIds]
   page.42.value = Pid with id 17 or 24 is in the rootline.
[END]

// And conditions:

[condition1() and condition2()]
   page.42.value = Condition 1 and condition 2 met
[END]

// Or conditions:

[condition1() or condition2()]
   temp.value = Condition 1 or condition 2 met
[END]

I recommend reading my article on this topic at 21 TypoScript Conditions Cheatsheet.

Hmm, PHP errors can be found easily; how can we know if something is wrong in TypoScript code?

Troubleshooting TypoScript can be a confusing process as there are numerous impacts like the active page and conditions. Additionally, constants can be utilized that get substituted. The accompanying segments provide data about how to debug TypoScript and how to discover errors inside TypoScript.

In the default TYPO3 element, Let’s remove unnecessary div-tag.

// Remove wrapper from Header field
lib.stdheader.stdWrap.dataWrap = |

TYPO3 is very flexible; the developer gets a chance to change stuff in 3rd party TYPO3 extensions.

// Remove default Frontend CSS
plugin.tx_frontend._CSS_DEFAULT_STYLE >

// Remove default style of EXT.indexed_search TYPO3 extension
plugin.tx_indexedsearch._CSS_DEFAULT_STYLE >

// Change stuff in EXT.tt_news
plugin.tt_news._DEFAULT_PI_ VARS.year.stdWrap.data = date:Y

// Set your title with Multilingual
plugin.tx_myext_pi1._LOCAL_LANG.de.list_mode_1 = Your Title

Here are some helpful TypoScript caching tips.

// Enable Cache
config.no_cache = 0

// Cache Lifetime using TypoScript
config.cache.<page-id> = <table name>:<storage-pid>
config.cache.10 = fe_users:2
config.cache.all = fe_users:2

// How Can We Clear Caches at Midnight?
config.cache_clearAtMidnight = 1

// How Can I Change Case Time Period?
config.cache_period = 86400 // (= 24 hours)

For backend usability, Try to consider creating custom categories in TypoScript constant.

# customcategory=mysite=LLL:EXT:myextension/Resources/Private/locallang.xlf:mysite

#cat=mysite/cache/a; type=boolean; label=Global no_cache
config.no_cache = 0

When you are working with 3rd party TYPO3 extensions, often you will need to changes language-wise the labels/text.

// Default Text = Englisch
plugin.tx_indexedsearch._LOCAL_LANG.default {
  form.searchFor = Search for:
  form.submit = Search
  result.noResult = No results!
}

// Deutscher Text
plugin.tx_indexedsearch._LOCAL_LANG.de {
  form.searchFor = Suche nach:
  form.submit = Suchen
  result.noResult = Keine Suchergebnisse!
}

According to the TYPO3 standard, It's best practice to configure the ext_conf_template.typoscript file into your custom TYPO3 extension - to provide global TYPO3 configuration. In such a situation, if you want to get TYPO3 extension configuration to your template (via TypoScript constants), then perform the below steps.

Default TYPO3 core’s text elements may require to change wrapper according to your frontend needs. Use the below code.

tt_content {
  stdWrap.outerWrap.cObject = CASE
  stdWrap.outerWrap.cObject {
    key.field = colPos
    // Default ist ohne wrap
    default = TEXT
    default.value = |
    // colPos 2 ist die rechte Spalte
    2 = CASE
    2 {
      key.field = CType
      // cObject text bekommt einen wrap
      text = TEXT
      text.value = <div class="yourWrapperClass">|</div>
      default = TEXT
      default.value = |
    }
  }
}

Let’s try to add CSS and JavaScript code to <head> tag with the below TypoScript code snippets.

page.cssInline {
    10 = TEXT
    10.value = h1 {margin:15px;}

    20 = TEXT
    20.value = h1 span {color: blue;}
}

page.jsInline {
    10 = TEXT
    10.stdWrap.dataWrap = var pageId = {TSFE:id};
}

Let’s simply get the current page URL and Title using TypoScript code.

lib.currentURL= TEXT
lib.currentURL.data = getIndpEnv:TYPO3_REQUEST_URL

lib.pagetitle = TEXT
lib.pagetitle.data = page:title

Sometimes, to write structured code better to use switch/case instead of long else/if conditions.

myObject = CASE
myObject.if.isTrue.field = header

// This value determines which of the following cObjects will be rendered.
myObject.key.field = layout

// cObject for the case that the field layout is "1".
myObject.1 = TEXT
myObject.1 {
  ....
}

// cObject for all other cases.
myObject.default = TEXT
myObject.default {
  ....
}

myObject.stdWrap.wrap = |<br />

You can achieve customized, and complex rendering, CONTENT, and COA object that works well.

page = PAGE
page.typeNum = 0

page.10 = CONTENT
page.10.table = tt_content
page.10.select {
   orderBy = sorting
   where = {#colPos}=0
}

page.10.renderObj = COA
page.10.renderObj {
   10 = TEXT
   10.stdWrap.field = header
   10.stdWrap.wrap = <h1>|</h1>
   20 = TEXT
   20.stdWrap.field = bodytext
   20.stdWrap.wrap = <p>|</p>
}

TypoScript is powerful; you can quickly get a list of all the images from a particular folder. Generally, for quick stuff, gallery kind of feature can quickly develop using FILES object.

// Read particular defined files
page.10 = FILES
page.10.folders = 2:mypics/,4:myimages/

// Render all images from one particular folder
page.20 = FILES
page.20 {
   folders = 1:images/
   folders.recursive = 1

   10.renderObj = IMAGE
   10.renderObj {
      file.import.data = file:current:uid
   }
}

This will be a common use-case to get an image from Page property, e.g.an, to create a banner.

// Let’s grab single image (of course, consider parent pages)
lib.pageImage = IMAGE
lib.pageImage {
    file.import.data = levelmedia: -1, "slide"
    file.import = uploads/media/
    file.import.listNum = 0
    file.import.override.field = media

    border = 0
    altText = xy

    titleText = xy
}

// Grab all the uploaded images from Page
page.10 = FILES
page.10 {
    references {
        data = levelmedia: -1, slide
    }

    renderObj = IMAGE
    renderObj {
        file.import.dataWrap = {file:current:storage}:{file:current:identifier}
        altText.data = file:current:title
        wrap = <div class="banner">|</div>
    }
}

Let’s grab and render the image from the FAL structure.

lib.pageResources = FILES 
lib.pageResources { 
  references { 
    table = pages 
    uid.data = uid
    fieldName = media
  } 

  renderObj = IMAGE 
  renderObj {
    file { 
      import.data = file:current:uid 
      treatIdAsReference = 1 
      width = 150c 
      height = 150c 
    } 
    altText.data = file:current:alternative
    titleText.data = file:current:title
  } 
  maxItems = 3
}

Let’s have a look at rendering images from particular content elements.

lib.myImages = FILES
lib.myImages {
    stdWrap.wrap = <div class="pic">|</div>
    references {
        table = tt_content
        // current CE (needs context)
        #uid.data = uid
        // for CSC
        fieldName = image
        // for FSC
        fieldname = assets
    }
    renderObj = IMAGE
    renderObj {
        file {
            import.data = file:current:uid
            treatIdAsReference = 1
            width = 150c
            height = 150c
        }
        altText.data = file:current:alternative
        titleText.data = file:current:title
        stdWrap.typolink.parameter.data = file:current:link
    }
    maxItems = 5
}

TypoScript object FLUIDTEMPLATE has helpful stuff like variables and settings.

// TypoScript
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
   templateName = MyTemplate
   templateRootPaths {
      10 = EXT:myextension/Resources/Private/Templates
   }
   partialRootPaths {
      10 = EXT:myextension/Resources/Private/Partials
   }
   variables {
      mylabel = TEXT
      mylabel.value = My label from TypoScript
   }
   settings {
      // Get the copyright year from a TypoScript constant.
      copyrightYear = {$year}
   }
}

<!-- EXT:myextension/Resources/Private/Templates/MyTemplate.html -->
<h1>{data.title}<f:if condition="{data.subtitle}">, {data.subtitle}</f:if></h1>
<h3>{mylabel}</h3>
<f:format.html>{data.bodytext}</f:format.html>
<p>&copy; {settings.copyrightYear}</p>

After the launching of data processing, The TYPO3 integrator’s life is easy because it can easily create data and directly render it to Fluid templates. Here are some examples.

DatabaseQueryProcessor: Render Data from Database

tt_content {
   examples_dataprocdb =< lib.contentElement
   examples_dataprocdb {
      templateName = DataProcDb
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
      dataProcessing.10 {
         if.isTrue.field = pages
         table = tx_examples_haiku
         orderBy = title
         pidInList.field = pages
         as = myHaikus

         // recursively process the images in the records with the FilesProcessor
         dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
               references.fieldName = image
            }
         }
      }
   }
}

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <h2>Data in variable myHaikus</h2>
   <f:debug inline="true">{myHaikus}</f:debug>
</html>

LanguageMenuProcessor - Create Language Menu

tt_content {
   examples_dataproclang =< lib.contentElement
   examples_dataproclang {
      templateName = DataProcLangMenu
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
      dataProcessing.10 {
         languages = auto
         as = languageNavigation
      }
   }
}

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <h2>Data in variable languageNavigation</h2>
   <f:debug inline="true">{languageNavigation}</f:debug>
</html>

MenuProcessor - Best Way to Render Menu using TypoScript + Fluid

tt_content {
   examples_dataprocmenu =< lib.contentElement
   examples_dataprocmenu {
      templateName = DataProcMenu
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      dataProcessing.10 {
         levels = 2
         as = headerMenu
         expandAll = 1
         includeSpacer = 1
         titleField = nav_title // title
         dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
               references.fieldName = media
            }
         }
      }
   }
}

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <h2>Data in variable headerMenu</h2>
   <f:debug inline="true">{headerMenu}</f:debug>
</html>

SiteProcessor - Get Data from Site Management

tt_content {
   examples_dataprocsite =< lib.contentElement
   examples_dataprocsite {
      templateName = DataProcSite
      dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\SiteProcessor
      dataProcessing.10 {
         as = site
      }
   }
}

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <h2>Data in variable site</h2>
   <f:debug inline="true">{site}</f:debug>
</html>

Are you looking to implement TypoScript lint in TYPO3? For better TYPO3 code quality, Always pass your TypoScript code with the below lint.

This package contains a library offering a tokenizer and a parser for TYPO3's configuration language, "TypoScript".

TypoScript support for Atom. Forked initially from atom-typo3 and split into multiple packages.

TYPO3 CMS has a 20+ years old constant editor feature. Team T3Planet have tried to improve the UI/UX design for better backend usability with brand new Modern TYPO3 Constant Editor - You’ll love it :)

I’ve tried to prepare helpful TypoScript TYPO3 extensions from TER as below.

EXT.typoscript_rendering - TypoScript Rendering

Can render a TypoScript path by URL, beneficial for Ajax dispatching. This extension provides a possibility to cause arbitrary TypoScript paths in a given record context. This is especially useful for rendering a plugin via AjaxRequest.

EXT.content_replacer - Content Replacer

Do you need a fast substitution of terms with the full support of typoscript, categories, and RTE integration? If yes, the extension could be perfectly fit into your project. Wrapping of the replacement terms gains the performance to simplify the parsing process.

EXT.typoscript2ce - TypoScript To Content Elements

typoscript2contentelement allows you to show the result of typoscript (e.g. HMENU) as a contentelement - a simple thing...

EXT.pagetitle_ts - Page title for TypoScript

Provides access to the final page title, built by the PageTitle API, within TypoScript.

EXT.device - Device Conditions

Provides additional TypoScript conditions for user agent detections based on the Piwik Device Detector library.

EXT.typoscript_code - TypoScript code

This extension allows you to insert any TypoScript code to a page as a standard content element.

EXT.cobj_xslt - XSLT Content Object

Extends TypoScript with a new cObject XSLT for flexible XML transformations with XSL.

EXT.cobj_xpath - XPATH Content Object

Extends TypoScript with a new cObject XPATH for flexible handling of XML content.

EXT.patch10011 - TypoScript Condition userFunc enhancements

TypoScript conditions will only be executed if a named extension has been installed in a given version number. Add parameters and a return value comparison to userFunc. TYPO3 core patch #10011.

Unfortunately, there is less and standard TypoScript Cheat Sheet available. Still, you can find some of them TypoScript in the below article.

• 21 TypoScript Conditions Cheatsheet
• 15 TYPO3 Cheat Sheets For Everyone!

Fortunately, there are many TYPO3 books available that include TypoScript chapters. Try to find the best suitable for you from the below list.

• Mastering TypoScript: TYPO3 Website, Template, and Extension Development
• TYPO3 Books For You!
• 12+ Best TYPO3 Books You'll Want to Read

Try to use the below available TypoScript plugins for your favorite IDE :)

• Visual Code TypoScript
• PhpStorm TypoScript
• TYPO3 / TypoScript development with Panic's Coda 2
• Typoscript For PhpStorm, Webstorm, and Intellij

Thanks for reading my long article. I hope you learned and enjoyed it.

From the above list, Which one of your favorite TypoScript trips and tricks? Do you have any other TypoScript hints? I would love to hear from you in the comment box.

Have a Happy TypoScripting!