How to remove category prefix from category URLs?

[cobra]

Hey everyone,

is it possible to remove the category prefix from my URLs (for category archives)? I know it’s possible to set state.source.categoryBase, but I would like to remove it completely. Background is that I use Yoast to remove the prefix from the category pages. If I leave categoryBase empty, it says post type from endpoints "posts,pages,media" with slug "mycategory" not found.

Thank you!

[SantosGuillamot]

Hey @cobra,

The problem you are finding is that once you are not using categoryBase at all, the url of your categories are matching the pattern "/(.*)?/:slug" , which is assigned to the postType handler.

You could try to create a new handler, at the index.js of your theme, with the same pattern but a higher priority where you try the function of the category handler and if it returns an error try the postType. This means it will make a REST API call to check if that slug exists as a category and if not, make the REST API calls for postType. It should be something similar to this:

import Theme from "./components";
import image from "@frontity/html2react/processors/image";

const newHandler = {
  name: "categoryOrPostType",
  priority: 19,
  pattern: "/(.*)?/:slug", 
  func: async ({ route, params, state, libraries }) => {
    // 1. try with category.
    try {
      const category = libraries.source.handlers.find(
        handler => handler.name == "category"
      );
      await category.func({ route, params, state, libraries });
    } catch (e) {
      // It's not a category
      const postType = libraries.source.handlers.find(
        handler => handler.name == "post type"
      );
      await postType.func({ route, params, state, libraries });
    }
  }
};
const marsTheme = {
  name: "@frontity/mars-theme",
  roots: { ... },
  state: { ... },
  actions: { ... },
  libraries: {
    source: {
      handlers: [newHandler]
    },
    ...
  }
};
export default marsTheme;

Please, let us know if you finally make it work or if there’s anything else where we can help.

[e.j.a.brett]

I just tried implementing this and noticed an error with your example code. Unlike the taxonomy handler, which can accept the prop route (https://github.com/frontity/frontity/blob/83c5eadb4dffc6275fe4d93b8d379c21449a2727/packages/wp-source/src/libraries/handlers/taxonomy.ts#L21), the postType handler does not support this and expects a link param only (https://github.com/frontity/frontity/blob/83c5eadb4dffc6275fe4d93b8d379c21449a2727/packages/wp-source/src/libraries/handlers/postType.ts#L9).

The result is the categories working but postTypes failing.

My corrected snippet would be (note: link: route):

import Theme from "./components";
import image from "@frontity/html2react/processors/image";

const newHandler = {
  name: "categoryOrPostType",
  priority: 19,
  pattern: "/(.*)?/:slug", 
  func: async ({ route, params, state, libraries }) => {
    // 1. try with category.
    try {
      const category = libraries.source.handlers.find(
        handler => handler.name == "category"
      );
      await category.func({ route, params, state, libraries });
    } catch (e) {
      // It's not a category
      const postType = libraries.source.handlers.find(
        handler => handler.name == "post type"
      );
      await postType.func({ link: route, params, state, libraries });
    }
  }
};
const marsTheme = {
  name: "@frontity/mars-theme",
  roots: { ... },
  state: { ... },
  actions: { ... },
  libraries: {
    source: {
      handlers: [newHandler]
    },
    ...
  }
};
export default marsTheme;

[e.j.a.brett]

A further update on this. If you set the priority of this handler to 19 it will override the tag and author endpoints and give you a 404. If you set it to 30 all should run smoothly.

[shehab]

Thanks for your help, however where exactly in the file should i add this code or replace?

And one last question, if i am using another theme, what to change exactly in the code? i will use Chakra theme.

[e.j.a.brett]

You can follow Santos’ instructions at the top and place it in your index.js of your theme.