> For the complete documentation index, see [llms.txt](https://tutorial.frontity.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.frontity.org/part6-custom-post-types/add-support-for-cpts.md).

# Add support for Custom Post Types

In order to use custom post types in our project we need to add support for our custom post type in `frontity.settings.js`. We can do this by locating the object for `@frontity/wp-source` in the `packages` array and adding the `postTypes` property to `state.source`.

The `postTypes` property takes an array of objects as it's value, with each object in the array defining a distinct post type. We're only defining one post type, namely `destinations`, so we only add one object to the array.

```jsx
// File: /frontity.settings.js

// ...
{
  "name": "@frontity/wp-source",
  "state": {
    "source": {
      "url": "https://test.frontity.org",
      "postTypes": [
        {
          type: "destinations",
          endpoint: "destinations",
          archive: "/destinations"
        }
      ]
    }
  }
}
// ...
```

{% hint style="info" %}
The properties of this object are:
{% endhint %}

| Property   | Definition                                                                                                                                                                            |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`     | the CPT name, defined by the WordPress function `register_post_type()`                                                                                                                |
| `endpoint` | this will usually be the same as `type` unless the `args` array passed to `register_post_type()` specifies something different                                                        |
| `archive`  | this is needed if you want to list all the posts of that post type, note that the `args` array passed to `register_post_type()` must include `'has_archive' => true` for this to work |

{% hint style="info" %}
Learn more in [the docs for @frontity/wp-source](https://docs.frontity.org/api-reference-1/wordpress-source#custom-post-types).
{% endhint %}

Frontity now knows about this CPT and will just work with it. Try it! Enter `localhost:3000/destinations` into your browser's address bar and you should see a listing of our favourite travel destinations. Click on one and it displays using the `<Post>` component.

{% hint style="info" %}
\*\*Note\*\* that the 'show\_in\_rest' parameter needs to be set to true in the \`register\_post\_type()\` function to include the CPTs in the REST API.
{% endhint %}

**And that's it** - that's all we need to do to have our project use WordPress CPTs!

However, in the case of this CPT we don't want to display the author and date information so let's tell our `<Root>` component to use the `<Page>` component instead for this post type.

If we take a look at the data for one of the CPT URLs we can see that it has a boolean `isDestinations` property that we can utilise for this purpose.

![Frontity in the console](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part6img1.png)

So let's extend our `<Switch>` component to tell it to use the `<Page>` component if this value is `true`.

```jsx
// File: /packages/my-first-theme/src/components/index.js

// ...
<Main>
  <Switch>
    <List when={data.isArchive} />
    <Page when={data.isPage} />
    <Post when={data.isPost} />
    <Page when={data.isDestinations} />
  </Switch>
</Main>

// ...
```

To finish off let's make this accessible from our menu.

```jsx
// File: /packages/my-first-theme/src/components/index.js

// ...
<Menu>
  <Link link="/">Home</Link>
  <Link link="/destinations">Destinations</Link>
  <Link link="/about-us">About Us</Link>
</Menu>

// ...
```

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/a9b130e010a5d08859aa7e76e431c4e3dde977f4).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tutorial.frontity.org/part6-custom-post-types/add-support-for-cpts.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.