Template Parts

info

Template Parts available in PRO version only.

Template Parts management

1. Add new template part.
2. A template part name (click on the text to start editing, click outside to end editing the text).
3. The link to edit template part page (shown on hover over the row item; allows entering the builder mode).
4. Open meta info about the template part.
5. Sort order.
6. Apply rules: the blue button below opens a query builder for setting conditional rules for each template part, determining which pages will use this template part.
7. Save changes. The Grey color of the button indicates no changes; the green color indicates that some changes are made and can be saved.
8. Cancel changes. Similar to the Save button, its color indicates whether there are unsaved changes or not. This button cancels all the changes made for the specific template part.
9. Delete the template part.

Setting up a template part

Adding a new template part

In order to create a new template part we go to Template Parts page (1), then click on "Add new" button (2).

This will open a modal window with a two-step form wizard:

1. Add a name
2. Choose a desired type of the new template part
3. "Type" field is the one where you can choose an existing type or create a new one

Template type defines a place where this template part will be shown. Think of this like an area or placeholder name where each specific template part will be displayed. More on this in the next topic on this page.

The next step is dedicated to Apply rules - the conditions for displaying the template part for specific pages:

All apply rules are organized by groups. The first group - template hierarchy is a required to be filled in. Other group are optional. Many groups have starters for a fast and easy selection of apply rules.

1. Template hierarchy group
2. Starters dropdown

After the "Apply rules" are defined, click on "CREATE TEMPLATE PART" button.

Using template parts in templates

caution

It is not possible to use template part in another template part!

There are several rules/notes about teh usage of template parts:

1. Template parts might be used only in templates.
2. We can use as many as we want template parts within a single template.
3. We can use the same template part more than once within a single template.
4. It is not possible to edit template part's modules from the template's builder mode

In order to add a template part to the template we have to use Template Part module:

Template Part module looks a bit different in the structure, it has its own background color to be easily spotted:

Template Part module has just two settings:

1. Template part type
2. Rendering condition

The most important one is Template Part Type where we should choose a specific type of template parts, so that one of template parts assigned to this type will be displayed in place of Template Part module.

note

It is not possible to directly choose and display SPECIFIC template part by its name!

This is an important to know that it is not possible to choose a specific template part by defining its name or some ID. There are three properties which impact which template part exactly will be shown in place of Template Part module:

1. type
2. priority
3. apply rules

Having such system enables tremendous flexibility! Of course, it is always possible to make it "dead simple" and use one type per each template part and choose "Entire site" as its apply rules. This way we make sure that specific template part will be shown based on the type defined. However, very often happens much more complex scenarios, like using the same template for posts and pages, but one has to display "Header A" for posts and "Header B" for pages. How? Easy: we would use the same template part type "header" for two different template parts. The actual type name does not matter; what matters is that we use the same type for both these template parts, so we can choose it inside our template in Template Part module, and then set apply rules like "for all posts" for "Header A" and then set apply rules like "for all pages" for "Header B". That's it! We have just overcome an advanced use case of displaying different headers conditionally!

In the use case mentioned above we have not even touched template part priorities! By using "priority" property, setting it to different values for template with the same or overlapping apply rules and the same type we could achieve even more complex tasks!

Template part modules

The template part can have as many modules as we need, there is no limit for that. Just like for template. There is also no limitation of how many root modules can be added inside the template part. We can have 1 or, for instance, 5 root (main parent) modules and then any number of children.

By using template part inside template we do not add any additional wrapper around modules of the template part. So, for instance, if we have a template part with one root Generic Block module and HTML element tag chosen to "footer", then inside the template where such template part is used we will see that Generic Block module and nothing more around it.

Template part settings and their inheritance

The specifics of template part is that its "Template part settings" do not contain any CSS related settings. There is only "Data settings" tab. Why? Because there is nothing to attach those CSS settings to. We have already mentioned in the previous chapter that there is no additional wrapper added for template part when it is added in the template.

Let's review the existing settings and how they are being inherited by template where template part is used:

1. Responsive strategy.
   Responsive strategy of template part is ignored inside template. Responsive strategy of template will be used instead.

2. Data variables.
   Data variables of template part are not available inside template. They are exclusive for template part and are not being mixed with those from template.

3. JS/CSS libraries.
   The libraries from template part are enqueued automatically also inside template.

4. Custom JS/CSS.
   Both custom JS and CSS are enqueued automatically also inside template.

5. String translations.
   These records are merged with string translation records in template. Basically, the same strings are overwritten by the ones which come from template.