[Wanted] Official TYPO3 Templates Builder Since 20 Years!

Published on :  
Sanjay Chauhan
Templates

TYPO3 is truly an amazing OpenSource CMS with more than 9998+ backend features, no other CMS have such numerous features in their CMS-core. Feeling truly proud of the TYPO3 Community. BUT, one thing is missing, the official and common way to develop the TYPO3 templates builder system. Let’s discuss and dream about it!

[Wanted] Official TYPO3 Templates Builder Since 20 Years!

TYPO3 is truly an amazing OpenSource CMS with more than 9998+ backend features, no other CMS have such numerous features in their CMS-core. Feeling proud of the TYPO3 Community. BUT, one thing is missing, the official and common way to develop the TYPO3 Templates Builder system. Let’s discuss and dream about it!

At last TYPO3 developer days 2019 at Karlsruhe, Germany, I got a chance to deliver a talk on this topic regarding how can we make the TYPO3 Templates Management System.

Fortunately, I got good feedback and appreciation from the lovely TYPO3 audience, especially for the Parent/Child TYPO3 Templates Framework.

Checkout slides at Ideal TYPO3 Templates Manager also you can Watch Video Session too.

Surprisingly, we found more people are interested in TYPO3 templates, Checkout below analytics report of T3Planet.

analytics report of T3Planet

T3Planet's Marketplace have premium TYPO3 templates, so our team is working hard to provide best quality of TYPO3 templates for best usability to end-customers with robust technical solution.

Take a cup of coffee, Let’s start the brainstorming of TYPO3 templating!

Table of Contents

Is TYPO3 Feature-rich CMS without the Templates Builder Module?

Is TYPO3 Feature-rich CMS without the Templates Builder Module?

Source

At last T3DD19, at Key-notes Benni Mack said: TYPO3 is almost feature-rich CMS. I respect Benni for his epic work in the TYPO3 Community, not would like to criticize.

But, One thing has always been on my mind, One of the biggest feature TYPO3 Templates Builder Module is still missing, so IMHO TYPO3 is still not feature-rich yet ;)

Unfortunately, even after 20 years in the history of TYPO3, we don’t have official and common standards for the TYPO3 Templates or Theme Builder.

IMHO, We should try to outline the common and global standards to develop any TYPO3 project’s templates, content elements, etc.

The world’s most popular CMS considered having such basic template management backend tools since their initiation of CMS eg., WordPress, Joomla, etc. Because templates are one of the parts of any CMS. Check out how people like Templates for TYPO3 CMS.

Did you remember TemplaVoila pandemic? Lots of TYPO3 instances was not able to update due to the lack of compatibility. (of course, we respect whatever given best by TemplaVoila guys to the community).

And, Why is such basic TYPO3 Templates Management missing? What do you think?

Because, Since the beginning of the TYPO3 core and community, people have not thought more of TYPO3 templates, and more focus on other important features like rich content, user access, and roles, workspaces, install tool etc., And that’s completely fine, but now it’s time to make it happen.

Please don’t get me wrong, I’m not saying nothing has been developed for TYPO3 templates development. There are cool things like Backend layouts, Can add custom content elements, etc.,

My major concern, TYPO3 does not have a common templating method, configuration, and code structure, smoother automatic page tree import etc., We can try to centralize everything and make it simple for TYPO3 integrators and developers to avoid dependencies of third-party TYPO3 extensions.

And, maybe someday, we will have a separate dedicated TYPO3 backend module called “Template Manager” :)

Is TYPO3 only for Enterprise-Level Websites?

Is TYPO3 only for Enterprise-Level Websites?

Source

Is TYPO3 “only” for Enterprise-level Websites? What’s your thought?

Nope!

When it comes to Market share, there are always debates about CMS-level. TYPO3 is mostly promoted as “Enterprise Level CMS”. And such enterprise-level CMS doesn’t require such templating stuff ;)

Think about this, a CMS like WordPress-core does not have the full potential to create an enterprise-level website BUT mostly using 3rd party solutions they did it well for Enterprise to Fortune 500 companies.

Then, Why TYPO3 as an Enterprise level CMS can not do Small to Medium level websites? Yes, it can be achieved without any doubts.

It’s time, TYPO3 should take a good piece of CMS Marketshare, and moreover, TYPO3 holds the extreme potential.

TYPO3 is a great OpenSource CMS, there are good opportunities to spread it for Small to Medium to Enterprise level websites.

