Retrieve posts of custom post type on homepage

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!

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.

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:

Bildschirmfoto 2020-08-06 um 11.46.01

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?

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.

1 Like

Ok that actually worked! Thanks for your help :slight_smile:

1 Like

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.

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.

2 Likes

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)]