In our documentation How to Start your WordPress theme development, we evoked the common templates files (single, page, archive, front-page …) and how important it is to master the WordPress template hierarchy and terminology to create a theme which conforms to the WordPress development guidelines.
Not all common template files generate the entire content that will be rendered by the browser. Some template files are pulled in by other template files such as comments.php to handle the comments section, header.php and footer.php, sidebar.php and content-{$slug}.php to put the code displaying the content of specific pages in separate template files.
We call these partials or miscellaneous templates.
Partials templates are a very convenient solution to optimize your theme development and reuse parts of your code in more than one common template.
Starting from Pinegrow 2.6, these partial templates can now be linked with Pinegrow Smart components.
The goal here is to to facilitate the creative process by building a library of partial templates as components that you will be able to easily instantiate in the common templates.
Define a template part
To illustrate the process, let’s study the situation were we create a partial template to display the contents for the single.php common template.
The following documentation does not provide details about how to create the content but focus on how to create the partial template instead. Please have a look at our WordPress tutorials if you need more details about WordPress theme development.
From the tree, select your content element and from the WP tab, in Template Parts section, select Define template part action and set the name of the template in the Slug field.
The location of the template part can be specified, for example template-parts/content-page will export content-page.php partial template in the template-parts subfolder of your theme folder.
Note: Use only content option can be very useful if you want to group your actions in a container which will be excluded from the content of the partial template.
Link template part with Smart Component
Checking the option will invite you to add Define component action from the ACT panel to this element to link the template part to a Smart component.
Doing this will:
- List the component / template part in the LIB panel
- Replace Define template part action with Use template part action on all instances of this component (while component definition keeps Define template part)
- Automatically update template part settings on all instances when you change and update the component definition
Include template part
It is now mandatory to add the Include template part action to your element. It will load the template part into your template.
Define Component
Because our goal is to set our partial template as a smart component, from the ACT tab, you can now Define the component.
You can set any ID but it must be unique across all libraries and plugins that are activated on a page and choose a descriptive Display name.
Important: The Define editable area is added automatically by Pinegrow. Don’t remove it or your custom component will not work anymore.
Finally, UPDATE your new component with CMD+U or by clicking on the UPDATE button, on top of Pinegrow interface.
Use your new component
From the page where the template is defined, the tree view should look like the following screen. Define template part, Include template part and Define comp actions are visible.
You will notice that when you drag the component from your custom library to a common template, the Define template part action is automatically removed and the component instance only keep the Include template part action. This is normal, the same partial template can only defined once.
Your partial template is now available as a smart component in your custom Library (LIB) and you can drag it in any of your common template where it is needed.
The post How to Link Template parts with Smart components appeared first on Pinegrow Web Editor - Documentation and Tutorials.