---
title: "Add content elements to the Content Element Wizard"
manual: "TYPO3 Explained"
version: "12.4"
permalink: "https://docs.typo3.org/permalink/t3coreapi:content-element-wizard@12.4"
source: "ApiOverview/ContentElements/ContentElementsWizard.rst"
rendered: "2026-10-21T15:29:37+00:00"
---

> [!WARNING]
> **Attention**
>
> TYPO3 v12 has reached end-of-life as of April 30th 2026 and
> is no longer being maintained. Use the version switcher on the top
> left of this page to select documentation for a supported version of TYPO3.
>
> Need more time before upgrading?
> You can purchase Extended Long Term Support (ELTS) for TYPO3 v12 here:
> [TYPO3 ELTS](https://typo3.com/services/extended-support-elts).

# Add content elements to the Content Element Wizard {#content-element-wizard}

The content element wizard opens when a new content element is
created. It can be fully configured using ref:`Page TSconfig <t3tsref:pagetsconfig>`.

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**

    ```typoscript
    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:

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

    **EXT:example/Configuration/page.tsconfig**

    ```typoscript
    @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 this file as static page TSconfig](https://docs.typo3.org/m/typo3/reference-typoscript/12.4/en-us/UsingSettingTSconfig/PageTSconfig.html#register-static-page-tsconfig).

    > [!NOTE]
    > The usage of [`Configuration/page.tsconfig`](../../ExtensionArchitecture/FileStructure/Configuration/PageTsconfig.md#file-extension-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](https://docs.typo3.org/m/typo3/reference-typoscript/12.4/en-us/UsingSettingTSconfig/PageTSconfig.html#setting-page-tsconfig).
1.  [Register your icon](https://docs.typo3.org/permalink/t3coreapi:icon-registration@12.4)

    **EXT:example/Configuration/Icons.php**

    ```php
    <?php

    return [
       // use same identifier as used in TSconfig for icon
       'example-registration' => [
          'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
          'source' => 'EXT:example/Resources/Public/Icons/example-registration.svg',
       ],
    ];
    ```
1.  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!

    ![Content element wizard with the new content element](../../Images/ManualScreenshots/Backend/ContentElementWizard.png)

> [!NOTE]
> **See also**
>
> -   [newContentElement.wizardItems](https://docs.typo3.org/m/typo3/reference-typoscript/12.4/en-us/PageTsconfig/Mod/Wizards.html#pagenewcontentelementwizard) in TSconfig Reference
> -   [Register your icon](https://docs.typo3.org/permalink/t3coreapi:icon-registration@12.4) in TYPO3 Explained
> -   [Create a custom content element type](https://docs.typo3.org/permalink/t3coreapi:adding-your-own-content-elements@12.4)

## Add your plugin or content element to a different tab {#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**

```typoscript
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:

```typoscript
show = *
```

## Create a new tab {#create-a-new-tab}

See the [bootstrap_package](https://github.com/benjaminkott/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**

```typoscript
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**

```typoscript
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)
}
```