The future TYPO3 Theme Manager | Concept & Architecture

Architecture of EXT:ns_theme_child

In the child-theme, we have considered configuring all specifically used configuration to your particular TYPO3 site.

Practical-demo of TYPO3 parent & child theme

To understand it more, Let’s have one practical demo with setup and configure a TYPO3 site ;) For a quick demo, let’s use one of the popular DDEV and composer-based TYPO3 instance.

Clean Blog: Theme Sample

Let’s have a goal to quickly install and configure one of our famous TYPO3 clean-blog theme.

• Demo: https://demo.t3planet.com/t3-cleanblog/
• TER: https://extensions.typo3.org/extension/ns_theme_cleanblog
• Git: https://github.com/nitsan-technologies/ns_theme_cleanblog/
• Composer: https://packagist.org/packages/nitsan/ns-theme-cleanblog
• Pro-support: https://t3planet.com/t3-clean-blog-free-typo3-template

Install EXT:ns_basetheme

Once you are done with all the above steps, you will be able to see clean bootstrap theme as default theme of EXT:ns_basetheme.

Step 1: Create a project folder
mkdir t3-demo
cd t3-demo

Step 2: Configure PHP version
ddev config --project-type php --php-version 7.2

Step 3: Setup latest TYPO3 version
ddev composer create "typo3/cms-base-distribution:^9" --no-interaction --prefer-dist
ddev config --project-type typo3
ddev start

Step 4: Install ns-basetheme
ddev composer require nitsan/ns-basetheme

Step 5: Setup your site URL
Go to Sites > ns_basetheme > Change Entry Point with your site-URL.

Install & Configure EXT:ns_theme_cleanblog

Step 1: Download TYPO3 child-theme
ddev composer require nitsan/ns-theme-cleanblog

Step 2: Done! You don’t need to perform any other steps. The page tree in backend will automatically create and all-configuration of child clean-blog theme will be configured and ready to launch!

One more interesting thing I would like to share, Imagine, if you want to create “custom-element” using TYPO3 core then you would need to perform the following many-steps.

• Initiate CType Definition (with tt_content_defValues.CType)
• Prepare backend configuration with Flexform (with tt_content_defValues.CType)
• Add CType at PageTS Config (with mod.wizards.newContentElement.wizardItems.extra)
• Prepare TypoScript (with elementname = FLUIDTEMPLATE)
• Add into TypoScript Setup (with tt_content.elementname)
• Register Icon (with IconRegistry::class)
• Setup /Configuration/TCA/Overrides/tt_content.php (with addTcaSelectItem)
• Render through your Fluid Template
• And, so on.,

BUT to make it easier and faster, at our EXT:ns_basetheme, we have smartly developed techniques to quickly develop custom-element with following steps in your child-theme EXT:ns_theme_name.

Step 1: Create ns_*.xml at /Configuration/Flexform/

Step 2: Create ns_*.html at /Resources/Private/

Step 3: Done! No more steps ;)

Wait.. Do you want to have a cool backend preview?

Step 4: Create Ns*.html at /Resources/Private/Backend/

Our favourite feature is to have easiness and hassle-free future TYPO3 upgrade version. Checkout following screenshot, the child theme does not have even a single PHP file so there are no-more deprecation and breaking changes.

Whenever a new TYPO3 version is released, we just need to resolve ns_basetheme’s breaking changes and deprecation, and just upgrade ns_basetheme at all your TYPO3 instance to make theme compatible with TYPO3 latest version. Is it cool, huh?