Example: Connect JSON Content to Your Community

Set up JSON in your CMS connection:

1. Follow the steps to create a CMS connection.
2. For the server URL, enter https://public-api.wordpress.com/.
3. You don’t need to enter a root path.
4. In the JSON section, click Add JSON.
5. Enter the following to add a list of blog posts:
   • Name: Blog List
   • Type: Content List
   • Path: rest/v1.1/sites/capricorncafeblog.wordpress.com/posts?number={itemsPerPage}&page={pageNumber}

     The path has 2 variables used for pagination. {itemsPerPage} is the number of items to be displayed on a page, with the value to be computed dynamically during rendering of the CMS Connect (JSON) component. {pageNumber} is the current page number, whose value is to be computed dynamically during rendering of the CMS Connect (JSON) component.

     Note

6. Click Add JSON.
7. Enter the following to add a single blog post:
   • Name: Blog Item
   • Type: Content Item
   • Path: rest/v1.1/sites/capricorncafeblog.wordpress.com/posts/{component}

     The {component} variable adds the component path dynamically, based on what’s entered for Component Path in the property editor for the CMS Connect (JSON) component in the Builder.

     Note

8. Click Save.

Add the blog post to a page

1. Create a new standard community page, using the “New Page” option.
2. In the Builder, drag a CMS Connect (JSON) component on a page.
3. In the property editor, select the CMS source that contains your JSON content.
4. Select the name of your JSON content item (blog post), in this case Blog Item.
5. For the component path, enter {!id}.
6. For the content item layout, select Detail.
7. Enter the following expressions in the Title, Author, Published On, Body, and Image Source fields:
   • @title
   • @author/name
   • @date
   • @content
   • @featured_image
8. Click Save in the property editor.

Add the list of blogs to a page

1. In the Builder, drag a CMS Connect (JSON) component on a page.
2. In the property editor, select the CMS source that contains your JSON content.
3. Select the name of your JSON content list, in this case Blog List.
4. For the content list node path, enter @posts.
5. For content list layout, select Grid.
6. For items per page, enter 5.
7. For columns, enter 2.
8. For content list item layout, select Card.
9. Enter the following expressions in the Title, Author, Published On, Body, and Image Source fields:
   • @title
   • @author/name
   • @date
   • @content
   • @featured_image
10. In the Navigation Link section, enter Read More for the link text.
11. For the type, select My Pages.
12. For the page, select the name of the page that contains the content item (blog post).
13. In the URL Parameter Mapping section, enter id for the name, and @ID for the value. (If you don’t see the Name and Value fields, click Add Parameter.)
14. Click Save in the property editor.