Why not using state.source.homepage and state.source.postsPage to change the homepage to /blog?
Both the homepage and /blog are pointing to latest posts. I thought that it wasnât possible just with state.source.homepage and state.source.postsPage settings because they have to match the WP Settings, and as far as I know you can only point the latest posts to another url if you set the homepage to a static page.
Oh, I see 
Thatâs right. I just copied your snipped and it works.
Could you please clarify this?
âŠyou may need to change your conditions inside
index.jsin order to prevent duplicating the content.
Glad it works 
Sure! As you are reusing the post archive handler, the prop isArchive is going to be passed to /blog url. So in the src/components/index.js itâs going to be matching two conditions, both data.isBlogList and data.isArchive:
<Content>
{(data.isFetching && <Loading />) ||
(data.isBlogList && <BlogList />) ||
(data.isArchive && <List />) ||
(data.isPostType && <Post />) ||
(data.is404 && <Page404 />)}
</Content>
What I meant is just that you have to be careful to load just the <BlogList /> component, so you donât get your content duplicated.
3 Likes
Hi, when I put the handler for my custom page. But when I click on the URL, itâs reloading the page as for sure its redirection to a custom page. Is there any way that we donât get the reload effect and get the page in front of us. Like in case of Menus, when we click on any of the menu, the page does not get reloaded instead it only fetch the data of that page.
hereâs our website url:
http://app.moosaconsulting.com/
Please check by clicking on strategy under section Who We Work With section.
Cheers,
I added the custom page but when I click on that link I am getting reLoad effect. But when I click on nav-menu link it just loads the body of the page not reload the whole page? Can I do the same for my custom page? Is there any suggestion for this?
Thanks
Hey @hammad, I think you are not using the <Link> component for those links, which internally uses actions.router.set(). Check it out!
3 Likes
yeah, I have corrected an hour ago after reading the doc.
btw A ton of thanks for your response.
3 Likes
Hi there,
I have to add different custom pages to my website so every time I have to add a custom handler to add my page to chakra-theme. Is it possible to create my custom posts on WordPress with all applied styles and then load them dynamically from WordPress?
Or I have to style the post/page in frontity again?
@hammad, I think you should use gutenberg blocks. Adding more styles in the content has usually been an anti pattern in WordPress, I think.
By the way, the other day I realized that there is another way to add a custom, non-WordPress page to Frontity.
Instead of creating a custom handler, like this:
const signUpHandler = {
pattern: "/sign-up/",
func: ({ state }) => {
state.source.data["/sign-up/"].isSignUp = true;
}
}
You can add the data to the state:
const myPackage = {
state: {
source: {
data: {
"/sign-up/": {
isReady: true,
isFetching: false,
isSignUp: true
}
}
}
}
}
actions.source.fetch("/sign-up") wonât do the fetch because isReady is true.
The only case where it wouldnât work is if someone does actions.source.fetch("/sign-up", { force: true }) but that should never happen with a custom page like this.
3 Likes
Can someone help me with adding a custom page to the frontity project.
I added the following âŠ
const signUpHandler = {
pattern: "/signup/",
func: ({ route, state }) => {
Object.assign(state.source.data[route], {
type: "page",
isSignUp: true,
});
},
};
âŠ
actions: {
theme: {
actions: {
init: ({ libraries }) => {
libraries.source.handlers.push(signUpHandler);
},
},
beforeSSR: before,
beforeCSR: before,
toggleMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = !state.theme.isMobileMenuOpen;
},
closeMobileMenu: ({ state }) => {
state.theme.isMobileMenuOpen = false;
},
},
},
âŠ
frontity.settings
["Sign up", "/signup/"],
âŠ
signup.js
import React, { useEffect } from "react";
//import { connect, styled } from "frontity";
const Signup = () => {
return (
<div>
<h2>Sign up Page</h2>
</div>
);
};
export default Signup;
âŠ
theme index.js
<Switch>
<Signup when={data.isSignUp} />
<Loading when={data.isFetching} />
<List when={data.isArchive} />
<Post when={data.isPostType} />
<PageError when={data.isError} />
âŠ
I keep getting 404 error. and react_devtools_backend.js:2273 ServerError: post type from endpoints âposts,pages,mediaâ with slug âsignupâ not found
Any guidance is much appreciated.
I think you forgot to add a priority to the handler. For example priority: 10.
By the way, instead of a handler, you can try adding that data to the state:
const myPackage = {
state: {
source: {
data: {
"/signup/": {
isReady: true,
isFetching: false,
isSignUp: true,
},
},
},
},
};
Let me know if that works
3 Likes
Yes adding the priority:10 to the handler fixed it!!! And also I added the init wrong, if you see code above, I inserterted the init in actions.theme.actions.init whilst it should have been actions.theme.init⊠Thank you so much!!!
2 Likes
Hi ! I created a new route to custom component when I will call an external API using your code. I can get a listing without any problem. Now I want to fetch to a specific id to fetch to a new component
data: {
"/hello/:id": {
isReady: true,
isFetching: false,
isHello: true,
},
},
However it wonât work⊠any suggestion ?
If you want to use a pattern you need to create a handler:
const helloHandler = {
pattern: "/hello/:id",
func: ({ state, link, params }) => {
state.source.data[link].isReady = true;
state.source.data[link].isHello = true;
state.source.data[link].id = params.id;
},
};
And then add it to libraries.source.handlers.
Hello @luisherranz, I tried your solution but when I am typing any id I get a 404 page 
const helloHandler = {
pattern: "/hello/:id",
func: ({ state, link, params }) => {
state.source.data[link].isHello = true;
state.source.data[link].id = params.id;
},
};
And
packages: [
{
name: "@awsmin/f1",
state: {
theme: {
menu: [
["Nos occasions", "/"],
["L'atelier", "/category/nature/"],
["Nos services", "/category/travel/"],
["Qui sommes-nous", "/tag/japan/"],
["Actualités", "/about-us/"],
["Nous contacter", "/about-us/"],
],
featured: {
showOnList: false,
showOnPost: false,
},
},
},
actions: {
theme: {
init: ({ libraries }) => {
// Use html2react to process the <img> tags inside the content HTML.
// libraries.html2react.processors.push(image);
// Add the handler to wp-source.
libraries.source.handlers.push(helloHandler);
},
},
},
and my index.js I create a component with sample h1 at that time
<Switch>
<Loading when={data.isFetching} />
<List when={data.isArchive} />
<HomeScreen when={data.isHome} />
<VehicleScreen when={data.isOffers} />
<Entretien when={data.isEntretien} />
<Hello when={data.isHello} />
<Jobs when={data.isAwsmJobOpenings} />
<Page when={data.isPage} />
<Post when={data.isPostType} />
<PageError when={data.isError} />
</Switch>
1 Like
Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code
I use it, can fix this problem !
const profilePage = {
name: 'member',
priority: 1,
pattern: '/member/:user',
func: ({ state, link, params }) => {
state.source.data[link].isProfile = true
state.source.data[link].user = params.user
},
}
]
actions: {
actions: {
init: ({ libraries }) => {
libraries.source.handlers.push(profilePage)
},
},
theme: {
...
}