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 }) => {["/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 }) => {

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

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

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.

1 Like

Thanks, It worked like a charm.