{"id":42403,"date":"2023-11-13T12:58:18","date_gmt":"2023-11-13T12:58:18","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42403"},"modified":"2025-03-11T14:44:56","modified_gmt":"2025-03-11T14:44:56","slug":"timber-twig-listing-view-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/","title":{"rendered":"Timber\/Twig Listing View Overview"},"content":{"rendered":"\n

The Listing<\/strong> template defines the item layout and appearance in the Listing Grid<\/strong><\/a>.<\/p>\n\n\n\n

Timber<\/em><\/a> is the WordPress plugin that allows you to write HTML using the Twig Template Engine<\/em><\/a> separate from PHP files.<\/p>\n\n\n\n

Using Timber\/Twig, you can create templates with HTML and CSS, aided by tools like presets, dynamic data buttons, filters, and conditional tags. This approach offers flexibility, quick performance, and pure HTML and CSS structure.<\/p>\n\n\n\n

To get to know more, head to the Twig Integration for JetEngine<\/a><\/strong> article.<\/p>\n\n\n\n

To be able to create a listing with the Timber\/Twig view, enable the Timber\/Twig Views <\/strong>toggle in the Performance <\/strong>tab of the JetEngine dashboard<\/strong>.<\/p>\n\n\n\n

\"high<\/a><\/div>\n\n\n\n

Listings Dashboard<\/h2>\n\n\n\n
\n

The Listings<\/strong> dashboard is located in the JetEngine<\/strong> tab of the WordPress Dashboard<\/strong>. It contains listing items created with different builders, such as Elementor, WordPress Block Editor, Bricks, and Timber.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Clicking the \u201cAdd New\u201d <\/strong>button opens the pop-up where you can create a new listing template.<\/p>\n\n\n\n

\"setup<\/a><\/div>\n\n\n\n

Listing source<\/h3>\n\n\n\n

The Listing source<\/strong> drop-down list includes the following options for selection.<\/p>\n\n\n\n

Posts<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

You can create a listing template for the Custom Post Type<\/strong><\/a> made via JetEngine<\/em> and for the default WordPress posts, pages, media, and WooCommerce products.<\/p>\n\n\n\n

After choosing the \u201cPosts\u201d option in the Listing source<\/strong> drop-down menu, choose the type of post in the From post type<\/strong> select field.<\/p>\n\n\n\n

Query Builder<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

You can create a custom query with the Query Builder<\/strong><\/a> feature and display the narrowed data by a listing item.<\/p>\n\n\n\n

Select the Query<\/strong> you have created as the source.<\/p>\n\n\n\n

Terms<\/h4>\n\n\n\n
\"\"<\/div>\n\n\n\n

The JetEngine<\/em> plugin allows creating custom taxonomies<\/strong><\/a> and adding meta boxes<\/strong><\/a> with custom fields to them. Also, you can add a meta box to the default WordPress category or WooCommerce product category<\/strong><\/a>. For all those categories, along with the created taxonomies, you can build a listing template and afterward use it to display them in a Listing Grid<\/strong>.<\/p>\n\n\n\n

Choose the \u201cTerms\u201d option in the Listing source<\/strong> menu and specify it in the From taxonomy<\/strong> drop-down list.<\/p>\n\n\n\n

Users<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

WordPress offers default meta fields, such as user ID, login, nickname, email, etc., but you can also add a meta box<\/strong><\/a> with custom meta fields. Data from the default and custom fields can be displayed in the listing template.<\/p>\n\n\n\n

Repeater Field<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

Repeater meta field<\/strong><\/a> is a set of subfields that can be repeated as many times as you or users need.<\/p>\n\n\n\n

In the From post type<\/strong> list, select the post type to which you have applied the repeater meta field. Then, the Repeater source<\/strong> field follows, where the next options are presented: \u201cJetEngine,\u201d \u201cJetEngine Options Page,\u201d and \u201cACF.\u201d<\/p>\n\n\n\n

The following line includes two fields: the Repeater field<\/strong> and the Repeater option<\/strong>. Choose one based on the earlier selected Repeater source<\/strong>: complete the Repeater field<\/strong> for the \u201cJetEngine\u201d or \u201cACF\u201d Repeater source<\/strong>, and fill in the Repeater option<\/strong> for the \u201cJetEngine Options Page.\u201d<\/p>\n\n\n\n

User Appointments<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

This option is available with the JetAppointment<\/em><\/a> plugin. It allows you to display user appointment information, such as date, time, and service and provider names, in the Listing Grid on the front end. To learn more, proceed to the How to Display User Appointments with the Listing Grid Widget<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Custom Content Type<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

Choose the necessary CCT in the From content type<\/strong> drop-down field. If you have any questions, read the Custom Content Type<\/strong><\/a> guide.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

This source is available when the Custom Content Types<\/strong> toggle is activated in the WordPress Dashboard > JetEngine > JetEngine > Modules > Default Modules<\/em><\/strong> tab.<\/p><\/div><\/div>\n\n\n\n

Custom Content Type Repeater Field<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

This Listing source<\/strong> option reveals the Repeater Field<\/strong> drop-down list where the repeater meta field from the CCT should be chosen.<\/p>\n\n\n\n

REST API Endpoint<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

With the help of REST API, you can display the items of the Custom Content Type located on another website in the Listing Grid. For more details, check the REST API usage<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Select the necessary endpoint in the From API endpoint<\/strong> drop-down menu.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

This source is available when the Rest API Listings<\/strong> toggle is activated in the WordPress Dashboard > JetEngine > JetEngine > Modules > Default Modules<\/em><\/strong> tab.<\/p><\/div><\/div>\n\n\n\n

JetReviews<\/h4>\n\n\n\n
\"listing<\/div>\n\n\n\n

The \u201cJetReviews\u201d source pulls out the reviews and comments created with the JetReviews<\/em><\/a> plugin.<\/p>\n\n\n\n

Listing item name and listing view<\/h3>\n\n\n\n

There are two additional fields: Listing item name<\/strong> and Listing view<\/strong>.<\/p>\n\n\n\n

The Listing item<\/strong> name <\/strong>is a field for a listing name to distinguish it from other listings; it can be left empty so the name will be generated automatically.<\/p>\n\n\n\n

The Listing view<\/strong> allows selecting four builders: Elementor, WordPress Block Editor, Bricks, and Timber\/Twig. The WordPress Block Editor is the default option, Elementor<\/em><\/a> and Timber<\/em><\/a> should be installed and activated as plugins, and Bricks<\/em><\/a> should be set as a theme.<\/p>\n\n\n\n

The \u201cCreate Listing Item\u201d<\/strong> button creates a Listing template and opens the editing page in the builder selected in the Listing view <\/strong>field.<\/p>\n\n\n\n

\"<\/div>\n<\/div><\/div>\n\n\n\n

Listing Item in Timber\/Twig Editor<\/h2>\n\n\n\n
\n

With the \u201cTimber\/Twig\u201d option selected in the Listing view<\/strong> field, an empty Edit listing item template <\/strong>page is displayed. <\/p>\n\n\n\n

\"Edit<\/a><\/div>\n\n\n\n

On the top of the page is a field where you can enter the listing item name or change it. On the right of the field is the \u201cSettings\u201d <\/strong>button for opening the  Listing source <\/strong>settings tab. By pushing the \u201cSave\u201d <\/strong>button, you can save changes you completed for the listing template.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

The Preview width<\/strong> settings under the \u201cSettings\u201d <\/strong>and \u201cSave\u201d <\/strong>buttons are for setting the width in % (percent), px (pixels), and vw (viewport width). The default Preview width <\/strong>is 50%, taking up half of the editing page.<\/p>\n\n\n\n

On the left side, under the listing item name field, is the \u201cPresets\u201d <\/strong>button.<\/p>\n\n\n\n

\"presets<\/a><\/div>\n\n\n\n

Picking one of the presets applies it to the listing template. The HTML <\/strong>sheet shows the structure of the Listing content, CSS <\/strong>defines style settings, and Preview <\/strong>shows the result.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Presets are designed to display posts; therefore, they may return incorrect results in the Preview<\/strong> for other sources in the Listing.<\/p><\/div><\/div>\n\n\n\n

\"applying<\/a><\/div>\n\n\n\n

To prevent inaccuracies in rendering and reduce the server’s workload, the Preview<\/strong> does not refresh automatically after making changes to the HTML <\/strong>sheet. To apply your modifications, click the \u201cReload preview\u201d<\/strong> button located above the Preview <\/strong>area.<\/p>\n\n\n\n

CSS changes take effect instantly. If the corresponding HTML has already been rendered in the Preview<\/strong> area, the styles will be applied to it as soon as they are entered.<\/p>\n\n\n\n

The HTML<\/strong> editor accommodates all Twig language constructs<\/strong><\/a>, allowing manual code writing.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

HTML<\/strong> and CSS<\/strong> editors now support emmet syntax<\/a>. The abbreviation will expand into a code by pressing the Tab<\/strong> key.<\/p><\/div><\/div>\n\n\n\n

Also, above the HTML <\/strong>sheet are three buttons: \u201cDynamic data<\/strong>,\u201d \u201cFilter data<\/strong>,\u201d <\/strong>and \u201cConditional Tags<\/strong>.\u201d <\/strong>These options can help you to pull dynamic content into the HTML <\/strong>sheet.<\/p>\n\n\n\n

Dynamic data<\/h3>\n\n\n\n

With this button, you can pull two types of data: JetEngine<\/strong> and Default Data<\/strong>. This option allows you to display values from custom JetEngine <\/em>and default WordPress fields.<\/p>\n\n\n\n

\"jetengine<\/div>\n\n\n\n

Dynamic Data<\/h4>\n\n\n\n

The \u201cDynamic Data\u201d option of JetEngine<\/strong> pulls the data from the specified source. It has such settings:<\/p>\n\n\n\n

\"dynamic<\/div>\n\n\n\n