Retrieve posts of custom post type on homepage

[sean.doldersum]

Hi there,

For a project I’m doing i need to show 5-10 posts of a post type (vacancies) on the homepage. How can I retrieve these items and their data?

Thanks in advance!

[mburridge]

Hi @sean.doldersum

Our documentation for setting up wp-source to fetch custom post types is here.

Once you have configured frontity.settings.js with the required info to fetch the post types then you will need to ‘pre-fetch’ them in your theme.

In your theme’s index.js file you should add a beforeSSR action to fetch the posts. Our documentation for beforeSSR is here.

Hopefully that should be enough to get you going, but if you need further help please don’t hesitate to ask. A link to a repo with your code will be helpful if you have any further questions.

[pirmin.bahr]

Hello there,

i did also run into issues fetching custom post types.

What i did by now:

in frontity.settings.js:
…
“source”: {
“api”: “http://websitename/frontity/wp-json”,
“postTypes”: [
{
“type”: “projekte”,
“endpoint”: “projekte”,
}
],
…

in Root.js:

  useEffect(() => {
    actions.source.fetch("/projekte/");
  }, []);
  console.log(state.source.get("/projekte/"));

what i receive:

it says that the custom post type is not defined. But it is actually available in the wp-json API enpoint.
Did i miss a thing?

[mburridge]

Hi @pirmin.bahr

Try adding the archive property to your postTypes definition:

"postTypes": [
  {
    "type": "projekte",
    "endpoint": "projekte",
    "archive": <URL of CPT archive>
  }
],

Let me know if this helps. See here for more info.

[pirmin.bahr]

Ok that actually worked! Thanks for your help

[juanmtorrijos]

Hello everyone,
I am having an issue retrieving my custom posts types. I got the data successfully following the demo here and also the documentation for custom post types you posted earlier.

However, the data that I get back is lacking information such as the title and other custom fields. I am using the beforeSSR action specified here.

This is the data that I get back:

I need to add more data, such as the post title and other custom metaboxes from advanced custom fields. Any help will be appreciated.

[juanmtorrijos]

Hello,
I am going to reply to my own question. I took a closer look at the code from the example I linked in the question above (the custom post type frontity example). And I realized that I can get all the data I need by passing the name of the CPT and the id to state.source, as seen in the screenshot below.

[codemonkeynorth]

@mburridge

"archive": <URL of CPT archive>

Hi @mburridge,

If i add this archive parameter it also seems to create a route at eg https://site.test/my-cpt-archive ?
I don’t want to add a route that’s accessible via the browser (eg in mars theme visiting this URL would load the List component route). I just need to be able to query the data with a fetch('/my-cpt-archive').

I’m using CPT UI and set the archive to my-cpt-archive but doesn’t this also just create this browser route?

How do I just expose it on the API without an actual public browser route?

I tried to block the route in the Switch but if I change the item to eg <List when={data.isArchive && !data.isMyCPTArchive} /> then it’ll just fall through to the end of the Switch and display nothing at all

however if i take the archive out of frontity.settings.js to try stop it adding the browser-accessible archive URL at site.test/my-cpt-archive, then my data fetch no longer works

thanks

[update: this is a longer discussion I think and I will create a new topic for it, with more clear specification… see Holding page for CPT including posts of that CPT (eg /events)]