Frontity Tutorial
  • 👋Welcome
  • ✔️Checking your progress
  • 1️⃣ Creating a custom theme
    • Create a Frontity Project
    • Create a Theme Package
    • Modify the <Root> component
    • Connect the <Root> component to the state
  • 2️⃣ Adding a menu
    • Use the <Link> component
  • 3️⃣ Displaying posts
    • Understanding the Frontity state
    • Display the list of posts
    • Display the post content
    • Display posts and pages separately
    • Formatting the date
  • 4️⃣ Adding styling
    • Global styles
    • Styled components
    • Styling the links
    • Styling the post info
    • Add dynamic styling
  • 5️⃣ Adding behaviour
    • Use 'state' and 'actions'
    • Add pagination
  • 6️⃣ Custom Post Types
    • Add support for Custom Post Types
  • 7️⃣ Finishing touches
    • Add a <Loading> component
    • Add a 404 page
    • Use the <html2react> component
    • SEO and head tags
    • Other things to do
  • 8️⃣ Deploying the project
    • Deploy to Vercel
  • 9️⃣ Next Steps
    • Learning resources
    • Getting help and support
    • Contributing to Frontity
Powered by GitBook
On this page
  1. 6️⃣ Custom Post Types

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.

// File: /frontity.settings.js

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

The properties of this object are:

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

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.

**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.

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.

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

// 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.

// 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>

// ...
Previous6️⃣ Custom Post TypesNext7️⃣ Finishing touches

Last updated 2 years ago

Learn more in .

Frontity in the console

Check you're on the right track by comparing your changes with .

the docs for @frontity/wp-source
the ones in this commit