How to create Custom Pages?

Hi, I want to add Sign In and Sign Up pages but don’t want to fetch from wordpress backend. What is the correct way to add such pages?

Hi @aeyzazkhan,

The best way to do that at this moment is to create a custom handler for the route of each page (handlers are explained here). In this case, the only thing those handlers should do is to add a property to their data object to identify that specific route in React and render whatever component you want.

For example, in the case of a sign up page in the link /signup/ , you would define a handler:

const signUpHandler = {
  pattern: "/sign-up/",
  func: ({ state }) => {
    state.source.data["/sign-up"].isSignUp = true;
  }
}

You would add signUpHandler into the handler array inside the init action of your theme like this (init is one of the actions triggered by Frontity, is explained here):

// In your theme, add an init action:
actions: {
  init: ({ libraries }) => {
    libraries.source.handlers.push(signUpHandler);
  },
  ...
}

And then, in the index.js of your theme you can check if data.isSignUp is true and render, for example, a SignUp component.

<Body>
  {data.isFetching && <Loading />}
  {data.isSignUp && <SignUp />}
  {data.isArchive && <List />}
  {data.isPostType && <Post />}
  {data.is404 && <Page404 />}
</Body>

This way, your custom pages work the same as normal WP pages but without fetching anything from your WordPress API.

Let me now if you have any doubt or question.
Cheers!

1 Like

Thanks, It worked like a charm.

2 Likes