Explore TYPO3 CMS Market Research

What are some most popular TYPO3 Templates Builders?

Many TYPO3 enthusiastic people worked very hard and developed ways to create TYPO3 templates, custom or flexible content elements, etc., We really appreciate all of their dedicated work to the TYPO3 community.

Here is the list of popular TYPO3 templates methods.

Gridelements

Team Gridelements developed cool drag-n-drop grids, This extension integrates the grid layout concept also to regular content elements - the grid elements. It offers a lot of new features like advanced drag & drop or real references, that improve the usability of the page and list module to speed up the daily work with the backend.

FluidTYPO3.org

Claus Due, The TYPO3 Fluid man developed and maintaining, Fluid Powered TYPO3 is a family of TYPO3 extensions designed to boost productivity and flexibility when creating CMS templates.

Mask

Gernot Ploiner, The TYPO3 Mask man, Create your own content elements and page templates. Easy to use, even without programming skills because of the comfortable drag and drop system. Stored in structured database tables. Style your frontend with Fluid tags. Ideal, if you want to switch from Templavoila.

DCE

Armin Vieweg, One of the great TYPO3 contributor developed DCE, Best Flexform based content elements since 2012. With the TCA mapping feature, simple backend view, and many more features which makes it super easy to create own content element types.

Bootstrap Package

Benjamin the TYPO3 man developed Bootstrap Package, To deliver a fully configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

There are other third-party TYPO3 extensions, You can explore at TER.

Which one is your favorite TYPO3 templating ways? and why? Write down the comment section below, I'll be happy to know about it.

2016: TYPO3 Poll on Templating Method

2016: TYPO3 Poll on Templating Method

Explore https://www.facebook.com/groups/typo3/permalink/1194001313981188/

2020: TYPO3 Poll on Ways of TYPO3 Templates

2020 TYPO3 Poll on Ways of TYPO3 Templates

Explore https://www.facebook.com/groups/typo3/permalink/3180686458645987/

From the above TYPO3 survey, you can see how many variances of TYPO3 Templates are in use.

You can visualize there are too many TYPO3 templating methods that have been used for individual choice (and of course based on their needs and flexibility of people).

In both surveys, One thing is clear that more people choosed, Pure TYPO3 Extbase/Fluid, People really liked to go with TYPO3 core-ways without depending on third-party TYPO3 extensions.

Read more at Best Practice for TYPO3 Templates Integration.

Why TYPO3 Templates Management Needs?

As a TYPO3 Marketer,
The simple answer is to get a better piece of CMS Marketshare which TYPO3 deserves for a long time, by developing and publishing premium products at TYPO3 Marketplace.

As a TYPO3 Developer or Integrator,
If we get the official defined way to develop TYPO3 templates, The best answer is to have a common TYPO3 templating method in all TYPO3 projects. In that way, we can have hassle-free future TYPO3 updates, don’t need to depend on third-party TYPO3 extensions, common coding standards, easy to maintain and benefits list go on!

If you analyze the growth of most popular CMS, they have large scale marketplace available with ready-made templates (aka called themes).

Let’s have a quick study of WordPress because most of the TYPO3 migrated to WordPress.

IMHO, WordPress grows well not because of their CMS-core, but due to having a strong Eco-system.

WordPress has hundreds and thousands of stores, marketplaces, themes and templates, plugins, hosting, SaaS, services providers, etc.

Quick WordPress Facts

  • More than $143 Billion: Annual WordPress Building Market Size.
  • Imagine this, Avada Only one WordPress template has earned over 12 million dollars in sales.

Marketplace References

The marketing team of T3Planet analyzed many existing popular platforms like

  • WordPress ThemeForest Envato Store
  • Magento Official Marketplace
  • Web Creative Marketplace
  • And so on.,

By d way, T3Planet initiative’s goal is to build a better TYPO3 eco-system platform so people can develop and publish their free and premium TYPO3 Templates and TYPO3 Extensions by share, earn, and care philosophy.

Proof of Concept: Parent and Child TYPO3 Templates

Proof of Concept: Parent and Child TYPO3 Templates

Team T3Planet one of the focus to provide the best quality and standards of TYPO3 Templates. For years, We are working very hard to make a better TYPO3 templating method.

One of the biggest challenges was to create a TYPO3 templating method with keep in touch with the TYPO3 core to make sure the future easily updates.

