Show custom post types in search results, tags, categories, etc

👨‍💻 Framework Development
1

Hello everyone!

I am yet very new with Frontity and on this platform.
However, I thought I share some ideas I’ve got recently by exploring Frontity and its amazing features.

Since I was looking for the answer for myself in the first place and I’ve not seen this in this forum (I may be wrong, please correct me if I am), I thought it might be beneficial for other users to share my ideas.

First of all, thanks to the amazing Frontity developers who have made it possible to use react.js together with popular WordPress CMS.

I’ve tried a long time to develop something like a post feed, combined with multiple post types on one page. For instance, develop the recent posts from all post types (post, page, custom post type, etc.).
I came up with the solution, using the state.source.params from @frontity/wp-source API Reference https://api.frontity.org/frontity-packages/features-packages/wp-source#state-source-params and reading the article on How To Query Multiple Post Types With One Request To The WordPress REST API.. Together with this, I’ve managed to add my custom post types in one API endpoint to show them on the archive page.

By default, WordPress does not add custom post types to the default API endpoint. That results from Frontity not display them in default archive or, i.e., search results or default tags/category page (since Frontity is relying on WP API to retrieve the posts). However, doing little coding can easily solve this problem.

If you are not familiar with the coding in WP, you may want to install a plugin called REST API Multiple Post Types. This plugin does the trick automatically. However, please note, as you see, this plugin has not been updated for a while. I have not tested its vulnerability, so please install it only at your own risk or manually edit the code!

For instance, let’s say you have custom post types like “videos” or “galleries”. Doing little coding (or installing the plugin) on the WordPress side and using the Frontity state.source.params documentation, you can easily define your custom post types in (for example):

          params: {
            type: ["post", "videos", , "galleries"],
          },

That would be in “GET” request something like /wp-json/wp/v2/posts?type=videos&type=galleries, which fetches not only posts but also all those custom post types defined in your frontity.settings.js. I found it a great solution if you want to query all your posts (including those coming from custom post types) in search results. In other words, to show all your posts that are registered in API.

(oh, and this is elementary when it comes to the custom post types - make sure they are registered and available in WP API registry)

2

Hi @reinaldudras,

I’ve actually been trying to include custom post types in the search results for days but I’ve had no luck.

Could you please share a full code example that would show how to include custom post types in the search function?

I have tried creating a handler, like so

const searchHandler = {
  pattern: "/search/:query",
  func: async ({ route, state, libraries }) => {
    const { query } = libraries.source.parse(route);
    const response = await libraries.source.api.get({
      endpoint: "multiple-post-type",
      params: { search: query, type: ['post', 'page', 'goals', 'resources'] }
    });
    const items = await response.json();

    // Store the items in the state
    state.customSearch.results = items;
  }
};

export default searchHandler;

added the customSearch in the state, like so

const domain = {
  name: "domain",
  roots: {
    theme: Root
  },
  state: {
    customSearch: {
      results: [],
    },
...
  libraries: {
    source: {
      handlers: [searchHandler]
    }
  }

Then in the Root component I have this

useEffect(() => {
    const queryParams = new URLSearchParams(window.location.search);
    const searchQuery = queryParams.get('s');
    if (searchQuery) {
      actions.router.set(`/search/${searchQuery}`);
    }
  }, []);

but when I go to the page /search/test I get the Cannot read properties of undefined (reading 'undefined') error.

There is something wrong with the searchHandler function but I don’t know what and I’m pretty stuck. Any help would be massively appreciated.
Thanks