{"id":44808,"date":"2024-06-21T09:51:39","date_gmt":"2024-06-21T09:51:39","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=44808"},"modified":"2024-06-21T10:36:45","modified_gmt":"2024-06-21T10:36:45","slug":"using-components-in-query-loop-or-listing","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/using-components-in-query-loop-or-listing\/","title":{"rendered":"How to Use Components in Query Loop or Listing Grid"},"content":{"rendered":"\n

The Components<\/a> <\/strong>feature of the JetEngine <\/em>plugin allows you to create a custom widget\/element\/block that can be reused on different pages or templates on your WordPress website. You can also add components to the JetEngine<\/em> Listing Grid<\/strong> element<\/a>\/widget<\/a>\/block<\/a> or Query Loop<\/strong><\/a> of the Bricks <\/em>theme.<\/p>\n\n\n\n

In this tutorial, we will create a component with user information and place it on the Listing Grid<\/strong> or Query Loop<\/strong> with posts. It can be default WordPress posts or posts from a Custom Post Type<\/strong><\/a>. Setting the component Context<\/a><\/strong> will display the author info for every post.<\/p>\n\n\n\n

Create a New Component for CPT<\/h2>\n\n\n\n

Go to the WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>tab and hit the \u201cAdd New Component<\/strong>\u201d button.<\/p>\n\n\n\n

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

In the Setup Component <\/strong>pop-up, enter the Component name <\/strong>(e.g., \u201cUser info\u201d) and select the Component view<\/strong> (\u201cElementor,\u201d \u201cBricks,\u201d \u201cTimber\/Twig,\u201d or \u201cBlocks (Gutenberg)\u201d).<\/p>\n\n\n\n

In our example, we select the \u201cBricks\u201d option.<\/p>\n\n\n\n

Then, press the \u201cCreate Component<\/strong>\u201d button.<\/p>\n\n\n\n

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

Check this tutorial to learn how to add meta fields to user and display user information<\/strong><\/a>.<\/p>\n\n\n\n

To display some user data, we use Dynamic elements<\/strong><\/a>.<\/p>\n\n\n\n

On the editing page, we place three Dynamic Field<\/strong><\/a> elements. For them, we set the \u201cPost\/Term\/User\/Object Data\u201d Source<\/strong> and \u201cLogin,\u201d \u201cID,\u201d and \u201cEmail\u201d Object fields<\/strong>.<\/p>\n\n\n\n

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

Also, we enable the Customize field output<\/strong> option for three Dynamic Fields<\/strong> and set the Field format <\/strong>(e.g., \u201cEmail: %s\u201d).<\/p>\n\n\n\n

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

To learn how to add the Content<\/strong> and Style Controls<\/strong> to the component, proceed to the Components Overview<\/a><\/strong>.<\/p>\n\n\n\n

When you are done, save the component settings.<\/p>\n\n\n\n

Component in Query Loop<\/h2>\n\n\n\n

To learn about the Query Loop<\/strong><\/a> <\/strong>feature of the Bricks theme, proceed to this article.<\/p>\n\n\n\n

Go to the WordPress Dashboard > Pages<\/em><\/strong> tab and create a new page or edit the existing one in Bricks editor.<\/p>\n\n\n\n

Here, press the \u201c+<\/strong>\u201d icon to add a new section and click on the Container<\/strong> element in the Structure<\/strong> tab on the right.<\/p>\n\n\n\n

In the CONTENT <\/strong>settings tab of the Container<\/strong>, enable the Use query loop <\/strong>toggle and hit the \u201cinfinity<\/strong>\u201d icon.<\/p>\n\n\n\n

In the appeared pop-up, you can alter the query settings. For example, we adjust the Type<\/strong> to “Posts” and select the “Posts” option as the Post type<\/strong>, but you can set other options if you want to use another source for posts.<\/p>\n\n\n\n

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

To close the pop-up, click on the area beyond it and fill the Container <\/strong>with the Query Loop<\/strong> with the needed content. For example, you can use Dynamic Elements<\/strong><\/a>.<\/p>\n\n\n\n

For instance, we place such elements:<\/p>\n\n\n\n