Before We Start, I want to Confess!
I’m going to explain, How we develop the TYPO3 Template for T3Planet, to give deliver the best quality and standard templates to our customers. I’m not claiming, this is the only best way, but it will try to draw that - We can achieve such a templates builder in TYPO3. There are a number of ways to make it happen.

Have you heard about parent and child templates in any other CMS? Basically, such architecture design to have common templates standards, quality, and productivity.

Theory of Two TYPO3 Extensions

We have used the TYPO3 Extensions concept because in TYPO3 we do not have any special things for the TYPO3.

Extension 1. Base Template Extension (EXT:ns_basetheme)

Extension 2. Child Template Extension (EXT:ns_theme_name)

What’s TYPO3 Base Template?

The base template extension contains common for all your TYPO3 websites, and technical configuration to easily create custom and flexible TYPO3 content elements.

What’s the TYPO3 Child Template?

Whereas, the child template extension is the customization of your templates, layouts, and content elements based on your needs.

And, What most we take care to design Template framework?

The most important is, we have followed only TYPO3-core without writing single custom code to Hassle-free future TYPO3 updates, I’ll explain later in this article.
We have released both TYPO3 extensions with OpenSource GPL licenses, Feel free to try and use in your TYPO3 projects.

Everything well Pre-configured in EXT:ns_basetheme

  • Global and common configuration of TypoScript, Fluid, etc.,
  • Bootstrap theme - as a default TYPO3 theme
  • Custom Backend Module  - aka called “Theme Options”
  • Automatically import routing features /sites/ns_basetheme/config.yaml
  • Automatically import page tree while installing child extension
  • Pre-compiled lints of PHP, TypoScript, YAML, etc.
  • Composer support
  • Sample configured forms using core EXT:form
  • Common and useful rich editor configuration with core EXT:ckeditor
  • Structured Directories and Files
  • Include common TypoScript like PageTSConfig, Constant, Setup etc.,
  • DataProcessing and Hooks (TYPO3 APIs)
  • Easy way to developed custom elements
  • And many other features!

Why TYPO3 Templates From T3Planet?

Stable Version
TYPO3 Templates designed, developed and well-tested with Stable version

Pre-Configured
Ready to go live templates comes with pre-built design, content, and extensions to go live in minutes

Flexible Backend Management
Editor-friendly TYPO3 backend usability to easily manage pages and content

Future Upgradable
Guaranteed compatibility with new TYPO3 versions followed by lifetime updates by T3Planet

Optimized and Extendable
Packed with industrial standard optimized code for smoother performance and future template scalability

Fast, Lightweight & Powerful
The template is flexible and adaptive providing a smoother user experience

SEO Cares
Maintained best practice SEO standards like meta-data, sitemap, robots, social-media, setup GA, etc.

Followed TYPO3 Core Standards
Developed using the latest coding techniques & following strict TYPO3 coding guidelines.

Speed and Performance
The TYPO3 Templates are  well-optimized for Speed and Performance by getting highest rank on GTMetrix

The Architecture of TYPO3 Templates

EXT:ns_basetheme

EXT:ns_basetheme

EXT:ns_theme_name

EXT:ns_theme_name

Live-Demo of Parent and Child TYPO3 Templates

To give you a better idea, how everything works well, Let’s try the practical demo to install, configure, and use these TYPO3 Templates using the following setup.

  • A famous local environment with Docker and DDEV
  • Composer-based Setup
  • Templates Installation, Configuration, and Customization

T3 Agency: TYPO3 Theme Sample

TYPO3 Agency is one of our most downloaded TYPO3 templates.

T3 Agency: TYPO3 Theme Sample

Note: If you want to install TYPO3 Template for your non-composer based TYPO3 instance, then follow the step from our official TYPO3 Templates Documentation.

Step 1. Create your Project’s folder

mkdir t3-agency
cd t3-agency

Step 2. Define your PHP version configuration

ddev config --project-type php --php-version 7.2

Step 3. Setup latest TYPO3 version

ddev composer create "typo3/cms-base-distribution:^10" --no-interaction --prefer-dist
ddev config --project-type typo3
ddev start

Step 4. Install Base TYPO3 Templates

ddev composer require nitsan/ns-basetheme

Step 5. Configure your site URL

Go to Sites > ns_basetheme > Change Entry Point with your site-URL

Configure your site URL

Step 6. Download Child TYPO3 Templates

ddev composer require nitsan/ns-theme-agency
Download Child TYPO3 Templates

Step 7. TYPO3 Theme Options

