The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Wordpress.com CMS

What is Wordpress.com CMS?

Wordpress.com uses the same version of REST API client that comes with Wordpress.org (self hosted sites). Their REST API allows you to view, create or edit content on any WordPress.com site, as well as any self-hosted (WordPress.org) site connected via Jetpack. This includes not only blog posts and pages but also comments, tags, categories, media, site stats, notifications, sharing settings, user profiles, and many other WordPress.com features.

Connect Wordpress.com com to Draftbit

Steps with Wordpress.com

If you don't have a Wordpress.com account, create one here.

The initial step to use Wordpress.com as a CMS using their REST API is to create and publish a new site. Wordpress.com uses simple CMS model of creating and publishing posts. To create and publish a new post you to go to the My site > WP Admin section to access the dashboard screen. From the left navigation menu, go to Posts tab to create and publish a new post.

For this example, we have created four posts with our own custom data inserted.

Get your REST API URL:

To perform read and write operations on a Wordpress.com REST AP is done via the Base URL: https://public-api.wordpress.com/rest/v1.1/sites/{YOUR_SITE_DOMAIN}. This Base URL requires you to specify the domain of your published Wordpress.com website.

This URL is retrieved when you have created the website and is available in the Browser as shown below:

Get Access Token:

The Wordpress.com CMS API allows read and write operations to the Base URL only if there is an Authorization header passed with a Bearer <access_token>. To create this token, you to go through the authorization process that Wordpress recommends.

  • Go to https://developer.wordpress.com/apps/.
  • Click the button Create New Application.
  • Enter the details such as Name of the application, Description of the website, in the Website URL the domain address of your Wordpress.com site, a Redirect URL where the <access_token> is generated, and then click the button Create.
  • Go to the newly created application and make a note of the Client ID and Redirect URL.
  • Then in the browser window, send a GET request at the following URL https://public-api.wordpress.com/oauth2/authorize?client_id={YOUR_CLIENT_ID}&redirect_uri={YOUR_REDIRECT_URL}&response_type=token.
  • Click the button Approve to connect this application to your Wordpress.com site.
  • It is going to respond back with an <access_token> on the Redirect URL.
  • Make sure to decode the URL in a usable format using a URL decode online tool such as URLDecoder.
  • Save this decoded <access_token>. This going to be used in the next section.

Setup steps in Draftbit

To access the API in the Draftbit app, you need the pass the <access_token> as the global variable in the form of an Authorization header.

  • Open the Settings tab on left-navbar.
  • In the Project Settings, navigate to Global Variables.
  • Enter a key to access the Authentication token and the value for it.
  • The Authorization token value requires you to enter a Bearer token. The syntax is Bearer <access_token>.
  • In place of paste your own <access_token> (from the previous section) and then click Add.
  • Click Save.

To add the Wordpress.com API Base URL to your Draftbit app:

  • Open the Data tab on left-navbar.
  • From the Add a service menu, click on Rest API.
  • Enter a name for your REST API.
  • Paste your Base URL (from the previous section) into the Base URL input field.
  • Click the + from the Headers section to add a new Header.
  • Type Authorization for the key.
  • Select the Global Variable for Authorization (from the last step).
  • Click Save.

Available Wordpress.com API recipes for Draftbit

Fetch all posts into a Draftbit app

To a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Text you would like to be rendered for each entry in your data set.

The next step is to create an endpoint. Let's try fetching the data using the GET request:

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Add the /posts/ in Add Path & Params.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Wordpress.com API.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Select the List component in the Layer Tree.
  • Change its Mapped Value to data.posts under the Data Tab.
  • Now you can configure a Mapped Value on each Text component to title you have inside the View of your Fetch component.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.

Fetch single post into a Draftbit app

To a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:

To fetch a single post from Wordpress.com API, you'll have to specify the POST_ID which is found when fetching data in the Preview mode.

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Add the /posts/{{POST_ID}} in Add Path & Params.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Wordpress.com API.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Now you can configure a Mapped Value on each Text component to title you have inside the View of your Fetch component.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.

Add new data from a Draftbit app

You need to use a component that:

  1. accepts user input and
  2. has a Field Name prop to POST data using Wordpress.com API.

Examples of these include:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Wordpress.com API service.

In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the dropdown.
  • Add the /posts/new in Add Path & Params.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your content model.
  • The value of the field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}}. A Test value is a temporary value that can be used for variables during development.
  • In the Body Preview tab you verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're able to add multiple fields to a request, just make sure you include a comma after each field.

{
  "title": {{textInputValue}}  
}

You can add the POST endpoint to submit the data entered in the Draftbit using the TextInput component and Touchable component.

  • On the Touchable component go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the value for textInputValue.

Now you can make a POST request to add new data from the Draftbit app.

Update data from a Draftbit app

The Wordpress.com uses POST request to edit and update a post. It accepts similar input components as mentioned in POST request and the request is triggered using a Touchable component.

To navigate from the main screen of the app to the screen where the updated value is entered and then eventually the PUT request Endpoint is triggered, the initial step is to create a new screen with a TextInput component, a Touchable component, and a Text component.

  • Select the Touchable component that is specified for updating a value in-app screen.
  • Go to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option Navigate.
  • Set the Destination option to point to a new screen where the value can be updated.
  • In the Pass Data option, click the + to add a key-value pair.
  • Add the ID as the key and then select its value to be passed to the navigation screen.

You'll need to create a new endpoint in your Wordpress.com service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to PUT using the drop-down.
  • Add the /posts/{{ID}} of the post to update in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the entities you have in your content model.
  • The value of the field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}}.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Delete data from a Draftbit app

The Wordpress.com uses POST request to delete a post with a post's ID.

You'll need to create a new endpoint in your Wordpress.com service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to DELETE using the dropdown.
  • Add the /posts/{{ID}}/delete of the entity to delete in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Updated 2 months ago


Wordpress.com CMS


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.