Using a static page as homepage display

🙋Get Help
1

Is there a way to set the front page to a specific wp page?

I tried changing it in the CMS, but the Frontity front page still renders the latest posts. Handles it as isArchive.

home

When I set a static homepage like that, I get this for “http://localhost:3000/”:
id: 45
isArchive: true
isFetching: false
isHome: true
isPostArchive: true
isPostTypeArchive: true
isReady: true
items: (2) [{…}, {…}]
link: “/”
page: 1
query: {}
route: “/”
total: 2
totalPages: 1

And a 404 for “http://localhost:3000/home”. Which is the original page url for the static page.

There is no error with the /home/ page or the default frontity start page when I dont use the static page as homepage display. Everything works fine then.

2

If this is not supported yet… Maybe I could create an element for isHome. Then fetch the page through wp page id. And finally update the state.router.link. Or am I missing something? :slight_smile:

3

Hi @bjerling

You’ve pretty much stumbled upon the solution yourself. As you can see from the properties that you listed above, when you’re on the homepage isHome is equal to true. So, you can create a component called, say, <Home> and then conditionally select it from the <Switch> in your theme’s index.js:

<Main>
    <Switch>
      <Loading when={data.isFetching} />
      <Home when={data.isHome} />
      <List when={data.isArchive} />
      <Post when={data.isPostType} />
      <PageError when={data.isError} />
    </Switch>
</Main>

Be aware that the order matters here. You will want to check for isHome == true before checking for isArchive == true or isPostType == true, for example. Just like any switch type statement, the first condition that resolves to true is the one that will execute.

4 Likes
4

The other thing you need to do is configure the homepage and postsPage in frontity.settings.js, something like:

{
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "http://mysite.com/wp-json",
          "homepage": "home",
          "postsPage": "news"
        }
      }
    }

Then the homepage won’t have the isArchive property anymore. See our docs for more info.

3 Likes
5

The other thing you need to do is configure the homepage and postsPage in frontity.settings.js , something like:

Ahh, thats what I missed. Thanks!

6

Cant really get that to work though. It works great with “postsPage”. But not with “homepage”.

I get an 500 Internal Server Error for the homepage - if I also set the same page in the WP.

If I dont set the page in WP, I get an 404 inside of the Frontity content container.

Is there an easy way to debug this?

7

Finally got it to work. I used the same template as for regular pages on top.
<Post when={data.isHome && data.isPostType} />

image

1 Like
8

hey @bjerling great to see that you got this working :blush: Thanks for your help @mburridge.

By the way @bjerling we would love to know more about what you are building. Can you share with the community what’s your project about?

9

I’m starting out with a simple art portfolio. https://mossbjerling.com/

Optimizing with “.webp” and “srcSet” right now. And trying to get the “source” attribute to serve the right images for my masonry grid - right now the srcset is determing size upon window width, rather than optimizing to the column size.

image

10

Hey @bjerling this looks so cool already :slight_smile:

Maybe it would be nice for a future iteration of the theme to create a custom post type “artwork” that includes the image but also some information such as the title, the year and the techniques (for example). So when you click on an image in the home page you go to the artwork page with the image and some information instead of opening to the source link of the image.

11

Yeah, I’m working on that in the background :slight_smile: Just wanted to throw something quick up first.

12

Great to hear this @bjerling Keep us posted with the progress!

13

any chance you could post an example of how you got this working? i’m very new to react and frontity and basically trying to do something similar. I want the home page to display all 4 pages as a single page website. Using Mars theme as the starting point but being so new i’m rather lost and with all the starter code.