You can easily configure header, footer, SEO, styles, etc., from NITSAN > Theme Options Backend Module.

TYPO3 Theme Options

Step 8. Done! The extension will automatically import the page tree, create a routing config.yaml, etc.,

automatically import the page tree, create a routing config.yaml, etc

Are you feeling hectic to create Custom or Flexible Content Element?

Did you know?

You will need to perform ~10 steps to just create a flexible or custom content element.

Step 1. Initiate CType Definition (with tt_content_defValues.CType)

Step 2. Prepare backend configuration with Flexform (with tt_content_defValues.CType)

Step 3. Add CType at PageTS Config (with mod.wizards.newContentElement.wizardItems.extra)

Step 4. Prepare TypoScript (with elementname = FLUIDTEMPLATE)

Step 5. Add into TypoScript Setup (with tt_content.elementname)

Step 6. Register Icon (with IconRegistry::class)

Step 7. Setup /Configuration/TCA/Overrides/tt_content.php (with addTcaSelectItem)

Step 8. Render through your Fluid Template

Did I miss any steps? BUT, who cares! In EXT:ns_basetheme, we have smartly developed techniques to automatically develop custom TYPO3 content elements with the following steps in your child-theme EXT:ns_theme_name.
 

Step 1: For Backend form, Create /Configuration/Flexform/ns_elementname.xml

<T3DataStructure>
   <sheets>
       <sDEF>
           <ROOT>
               <TCEforms>
                   <sheetTitle>Fields</sheetTitle>
               </TCEforms>
               <type>array</type>
               <el>
                   <title>
                       <TCEforms>
                           <label>LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_flex.xlf:general.title</label>
                           <config>
                               <type>input</type>
                               <size>30</size>
                               <eval>trim,required</eval>
                           </config>
                       </TCEforms>
                   </title>
                   <subtitle>
                       <TCEforms>
                           <label>LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_flex.xlf:general.subtitle</label>
                           <config>
                               <type>input</type>
                               <size>30</size>
                               <eval>trim</eval>
                           </config>
                       </TCEforms>
                   </subtitle>
               </el>
           </ROOT>
       </sDEF>
   </sheets>
</T3DataStructure>

Step 2: To Frontend renders, Create /Resources/Private/ns_elementname.html, and Done!

<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <div class="container">
       <div class="intro-text">
           <f:if condition="{content.title}"><div class="intro-lead-in">{content.title}</div></f:if>
           <f:if condition="{content.subtitle}"><div class="intro-heading text-uppercase">{content.subtitle}</div></f:if>
       </div>
   </div> 
</html>
To Frontend renders, Create /Resources/Private/ns_elementname.html, and Done

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

Step 3: Create NsElementname.html at /Resources/Private/Backend/

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
   <h2><f:translate key="LLL:EXT:ns_theme_agency/Resources/Private/Language/locallang_db.xlf:wizard.ns_banner"/></h2>
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <f:if condition="{flexformData.title}"><h3>{flexformData.title}</h3></f:if>
               <f:if condition="{flexformData.subtitle}"><h4>{flexformData.subtitle}</h4></f:if>
           </div>
       </div>
   </div>
</html>
Create NsElementname.html at /Resources/Private/Backend/

A single Upgrade for all your TYPO3 projects

Probably the greatest advantage of issue free and automated future TYPO3 upgrade versions. Look at the screenshot, the child TYPO3 theme doesn't have even a single PHP document so there are no-more deprecations and breaking changes.

Now whenever a new TYPO3 version is released, we simply need to determine ns_basetheme's breaking changes and deprecation, and simply upgrade ns_basetheme at all your TYPO3 instances to make them compatible with the newest TYPO3 version. That's cool, isn't it?

A single Upgrade for all your TYPO3 projects

So What’s Next in TYPO3 Templates?

Cross-your finger, Team T3Planet dreams to create a dedicated TYPO3 Templates Builder backend module. To easily install, activate, configure multiple TYPO3 templates. Hoping to make it happen in the upcoming months.

Summing-up!

Thanks for reading.

Let’s quickly recap with a quick conclusion.

  • Understand the importance of common TYPO3 templating method
  • Would be awesome if TYPO3 Community team will finalize vision of TYPO3 Templates Builder
  • Presented the idea of base and child TYPO3 Templates
  • Try our step-by-step guide for such a TYPO3 templating method.

