How can I apply styling to individual pages?

Is it possible to apply unique styling to individual pages coming in from WP? Or is it all just set in the posts.js file?

for example - https://mentalgeek.vercel.app/connect/

I am trying to add a 3 column layout, but the image pushes the 2 columns above and below instead of displaying on the sides.

Do I need to create a new component or page in frontity to be able to accomplish individual page styling?

Hi @matthewbertweb

There’s a couple of approaches you could take here.

Firstly, in post.js you could conditionally check the value of state.router.link and return different content/layout depending on the value.

Alternatively, you could do that check in the index.js of your theme and render a different component depending on the value of state.router.link.

Hope this helps.

Thanks! I will look into that and see what I can do. I’m guessing I can use an if/else statement for something like that?

In the first case you could use if/else. In the second you could put it in the Switch:

<Main>
    <Switch>
      <Loading when={data.isFetching} />
      <List when={data.isArchive} />
      <CustomPage when={data.isPostType && state.router.link=='/specialpage/'} />
      <Post when={data.isPostType} />
      <PageError when={data.isError} />
    </Switch>
</Main>
1 Like

Oh wow, that looks much simpler than anything I would have attempted. Thank you! I will try it that way.

Wow, that solution was so easy! I was definitely expecting to have to do a lot more. Thank you for the help!

2 Likes

What if you would want to create it more like wp page themes? I cant see that the selected page theme is included in the state. Thought about doing the same conditional selection, but with some more reusable identifier than the page url.

Hi @bjerling

Welcome to the Frontity community. Do you mean like the WordPress template hierarchy?

If so, then WordPress in fact also uses the URL to determine which template to use. The “pretty permalink” is converted into query string parameters which WordPress uses to choose which template from the theme to use.

So the mechanism with Frontity isn’t really that much different, except that you choose the React component to use based on the “pretty permalink”, i.e. the URL you see in the browser address bar.

That said, Frontity does have some information in the state to help you choose different components. For example, the homepage will have the isHome property set to true in state.source.data, so you can check that to use a different component for your homepage from the component used for all the other pages in your theme.

When developing your site it’s worth keeping the console open and checking frontity.state.source to see what properties you’ve got available to use in the conditionals that you want to use.

Thanks :slight_smile:

I meant more like what @matthewbertweb asked about. But not hardcoding a slug/url as the condition, but rather a variable that comes from WP. Like the page template for example - which is kind of made for that in basic php WP. I couldnt find that variable in the API.

I want it to be possible for the CMS user to change between layouts for specific pages. :slight_smile:

I guess could just add an ACF setting for this, as I already have that set up. But wouldn’t it be more appropriate to use the regular page template option from the WP core?

Hi @bjerling

OK, I see what you mean. Page templates are associated with posts/pages in the postmeta table. See https://wordpress.stackexchange.com/questions/303125/where-is-custom-template-file-chosen-for-a-post-stored-in-the-db.

You will need to write a plugin or add a function to the theme’s functions.php file to add this information to the WP REST-API. See https://developer.wordpress.org/rest-api/extending-the-rest-api/modifying-responses/#adding-custom-fields-to-api-responses for more info.