{"id":44788,"date":"2024-06-21T09:41:33","date_gmt":"2024-06-21T09:41:33","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=44788"},"modified":"2025-05-28T08:38:34","modified_gmt":"2025-05-28T08:38:34","slug":"making-your-component-dynamic","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/","title":{"rendered":"How to Make Your Component Dynamic"},"content":{"rendered":"\n

The Context<\/strong> option for Components<\/a><\/strong> allows you to change the context for the entire component in case you need to place it on different pages and templates. Let’s see how to use it in practice, with an example involving users.<\/p>\n\n\n\n

Create a New Component with User Information<\/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

In the first column, we add the Dynamic Image<\/strong><\/a> and select the \u201cUser avatar\u201d Media custom meta field<\/strong><\/a> as the Source<\/strong>. Also, we set the Dynamic image size <\/strong>to \u201cThumbnail.\u201d<\/p>\n\n\n\n

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

In the second column, 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

For now, we don\u2019t specify the context for the component, so, by default, for users, it will always get information about the current user. We will change the context when placing the component on different pages or templates.<\/p>\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 the User Listing<\/h2>\n\n\n\n

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

In the Setup Listing Item <\/strong>pop-up, pick the \u201cUsers\u201d Listing source<\/strong>, enter the Listing item name<\/strong>, and select the Listing view<\/strong> (e.g., \u201cBricks\u201d).<\/p>\n\n\n\n

Then, push the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

Learn more about the Listing template<\/strong> in Elementor<\/a>, Gutenberg<\/a>, Bricks<\/a>, and Timber\/Twig<\/a>.<\/p>\n\n\n\n

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

In the editor, search the recently created component by its name in the left panel and place it on the editing page. In our case, it\u2019s the User info<\/strong>.<\/p>\n\n\n\n

\"component<\/figure>\n\n\n\n

Open the General <\/strong>settings tab and select the \u201cCurrent User (for current scope)\u201d option for the Component Context <\/strong>field. Then, save the listing template settings.<\/p>\n\n\n\n

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

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

For example, we hit the \u201cAdd New Page<\/strong>\u201d button, enter the page title, and hit the \u201cEDIT WITH BRICKS<\/strong>\u201d button.<\/p>\n\n\n\n

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

Drag-n-drop the Listing Grid <\/strong>element<\/a>, widget<\/a>, or block<\/a> (depending on the builder you use) to the editing page and set the recently created Listing<\/strong>. Customize the element and page and save the changes.<\/p>\n\n\n\n

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

Component on the Post Page or Post Listing<\/h2>\n\n\n\n

You should use the \u201cCurrent Post Author\u201d context if you want to place an author card on a post page or in a listing of posts.<\/p>\n\n\n\n

To learn how to create a Single Post Page in Elementor or Gutenberg, proceed to the How to Create a WordPress Single Post Page Template<\/strong><\/a> tutorial.<\/p>\n\n\n\n

To learn how to create a Single Post template with the Bricks builder, move to the Bricks Builder Single Post & Archive Basics Explained<\/strong><\/a> <\/strong>tutorial.<\/p>\n\n\n\n

As an example, we head to WordPress Dashboard > Bricks > Templates <\/em><\/strong>and hit the \u201cEdit with Bricks<\/strong>\u201d button under the pre-made Single Post template.<\/p>\n\n\n\n

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

Then, we search for the User info<\/strong> component in the left panel.<\/p>\n\n\n\n

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

We place the component on the template editing page. The \u201cDefault Object\u201d Component Context<\/strong> shows the current user information, so we set the \u201cCurrent Post Author\u201d one. Now, it shows the post author information.<\/p>\n\n\n\n

After that, the changes can be saved.<\/p>\n\n\n\n

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

Component on the Public User Profile Page<\/h2>\n\n\n\n

To get more information, navigate to the How to Set Up a Public Single User Page<\/strong><\/a> <\/strong>tutorial.<\/p>\n\n\n\n

We want to place the component on the User Profile subpage template, so we proceed to the WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>tab and hit the \u201cAdd New Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, we pick the \u201cUsers\u201d Listing source<\/strong>, enter the Listing item name<\/strong> (e.g., \u201cProfile information\u201d), and select the Listing view<\/strong> (e.g., \u201cBricks\u201d).<\/p>\n\n\n\n

Then, we push the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

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

We place the component on the editing page (User info<\/strong>, in our case). As the Component Context<\/strong>, we select the \u201cQueried User\u201d option and save the settings.<\/p>\n\n\n\n

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

Then, we head to the WordPress Dashboard > Profile Builder > User Page <\/em><\/strong>tab and hit the \u201c+ Add New Subpage<\/strong>\u201d button.<\/p>\n\n\n\n

In the new repeater item, we add the Title<\/strong> and Slug<\/strong> and set the newly created JetEngine <\/em>listing item as the Template<\/strong>.<\/p>\n\n\n\n

Afterward, we hit the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n

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

Open the Profile page of any user on the front end. It shows the information of the required user.<\/p>\n\n\n\n

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

That\u2019s all. Now you know how to adjust the context for an entire component with the JetEngine <\/em>WordPress plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial explains how to adjust the context for an entire component with the JetEngine WordPress plugin, enabling its use on various pages and templates. This guide demonstrates its practical application with a user-related example.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[568],"yoast_head":"\nHow to Make Your Component Dynamic \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Your Component Dynamic \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-28T08:38:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/add-new-component.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\",\"name\":\"How to Make Your Component Dynamic \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-06-21T09:41:33+00:00\",\"dateModified\":\"2025-05-28T08:38:34+00:00\",\"description\":\"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make Your Component Dynamic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Your Component Dynamic \u2014 JetEngine | Crocoblock","description":"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Your Component Dynamic \u2014 JetEngine | Crocoblock","og_description":"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/","og_site_name":"Help Center","article_modified_time":"2025-05-28T08:38:34+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/add-new-component.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/","name":"How to Make Your Component Dynamic \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-06-21T09:41:33+00:00","dateModified":"2025-05-28T08:38:34+00:00","description":"The JetEngine WordPress plugin allows you to adjust the context for an entire component, enabling its use on various pages and templates. Discover its practical application with a user-related example.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Make Your Component Dynamic"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/44788"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=44788"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=44788"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=44788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}