Learn TYPO3 Custom Elements with Core Ways

Before we start, Let me quickly try to clear what’s TYPO3 custom elements. For any TYPO3 website, according to custom business needs, the TYPO3 developer will be required to create custom elements, Here is the example.

Frontend TYPO3 Template

Check out our most famous Free TYPO3 Template T3 Agency Whole template is developed with TYPO3 core and custom elements eg., About, Banner with CTA, etc.

What’s TYPO3 Core Elements?

The TYPO3 community is awesome, they are always eager to innovate something cool. To create TYPO3 custom elements, there are many popular TYPO3 extensions at TER.

You may have questions, Why separate TYPO3 extensions developed for such core-level tasks? Here are the reasons as below.

• For Faster Development, Because TYPO3 core way’s is a bit time consuming with follows many steps (of PHP, PageTSconfig, TypoScript, etc)
• Easy maintenance
• Future Extendibility
• Hessle-free Updates
• And so on.

Let’s see which are the most useful, popular, and modern TYPO3 extensions available for TYPO3 to create custom elements.

Need Your Feedback

If you want me to write a detailed blog for one of the below methods, then write to me in the comment box at the bottom. And Subscribe Our Blog The TYPO3 Knowledge Hub.

1. TYPO3 Core-Ways

Of course, our favorite is to keep stick with TYPO3 core ways for performance, security, and most importantly future easy updates. This article’s aims give you an overview to create TYPO3 custom elements with TYPO3 core-ways, Just keep reading!

2. Mask - Gernot Ploiner

OK cool, You want to know how to create TYPO3 flexible elements within TYPO3 core. Let’s explore how!

Prerequisites for TYPO3 Custom Elements

• TYPO3 v9, v10
• EXT:fluid_styled_content
• (optional) Create your custom extension

Good to know

One of our main focuses is to create professional and industry-standard TYPO3 Templates. Team T3Terminal created a smart TYPO3 templating technique with a famous parent and child template concept with EXT:ns_basetheme & EXT:ns_theme_agency Good thing is that we are also creating TYPO3 custom elements using TYPO3 core (as below mentioned steps).

Step-by-Step Guide to TYPO3 Custom Elements

Source

Step 1. PageTSconfig: Tab Registration of the TYPO3 “Custom Elements”

// typo3conf/myextension/Configuration/PageTSconfig/setup.typoscript

mod.wizards.newContentElement.wizardItems.extra {
    header = Custom Elements
    icon =
    elements {
        myextension_newcontentelement {
            iconIdentifier = my-icon-identifier
            title = LLL:EXT:my/Resources/Private/Language/Tca.xlf:myextension_newcontentelement.wizard.title
            description = LLL:EXT:myextension/Resources/Private/Language/Tca.xlf:myextension_newcontentelement.wizard.description
            tt_content_defValues {
                CType = myextension_newcontentelement
            }
        }
    }
    show := addToList(myextension_newcontentelement)
}

// typo3conf/ext/myextension/ext_localconf.php

$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
// use same identifier as used in TSconfig for icon
$iconRegistry->registerIcon(
   // use same identifier as used in TSconfig for icon
   'my-icon-identifier',
   \TYPO3\CMS\Core\Imaging\IconProvider\FontawesomeIconProvider::class,
   // font-awesome identifier ('external-link-square')
   ['name' => 'external-link-square']
);

Step 2. TCA tt_content: Add TYPO3 Custom Elements to “Type” Dropdown

// typo3conf/myextension/Configuration/TCA/Overrides/tt_content.php

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
   'tt_content',
   'CType',
    [
        'LLL:EXT:myextension/Resources/Private/Language/Tca.xlf:myextension_newcontentelement',
        'myextension_newcontentelement',
        'my-icon-identifier',
    ],
    'header',
    'after'
);

Step 3. TCA tt_content: Add Fields

// typo3conf/myextension/Configuration/TCA/Overrides/tt_content.php

$GLOBALS['TCA']['tt_content']['types']['myextension_newcontentelement'] = [
    'showitem' => '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;headers,
            bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;frames,
            --palette--;;appearanceLinks,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            categories,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
    ',
    'columnsOverrides' => [
        'bodytext' => [
            'config' => [
                'enableRichtext' => true,
                'richtextConfiguration' => 'default',
            ],
        ],
    ],
];

Step 4. TCA sys_template: Include Frontend Template

// typo3conf/myextension/Configuration/TCA/Overrides/sys_template.php

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
    'myextension',
    'Configuration/TypoScript',
    'My description of template'
);

Step 5. TypoScript: Register TYPO3 Custom Element

// typo3conf/myextension/Configuration/TypoScript/setup.typoscript

tt_content {
    myextension_newcontentelement =< lib.contentElement
    myextension_newcontentelement {
        templateName = NewContentElement
    }
}

Step 6. Fluid: Render TYPO3 Custom Element

// typo3conf/myextension/Resources/Private/Templates/NewContentElements.html/

<html data-namespace-typo3-fluid="true"
      xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<f:debug>{_all}</f:debug>
<h2>Woohoo! My First TYPO3 Custom Element</h2>
<div class=”container”>
{data.bodytext -> f:format.html()}
</div>
</html>

Step 7. (Optional) Do you want a cool Backend Preview?