{"id":31835,"date":"2022-12-01T10:10:37","date_gmt":"2022-12-01T10:10:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=31835"},"modified":"2024-06-26T09:17:45","modified_gmt":"2024-06-26T09:17:45","slug":"creating-single-page-for-rest-api-item","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/","title":{"rendered":"How to Create a Single Page for the CCT REST API Item"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"enable-the-custom-content-types-module\">Enable the Custom Content Types Module<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Before following the other steps, go to <strong><em>WordPress Dashboard > JetEngine > JetEngine > Modules <\/em><\/strong>and activate the<strong> Custom Content Types <\/strong>module.<\/p>\n\n\n\n<p>Don\u2019t forget to press the \u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_1.png\" alt=\"custom content types module enabled\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-an-endpoint-connection\">Check an Endpoint Connection<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Proceed to <strong><em>JetEngine &gt; REST API Endpoints <\/em><\/strong>tab and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-display-custom-content-type-items-using-rest-api\/#title3\" target=\"_blank\" rel=\"noreferrer noopener\">connect an endpoint<\/a>. Once the endpoint is connected, the green \u201cConnected\u201d label appears in front of the <strong>Status<\/strong> field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_2.png\" alt=\"rest api endpoints connected\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-wordpress-pages\">Creating WordPress Pages<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Proceed to the <strong><em>WordPress Dashboard &gt; Pages <\/em><\/strong>tab and create two static pages.&nbsp;The first page displays the <strong>Listing Grid<\/strong> widget that lists all items from the endpoint. The second page shows the data related to the item you clicked on. At this stage, leave the pages empty and copy the link to the second page, as it will be needed for the next step.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_3.png\" alt=\"rest api single page link\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-an-options-page\">Adding an Options Page<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To create an Options Page, open the <strong><em>WordPress Dashboard &gt;&nbsp; JetEngine &gt; Options Pages.<\/em><\/strong> Add a new <strong>Text<\/strong> meta field type to the page in the Fields tab. Save the changes and proceed to the newly created Options page on the WordPress Dashboard. Follow the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-options-page-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Options Page Overview<\/a> to learn how to set it up.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_4.png\" alt=\"text field in the options pages settings\">\n\n\n\n<p>Open the options page you have just edited. The text field should be filled in with the second-page link, as suggested in the previous step.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_5.png\" alt=\"completed text field on the options page\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-a-listing-template-for-the-rest-api-endpoint\">Building a Listing Template for the REST API Endpoint<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The Listing template for the REST API endpoint item will be used on the first page. To create the listing template, go to <strong><em>JetEngine &gt; Listings <\/em><\/strong>and click the \u201c<strong>Add New\u201d<\/strong> button. Select the \u201cREST API Endpoint\u201d as the <strong>Listing source<\/strong> and choose the needed endpoint.<\/p>\n\n\n\n<p>Complete the <strong>Listing item name <\/strong>field and select the desired <strong>Listing view<\/strong>.<\/p>\n\n\n\n<p>Press the \u201c<strong>Create Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_6.png\" alt=\"rest api endpoint listing pop-up\">\n\n\n\n<p>Choose the preferred page builder editor. In this case, it is the Elementor. Once the page opens, add a <strong>Dynamic Field <\/strong>widget to output the desired data from the endpoint.&nbsp;<\/p>\n\n\n\n<p>Pick \u201cPost\/Term\/User\/Object Data\u201d<strong> <\/strong>as the <strong>Source,<\/strong> and then in the <strong>Object Field, <\/strong>select all the needed fields to be displayed from the endpoint.&nbsp;<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_7.png\" alt=\"dynamic field object field options in elementor\">\n\n\n\n<p>Then drag and drop the <strong>Dynamic Link<\/strong> widget to the page. Select \u201cOptions\u201d as the <strong>Source<\/strong>, and the text field from the Options page containing the link to the page to redirect in the <strong>Option<\/strong> dropdown.<\/p>\n\n\n\n<p>Enable the <strong>Add Query Arguments <\/strong>toggle and insert \u2018item_id=%current_id%\u2019 in the appeared field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_8.png\" alt=\"dynamic link options source with query arguments added in elementor\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-another-listing-template-for-the-same-rest-api-endpoint\">Creating Another Listing Template for the Same REST API Endpoint<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Start building one more listing template that will be used on the second page.<\/p>\n\n\n\n<p>The listing template should have the same source you created \u2014 the REST API endpoint. This template is how one item will look on its \u2018single page\u2019.&nbsp;<\/p>\n\n\n\n<p>Therefore, add more <strong>Dynamic Field<\/strong> widgets to create a more detailed item layout.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-a-custom-rest-api-query-in-the-query-builder\">Building a Custom REST API Query in the Query Builder<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Go to <em>JetEngine &gt; Query Builder<\/em> to create a custom REST API query that allows you to display the item on a single REST API page according to which item you clicked on the first page.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_9.png\" alt=\"single rest api general settings\">\n\n\n\n<p>Proceed with adding the query and select the endpoint. Press the dynamic tag button next to the <strong>Value <\/strong>field and choose the \u201cQuery Variable\u201d option.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_10.png\" alt=\"selected endpoint in the rest api query\">\n\n\n\n<p>The key can be found in the Preview of the endpoint.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_11.png\" alt=\"key value in the preview\">\n\n\n\n<p>The <strong>Variable Name<\/strong> in the settings is the same as you wrote in the<strong> Dynamic Link<\/strong> widget.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_12.png\" alt=\"variable name field completed\">\n\n\n\n<p>Here is a little reminder of what was written in the <strong>Dynamic Link Query Arguments<\/strong> field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_13.png\" alt=\"query arguments field in the elementor page builder\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"displaying-listing-templates-in-the-listing-grid-widgets\">Displaying Listing Templates in the Listing Grid Widgets<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>It is finally time to add the listing templates to the <strong>Listing Grid<\/strong> widgets.<\/p>\n\n\n\n<p>Go to the first and the second page. Drag and drop the <strong>Listing Grid<\/strong> widget to each page, and select the listing templates for the first and second pages accordingly.<\/p>\n\n\n\n<p>Here is an example of how the listing template can be added to the first page:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_14.png\" alt=\"main rest api listing used in elementor\">\n\n\n\n<p>And that\u2019s how it looks on the second page:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_15.png\" alt=\"secondary rest api listing used in elementor\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"enabling-custom-query-in-the-listing-grid-widget\">Enabling Custom Query in the Listing Grid Widget<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Once the custom REST API query is ready, you must select it in the <strong>Listing Grid<\/strong> widget on the second page. It can be performed in the Custom Query tab.<\/p>\n\n\n\n<p>Enable the <strong>Use Custom Query <\/strong>toggle and select the needed item in the <strong>Custom Query <\/strong>dropdown menu.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_16.png\" alt=\"custom query selected in elementor\">\n\n\n\n<p>Check the result. Mind that the link in the primary <strong>Listing Grid<\/strong> contains a query argument.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_17.png\" alt=\"rest api single query argument\">\n\n\n\n<p>The query argument allows displaying the data of the item you just clicked on, which creates a \u2018single page\u2019 for the REST API item.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_18.png\" alt=\"rest api single page item id in the link\">\n<\/div><\/div>\n\n\n\n<p>The result is achieved; now you know how to create a single page for the REST API item on your WordPress website with the help of the <em>JetEngine <\/em>plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide explains creating a so-called \u201csingle page\u201d for the REST API item to display the selected item&#8217;s data on a static page.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[407],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.\" \/>\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\/creating-single-page-for-rest-api-item\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-26T09:17:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_1.png\" \/>\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=\"7 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\/creating-single-page-for-rest-api-item\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/\",\"name\":\"Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-12-01T10:10:37+00:00\",\"dateModified\":\"2024-06-26T09:17:45+00:00\",\"description\":\"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/#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 Create a Single Page for the CCT REST API Item\"}]},{\"@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":"Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock","description":"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.","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\/creating-single-page-for-rest-api-item\/","og_locale":"en_US","og_type":"article","og_title":"Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock","og_description":"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/","og_site_name":"Help Center","article_modified_time":"2024-06-26T09:17:45+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/Screenshot_1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/","name":"Creating Single Page for REST API Item \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-12-01T10:10:37+00:00","dateModified":"2024-06-26T09:17:45+00:00","description":"Discover the ability to create a single page for the REST API item to showcase the needed data on a static WordPress page.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-single-page-for-rest-api-item\/#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 Create a Single Page for the CCT REST API Item"}]},{"@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\/31835"}],"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\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=31835"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=31835"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=31835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}