How can I apply styling to individual pages?

🙋Get Help
1

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?

2

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.

3

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?

4

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
5

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

6

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

2 Likes
7

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.

8

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.

9

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?

10

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.

11

Hello @mburridge Thanks for the great info! i’m still unable to get this to work. Here is my index switch:

      <Loading when={data.isFetching} />

      <List when={data.isArchive} />

      <HomePage when={data.isHome} />

      <Page when={data.isPage} />

      <CustomPage when={data.isPage && state.router.link == "/test/"} />

      <Post when={data.isPostType} />

      <PageError when={data.isError} />

    </Switch>

Is there anything else necessary? I’ve created the page, imported to index and copied a regular pages template of with some minor changes, but nothing. I’m sure i’m missing something easy! Thanks for any help!

12

Hi @james.c.yarbrough

I think you need to swap these two lines around:

<Page when={data.isPage} />
<CustomPage when={data.isPage && state.router.link == "/test/"} />

When the data.isPage condition is met the switch doesn’t try any more conditions so the CustomPage line is never evaluated.

Let me know if this fixes things for you.

13

Brilliant Micheal! It’s working beautifully! Thank you so much for your hard work! I’m setting up a CPT with the aid of your tutorial and repo! Can’t wait to display this site i’ve been making! :slight_smile:

2 Likes
14

@mburridge Just a little follow up - here is the site! I used kasper’s aamodtgroup theme!

uptownrecords.eu

1 Like
15

Wow, great work @james.c.yarbrough. The site looks amazing! :ok_hand:

Please consider submitting it for inclusion in our showcases page.

1 Like
16

Thanks @mburridge. I submitted! :+1::+1::guitar::guitar:

2 Likes