--- title: Einführung in das TYPO3 Parent und Child Theme Konzept url: "https://nitsantech.de/blog/concept-architecture-for-the-future-typo3-theme-manager" description: "Haben Sie schon einmal von dem Konzept des Parent- und Child-Theme in TYPO3 CMS gehört? Lesen Sie diesen ausführlichen Blog über das Konzept und die Architektur des zukünftigen TYPO3-Theme" image: "https://nitsantech.de/fileadmin/_processed_/6/f/csm_concept-and-architecutre-of-the-future-typo3-theme-manager_b92001afd2.jpg" author: Sanjay Chauhan - TYPO3 Technopreneur date: 2019-11-26 modified: 2025-11-07 lastUpdated: 2026-02-25 categories: - TYPO3 CMS --- # Einführung in das TYPO3 Parent und Child Theme Konzept Einführung in das TYPO3 Parent und Child Theme Konzept ====================================================== 26 Nov. 2019 [![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png)](https://nitsantech.de/blog/autor/sven-thelemann) [Sven Thelemann](https://nitsantech.de/blog/autor/sven-thelemann) [ TYPO3 CMS ](https://nitsantech.de/categories/typo3-cms) TYPO3 hat keine gemeinsamen Standards, um ein Thema oder eine Vorlage für die Website zu erstellen. Mit dem Parent- und Child-Theme-Konzept besteht die Möglichkeit, das Backend-Theme-Manager-Modul zu gestalten, da jedes Theme in einem gemeinsamen Rahmen und nach gemeinsamen Standards entwickelt wird. ![Einführung in das TYPO3 Parent und Child Theme Konzept](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/Einf%C3%BChrung_in_das_TYPO3_Parent_und_Child_Theme_Konzept_.jpg) Table of content Auf den letzten TYPO3 Entwicklertagen 2019 in Karshure hatte ich die Gelegenheit, meinen Vortrag über das Konzept "Essential Solutions for TYPO3 Productivity" zu halten. Erfreulicherweise bekam ich gutes Feedback und Anerkennung von dem netten TYPO3-Publikum, insbesondere für das TYPO3 Parent/Child Theme Framework. Sie können sich ein Video ansehen unter [https://youtu.be/EiIKz-wK6z8?t=920](https://www.youtube.com/watch?t=920&v=EiIKz-wK6z8&feature=youtu.be). In diesem Blog möchte ich Ihnen einen Einblick in das Konzept der übergeordneten Themenhierarchie und Wiederholung in TYPO3 geben. Viel Spaß beim Lesen :) ![ TYPO3 braucht Backend Theme Manager](https://nitsantech.de/fileadmin/_processed_/e/c/csm_parent_child_TYPO3_theme__14__db4d73855e.png " TYPO3 braucht Backend Theme Manager") Wir sind der Meinung, dass das TYPO3 Basis- und Child-Theme-Konzept in der Lage sein wird, die Zukunft des TYPO3 CMS - insbesondere auf dem Theme-Markt - mitzugestalten. Denn eines der wichtigsten Dinge, die in TYPO3 fehlen, ist "Backend: Plug-n-play Theme Manager". IMHO: Um einen guten CMS-Marktanteil zu bekommen, sollte die TYPO3-Community diesen so schnell wie möglich implementieren. Mit dieser Tatsache hat TYPO3 keine gemeinsamen Standards, um ein Template oder [Theme für die Website zu TYPO3 erstellen](https://nitsantech.de/blog/typo3-templates). Mit dem Parent- und Child-Theme-Konzept gibt es Möglichkeiten, das Backend-Theme-Manager-Modul zu gestalten, da jedes Theme in einem gemeinsamen Rahmen und Standard entwickelt wird. Und... Das ist unser Traum für die Zukunft! Haben Sie schon einmal vom Konzept des übergeordneten Themas und des untergeordneten Themas in CMS gehört? Viele CMS haben solche Grundlagen, um Themen und Vorlagen für eine bessere Produktivität, Qualität, Produktivität und schnellere Entwicklung zu erstellen. ### Übergeordnetes Thema enthält globale Konfiguration - Nützlich in allen Projekten - Globale TypoScript-Konstante & Einrichtung - Globale Konfiguration zur einfachen Erstellung benutzerdefinierter Elemente - Globale TYPO3-Erweiterungen ### Child-Theme enthält benutzerdefinierte Konfiguration - In einem bestimmten Projekt verwendet - TypoScript-Konstante & Einrichtung - Benutzerdefinierte Inhaltselemente - Spezifische TYPO3-Erweiterungen ### Was ist das Wichtigste? - Folgt den TYPO3-Kernstandards - Spart Energie, Zeit und Geld - Problemlose zukünftige TYPO3-Upgrades Deshalb hat sich unser Team NITSAN entschlossen, ein solches Theme-Konzept in [**TYPO3 CMS**](https://nitsantech.de/blog/typo3-perfect-cms-for-everyone) zu implementieren. Wir haben eine TYPO3-Erweiterung entwickelt und ihr den Namen ns\_basetheme gegeben. ### Wo finden Sie das Basis-Thema? - **TER:** [https://extensions.typo3.org/extension/ns\_basetheme](https://extensions.typo3.org/extension/ns_basetheme) - **Composer:** ### Wo finden Sie das Kinderthema? - **Composer:** ### Merkmale Wir haben uns überlegt, die folgenden Funktionen in das Basisthema zu implementieren: - Vorkonfigurierte allgemeine Konfiguration (einschließlich Basis-Typoskript, Fluid usw.) - Vorkonfiguriertes Bootstrap-Theme (Standard-Theme) - Vorkonfiguriertes Routing (config.yaml) - Vorkonfigurierter Seitenbaum (automatischer Import des Seitenbaums) - Vorkonfigurierte Linktypen (php, typoscript, yaml etc) - Vorkonfigurierte Composer-Unterstützung - Vorkonfigurierte Formulare (Kern EXT:form) - Vorkonfigurierter Rich-Editor (core EXT:ckeditor) - Vorkonfiguriertes Backend Typoscript (PageTSConfig) - Vorkonfigurierte DataProcessing und Hooks (PHP-APIs) - Vorkonfigurierte, intelligent entwickelte benutzerdefinierte Elemente (im Child-Theme) ### Architektur von EXT:ns\_basetheme Für das Basis-Thema haben wir uns überlegt, alle gängigen Standardkonfigurationen zu konfigurieren. ![Architektur von EXT:ns_basetheme ](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__1_.png "Architektur von EXT:ns_basetheme ") Das Child-Theme ist das eigentliche Theme, in dem die Einrichtung Ihrer [**TYPO3 website**](https://nitsantech.de/blog/typo3-website) stattfinden würde. Das Child-Theme wird durch Erweiterung des Parent-Theme entwickelt, um alle vorkonfigurierten Einstellungen wiederzuverwenden. ### Architecture of EXT:ns\_theme\_child Im Child-Theme haben wir alle speziell verwendeten Konfigurationen für Ihre spezielle TYPO3-Site berücksichtigt. ![[Translate to German:] Architecture of EXT:ns_theme_child](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__2_.png "[Translate to German:] Architecture of EXT:ns_theme_child") ### Praxis-Demo von TYPO3 Parent & Child Theme Um es besser zu verstehen, lassen Sie uns eine praktische Demo mit Einrichtung und Konfiguration einer TYPO3-Site machen ;) Für eine schnelle Demo verwenden wir eine der beliebten DDEV- und Composer-basierten TYPO3-Instanzen. ### **Sauberer Blog: Theme-Beispiel** Unser Ziel ist es, eines der bekannten [TYPO3 Clean-Blog-Themes](https://extensions.typo3.org/extension/ns_theme_cleanblog) schnell zu installieren und zu konfigurieren. - Demo: [https://demo.t3planet.com/t3t-cleanblog/](https://demo.t3planet.de/t3-cleanblog/) - TER: [https://extensions.typo3.org/extension/ns\_theme\_cleanblog](https://extensions.typo3.org/extension/ns_theme_cleanblog) - Git: [https://github.com/nitsan-technologies/ns\_theme\_cleanblog/](https://github.com/nitsan-technologies/ns_theme_cleanblog/) - Composer: - Pro-support: [https://t3planet.de/free-templates/t3-clean-blog](https://t3planet.de/en/t3-clean-blog-free-typo3-template) ![[Translate to German:] Clean Blog: Theme Sample](https://nitsantech.de/fileadmin/_processed_/b/2/csm_parent_child_TYPO3_theme__3__2e67a7061d.png "[Translate to German:] Clean Blog: Theme Sample") ### **Installieren Sie EXT:ns\_basetheme** Sobald Sie alle oben genannten Schritte durchgeführt haben, können Sie das saubere Bootstrap-Theme als Standardthema von EXT:ns\_basetheme sehen. ![[Translate to German:] Install EXT:ns_basetheme](https://nitsantech.de/fileadmin/_processed_/9/1/csm_parent_child_TYPO3_theme__4__b0bc6fd9a9.png "[Translate to German:] Install EXT:ns_basetheme") **Schritt 1:** Erstellen eines Projektordners mkdir t3-demo cd t3-demo **Schritt 2:** PHP-Version konfigurieren ddev config --project-type php --php-version 7.2 **Schritt 3:** Neueste TYPO3-Version einrichten ddev composer create "typo3/cms-base-distribution:^9" --no-interaction --prefer-dist ddev config --project-type typo3 ddev start **Schritt 4:** ns-basetheme installieren ddev composer require nitsan/ns-basetheme **Schritt 5:** Einrichten der Site-URL Go to Sites > ns\_basetheme > Change Entry Point with your site-URL. ![Install EXT:ns_basetheme](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__5_.png "Install EXT:ns_basetheme") ### **EXT:ns\_theme\_cleanblog installieren & konfigurieren** **Schritt 1:** TYPO3 Child-Theme herunterladen ddev composer require nitsan/ns-theme-cleanblog ![[Translate to German:] Install & Configure EXT:ns_theme_cleanblog](https://nitsantech.de/fileadmin/_processed_/0/2/csm_parent_child_TYPO3_theme__6__302dbeeca0.png "[Translate to German:] Install & Configure EXT:ns_theme_cleanblog") **Schritt 2:** Erledigt! Sie müssen keine weiteren Schritte durchführen. Der Seitenbaum im Backend wird automatisch erstellt und alle Konfigurationen des Child-Clean-Blog-Themes sind konfiguriert und bereit zum Start! ![[Translate to German:] Theme ready to launch](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__7_.png "[Translate to German:] Theme ready to launch") Eine weitere interessante Sache, die ich mit Ihnen teilen möchte: Stellen Sie sich vor, wenn Sie ein "custom-element" mit dem TYPO3-Kern erstellen wollen, dann müssen Sie die folgenden Schritte ausführen. - CType-Definition einleiten (mit tt\_content\_defValues.CType) - Backend-Konfiguration mit Flexform vorbereiten (mit tt\_content\_defValues.CType) - CType bei PageTS Config hinzufügen (mit mod.wizards.newContentElement.wizardItems.extra) - [**TypoScript**](https://nitsantech.de/typoscript-conditions-with-symfony-expression-language) vorbereiten (mit Elementname = FLUIDTEMPLATE) - In TypoScript Setup einfügen (mit tt\_content.elementname) - Icon registrieren (mit IconRegistry::class) - Setup /Configuration/TCA/Overrides/tt\_content.php (mit addTcaSelectItem) - Rendering durch Ihre Fluid-Vorlage - Und so weiter.., ABER um es einfacher und schneller zu machen, haben wir in unserem EXT:ns\_basetheme clevere Techniken entwickelt, um mit folgenden Schritten in Ihrem Child-Theme EXT:ns\_theme\_name schnell Custom-Elemente zu entwickeln. **Schritt 1**: Erstellen Sie ns\_\*.xml unter /Konfiguration/Flexform/ ![[Translate to German:] Custom element configuration](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__8_.png "[Translate to German:] Custom element configuration") **Schritt 2**: Erstellen Sie ns\_\*.html unter /Resources/Private/ ![[Translate to German:] Custom element configuration ](https://nitsantech.de/fileadmin/_processed_/4/7/csm_parent_child_TYPO3_theme__9__aab2141d37.png "[Translate to German:] Custom element configuration ") **Schritt 3**: Erledigt! Keine weiteren Schritte ;) ![Konfiguration abgeschlossen](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__10_.png "Konfiguration abgeschlossen") Warten Sie... Möchten Sie eine coole Backend-Vorschau haben? ![ Back end preview](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__11_.png "Back end preview") **Schritt 4**: Erstellen Sie Ns\*.html unter /Resources/Private/Backend/ ![ Einrichtung der Ressourcendatei](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__12_.png " Einrichtung der Ressourcendatei") Unser Lieblingsmerkmal ist, dass zukünftige [**TYPO3 Upgrade**](https://nitsantech.de/typo3-upgrade) Versionen einfach und problemlos möglich sind. Schauen Sie sich den folgenden Screenshot an. Das Child-Theme hat keine einzige PHP-Datei, so dass es keine veralteten und fehlerhaften Änderungen mehr gibt. Wann immer eine neue TYPO3-Version veröffentlicht wird, müssen wir nur die Änderungen und Verwerfungen von ns\_basetheme beheben und ns\_basetheme in allen TYPO3-Instanzen aktualisieren, um das Theme mit der neuesten TYPO3-Version kompatibel zu machen. Ist das cool, hm? ![ Ein Upgrade für alle TYPO3-Projekte](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/live/Parent_Child_Theme_concept/parent_child_TYPO3_theme__13_.png " Ein Upgrade für alle TYPO3-Projekte") Wir würden uns sehr über Ihr Feedback und Ihre Anregungen freuen, um dieses spannende Parent- und Child-Theme-Konzept weiter zu verbessern und TYPO3-Sites produktiv zu entwickeln. Basierend auf Ihrem Feedback werden wir gerne weitere vertiefende Blog-Serien über das Konzept des TYPO3 Parent- und Child-Theme schreiben. Viel Spaß beim TYPO3 Theming! #### Ansprechpartner für Internetagentur und TYPO3 Projekte #### Sven Thelemann Servicepartner - Deutschland [ st@nitsantech.de ](mailto:st@nitsantech.de) [ +49 351 48196661 ](tel:4935148196661) ![Sven Thelemann](/fileadmin/ns_theme_nitsan/CTA/SVEN__1_.png "Sven Thelemann") ![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png) ### Sven Thelemann Client Service Lead - [](https://www.linkedin.com/in/sven-thelemann-0a30867b/ "linkedin") Sven Thelemann ist Client Service Lead bei NITSAN und konzentriert sich auf die Bereitstellung von TYPO3 Lösungen, die den Kundenzielen entsprechen. Mit seinem ausgeprägten Verständnis für Technologie und Kundenerwartungen sorgt er für eine reibungslose Kommunikation und Projektabwicklung. Außerhalb der Arbeit fährt Sven Thelemann gerne Fahrrad und experimentiert mit selbstgemachten Rezepten. Kommentare und Antworten ------------------------ Danke für deinen Kommentar. Ihr Kommentar wurde erfolgreich hinzugefügt. Danke für deinen Kommentar. Dein Kommentar wird nach der Überprüfung sichtbar. Oops! Something went wrong, please try again later. ##### **Sei der erste der kommentiert** ### Verwandte Blogs [ ![](https://nitsantech.de/data:,) #### TYPO3 CMS für Öffentlichen Sektor Websites: Bewährte Verfahren ](https://nitsantech.de/blog/typo3-oeffentlicher-sektor-deutschland-2026) [ ![](https://nitsantech.de/data:,) #### TYPO3 SEO: Verbessern Sie das Ranking Ihrer TYPO3-Website ](https://nitsantech.de/blog/typo3-seo)