How to edit @frontity/mars-theme to achieve categorized widgets in Homepage?

How to edit @frontity/mars-theme to achieve categorized widgets in Homepage?

Hello @kabeer.shefy , welcome to Frontity

Could you ellaborate a bit more what do you mean by “achieve categorized widgets in Homepage”?

Do you have any example that we could take a look at? If you are trying to replicate something from a live WordPress site it would be really helpful if you could share the link and explain how it works now :slight_smile:

Hello Pablo , thank you for your response. here, i am sharing news website link. I need to achieve that kind of categorized news listing in home instead of just an archive listing.

Hi @kabeer.shefy,
As you have in the frontity.source all the info provided from the WP REST API you can “play” with that data to organize it in any form you need

Here’s an example of a HomePage with blocks showing 5 articles per category →
And here’s the code →

Hope this helps

1 Like

Thank You Juanma. you shed some Lights to my darkness! i am a newbie to web development especially react and that kind of stuff. anyway I will try to build a theme with frontity.


Do I understand correctly that if I go to the article not through the main page, but simply insert the url into the address bar, then all the pages that on the main page will be loaded into state

I’m just interested in optimizing such moments. we get by api the data that we don’t need right now.

Hello @prainua
you can use Conditional statetment to optimize state data in post page

beforeSSR: async ({ state, actions }) => {
        if ( === "/") {
          await Promise.all(
            Object.values(beforeSSRCategories).map((category) =>

That’s right, thanks @mehul.

Please note that if you do so, you also need to take care of those fetches on the client. More information in this post: