Add content elements to the Content Element Wizard

The content element wizard opens when a new content element is created. It can be fully configured using TSConfig.

Our extension key is example and the name of the content element or plugin is registration.

  1. Create page TSconfig

    EXT:example/Configuration/TsConfig/Page/Mod/Wizards/NewContentElement.tsconfig
    mod.wizards {
        newContentElement.wizardItems {
            plugins {
                elements {
                    example_registration {
                        iconIdentifier = example-registration
                        title = Registration Example
                        description = Create a registration form
                        tt_content_defValues {
                            CType = list
                            list_type = example_registration
                        }
                    }
                }
            }
        }
    }
    

    You may want to replace title and description from above, using language files for translation, for example:

    title = LLL:EXT:example/Resources/Private/Language/locallang.xlf:registration_title
    description = LLL:EXT:example/Resources/Private/Language/locallang.xlf:registration_description
    
  2. Include TSconfig

    EXT:example/Configuration/page.tsconfig
    @import 'EXT:example/Configuration/TsConfig/Page/Mod/Wizards/NewContentElement.tsconfig'
    

    This always includes the above page TSconfig. It is better practice to make this configurable by registering the file as static page TSconfig.

    Note

    The usage of Configuration/page.tsconfig is only valid in TYPO3 v12+. If you want to stay compatible with TYPO3 v11 and v12 have a look into Setting page TSconfig.

  3. Register your icon

    EXT:example/Configuration/Icons.php
    <?php
    
    return [
       // use same identifier as used in TSconfig for icon
       'example-registration' => [
          'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\FontawesomeIconProvider::class,
          // font-awesome identifier ('external-link-square')
          'name' => 'external-link-square',
       ],
    ];
    
  4. After clearing cache, create a new content element

    After clearing the cache via Admin Tools > Maintenance or the command vendor/bin/typo3 cache:flush you should now see the icon, title and description you just added!

    ../../_images/ContentElementWizard.png

    Content element wizard with the new content element

Add your plugin or content element to a different tab

The above example adds your plugin to the tab “Plugin” in the content element wizard. You can add it to one of the other existing tabs or create a new one.

Tip

Look into the module Info > Page TSconfig for existing configurations of mod.wizards.newContentElement.wizardItems.

If you add it to any of the other tabs (other than plugins), you must add the name to show as well:

EXT:example/Configuration/TsConfig/Page/Mod/Wizards/NewContentElement.tsconfig
mod.wizards.newContentElement.wizardItems.common {
    elements {
        example_registration {
            iconIdentifier = example-registration
            title = Example title
            description = Example description
            tt_content_defValues {
                CType = list
                list_type = example_registration
            }
        }
    }
    show := addToList(example_registration)
}

When you look at existing page TSconfig in the Info module, you may notice that show has been set to include all for the Plugins tab:

show = *

Create a new tab

See the bootstrap_package for an example of creating a new tab Interactive and adding elements to it:

EXT:bootstrap_package/Configuration/TsConfig/Page/ContentElement/Categories.tsconfig
 mod.wizards.newContentElement.wizardItems {
     interactive.header = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:content_group.interactive
 }
EXT:bootstrap_package/Configuration/TsConfig/Page/ContentElement/Element/Accordion.tsconfig
 mod.wizards.newContentElement.wizardItems.interactive {
     elements {
         accordion {
             iconIdentifier = content-bootstrappackage-accordion
             title = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:content_element.accordion
             description = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:content_element.accordion.description
             tt_content_defValues {
                 CType = accordion
             }
         }
     }
     show := addToList(accordion)
 }