How to Create a Single Page for the CCT REST API Item
This guide explains creating a Single page for the CCT REST API item to display the selected item's data on a static page.
Before you start, check the tutorial requirements:
- Elementor (Free version) or Block editor (Gutenberg)
- JetEngine plugin installed and activated with the REST API module enabled and the endpoint added
Enable the Custom Content Types Module
Before following the other steps, go to WordPress Dashboard > JetEngine > JetEngine > Modules and activate the Custom Content Types module.
Don’t forget to press the “Save” button.
![custom content types module enabled](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_1.png)
Check an Endpoint Connection
Proceed to JetEngine > REST API Endpoints tab and connect an endpoint. Once the endpoint is connected, the green “Connected” label appears in front of the Status field.
![rest api endpoints connected](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_2.png)
Creating WordPress Pages
Proceed to the WordPress Dashboard > Pages tab and create two static pages. The first page displays the Listing Grid 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.
![rest api single page link](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_3.png)
Adding an Options Page
To create an Options Page, open the WordPress Dashboard > JetEngine > Options Pages. Add a new Text 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 Options Page Overview to learn how to set it up.
![text field in the options pages settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_4.png)
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.
![completed text field on the options page](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_5.png)
Building a Listing Template for the REST API Endpoint
The Listing template for the REST API endpoint item will be used on the first page. To create the listing template, go to JetEngine > Listings and click the “Add New” button. Select the “REST API Endpoint” as the Listing source and choose the needed endpoint.
Complete the Listing item name field and select the desired Listing view.
Press the “Create Listing Item” button.
![rest api endpoint listing pop-up](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_6.png)
Choose the preferred page builder editor. In this case, it is the Elementor. Once the page opens, add a Dynamic Field widget to output the desired data from the endpoint.
Pick “Post/Term/User/Object Data” as the Source, and then in the Object Field, select all the needed fields to be displayed from the endpoint.
![dynamic field object field options in elementor](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_7.png)
Then drag and drop the Dynamic Link widget to the page. Select “Options” as the Source, and the text field from the Options page containing the link to the page to redirect in the Option dropdown.
Enable the Add Query Arguments toggle and insert ‘item_id=%current_id%’ in the appeared field.
![dynamic link options source with query arguments added in elementor](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_8.png)
Creating Another Listing Template for the Same REST API Endpoint
Start building one more listing template that will be used on the second page.
The listing template should have the same source you created — the REST API endpoint. This template is how one item will look on its ‘single page’.
Therefore, add more Dynamic Field widgets to create a more detailed item layout.
Building a Custom REST API Query in the Query Builder
Go to JetEngine > Query Builder 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.
![single rest api general settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_9.png)
Proceed with adding the query and select the endpoint. Press the dynamic tag button next to the Value field and choose the “Query Variable” option.
![selected endpoint in the rest api query](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_10.png)
The key can be found in the Preview of the endpoint.
![key value in the preview](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_11.png)
The Variable Name in the settings is the same as you wrote in the Dynamic Link widget.
![variable name field completed](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_12.png)
Here is a little reminder of what was written in the Dynamic Link Query Arguments field.
![query arguments field in the elementor page builder](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_13.png)
Displaying Listing Templates in the Listing Grid Widgets
It is finally time to add the listing templates to the Listing Grid widgets.
Go to the first and the second page. Drag and drop the Listing Grid widget to each page, and select the listing templates for the first and second pages accordingly.
Here is an example of how the listing template can be added to the first page:
![main rest api listing used in elementor](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_14.png)
And that’s how it looks on the second page:
![secondary rest api listing used in elementor](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_15.png)
Enabling Custom Query in the Listing Grid Widget
Once the custom REST API query is ready, you must select it in the Listing Grid widget on the second page. It can be performed in the Custom Query tab.
Enable the Use Custom Query toggle and select the needed item in the Custom Query dropdown menu.
![custom query selected in elementor](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_16.png)
Check the result. Mind that the link in the primary Listing Grid contains a query argument.
![rest api single query argument](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_17.png)
The query argument allows displaying the data of the item you just clicked on, which creates a ‘single page’ for the REST API item.
![rest api single page item id in the link](https://crocoblock.com/knowledge-base/wp-content/uploads/2022/11/Screenshot_18.png)
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 JetEngine plugin.