What do you think about the above idea? What’s your favorite TYPO3 templates method? Do you have any better ideas to make a good TYPO3 Templates module? I would love to receive your feedback, questions, or issues to below comment box.

 

Have a Happy TYPO3 Templating!

Would you prefer a Ready-made template(s) or a Custom one for TYPO3?

  • 500+ Developed custom TYPO3 templates
  • 90+ Score on TYPO3 SEO, speed & accessibility
  • 50+ Published free & premium TYPO3 templates
  • 13+ Years of TYPO3 experience
  • 5+ Bestseller TYPO3 templates (T3Karma, T3Bootstrap etc.)
TYPO3 Template GIG
template
Sanjay Chauhan

Sanjay Chauhan

CTO at T3Planet & NITSAN

Sanjay Chauhan, Co-Founder of NITSAN (Award winning TYPO3 agency) and Pioneer of T3Planet (first-ever TYPO3 Store).

A true TYPO3 fanatic since 2010. I bring strong TYPO3 experience in building customer-business…

More From Author

Previous Article
10 Resources for Learn TYPO3 Composer
Next Article
Your Monthly TYPO3 Maintenance Checklist

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh
  • user
    Steinecker 2020-12-08 at 1:48 pm
    Excellent article, I will try it with Sven Wapplers product.
  • user
    Jaume Presas 2020-10-27 at 7:22 pm
    I wonder why you didn't mention Flux, which allows you to create templates and content elements with pure Fluid, no need of TypoScript or php.
    • user
      Sanjay Chauhan 2020-10-28 at 6:18 am
      hey Jaume,

      Your flux wish already there in FluidTYPO3.org because Claus Due (the Fluid man) maintaining everything at https://fluidtypo3.org/

      Cheers,
      Sanjay
      • user
        Jaume Presas 2020-10-28 at 10:26 am
        You are right. It's just that I could not find the word Flux anywhere, I see it now in the screenshot.
  • user
    Phillipp Rothschild 2020-07-10 at 2:51 pm
    T3Planet has been a great initiative for TYPO3 templates to be available. I appreciate the efforts. Moreover thanks for the free TYPO3 templates. Cheers
    • user
      Sanjay 2020-07-10 at 3:08 pm
      Thanks, Phillipp Rothschild, I am glad you liked it!
  • user
    Lukas Schwarzenbacher 2020-07-06 at 11:44 am
    I think TYPO3 is a very good enterprise level system. Especially for the smaller clients we should have a common way to build templates. I like the Bootstrap Package because I can install one extension and I have everything I need in one extension. There is a fotogallery, a "click to enlarge" option for images, there are backend layouts well connected to a frontent layout and many many more. Every client wants a individual layout. Because of this I installed a second extension kickstarted by the site package builder. The second extension overwrites the first one, if I want to change something. Now I have the parent child system like you mentioned it, and this is really really awesome. For individual content elements I work with DCE, because it is very easy to use. Today, my world is in peace. But, there is always that little fear, that one of this extensions one day will be outdatet. To me, there are five benefits of a common way of templating: 1. It is easier to learn how to template 2. Employees can switch better between projects 3. More safety, that you can easily update your projects 4. It is easier to get help, because the knowledge in the TYPO3 universe is not divided in different ways of templating 5. More focus on the indivual customer needs, because the basics are already there In addition to this, I think there is too much you have to learn before you can start your first TYPO3 site. You write about market share. I think it is hard to get new TYPO3 enthusiasts and new small clients, when there is that much to learn for the first project. TYPO3 9 was a big step forward to a CMS which is easier to use (Sitehandling, SEO ect.). Now we should make the same step with templating ???? And I think it is very important to have the T3Planet with templates to buy ????
    • user
      Sanjay Chauhan 2020-10-28 at 6:21 am
      hey Lukas,

      I appreciate your such valuable feedback. As we already talked in-depth things via email conversation. Hopefully, in nearer future, we will have dedicated core TYPO3 templating manager. Indeed, your thoughts are really important to grow TYPO3 Opensource Eco-system.

      Cheers,
      Sanjay

You May Also Like

Celebrating 4 Years of T3Karma

Celebrating 4 years of T3Karma

Sophia Muller
Templates
T3Karma - TYPO3 Template Success story Celebration

Success Story of T3Karma - TYPO3 Template

Sanjay Chauhan
Templates
Templates
Building Website Using T3Rama

Building a Powerful Website from Scratch with T3 RAMA TYPO3 Template

Sanjay Chauhan
Templates
Templates