Frontity is great at fetching data from WordPress based on the current URL in state.router.link. This requires virtually no intervention on the part of the developer and just works – it’s one of the great strengths of Frontity.

However, if the developer wants to display data in their site that isn’t linked to the current URL then a bit more work is required on their part. Why might this be done? Well, one possible example might be a ‘magazine’ style site where the homepage would feature a number of category headings with posts from that category listed underneath.

In this episode of Frontity Talks we demonstrate how to achieve this with Frontity. We first show you how to fetch the required data with the ‘beforeSSR’ lifecycle action. Then, with some helper functions written in JavaScript and a custom React component, we show you how to structure the data and then render it to the screen.

In an unplanned section we embark on some live coding to then re-order the categories on the homepage, and luckily we manage to do it – phew! 😅

Check out the video to learn how to add this kind of functionality to your WordPress site using JavaScript, React and Frontity.

Time poor? Jump straight to the part of the video that interests you:

00:54 Introducing the topic
03:16 The demo project
04:26 Outlining the problem
07:42 Outlining the solution
09:48 Using beforeSSR
16:16 Processing the data
26:39 Summary of the three steps
28:32 Ordering the categories
40:22 Wrap-up and summary

Links referenced in the video

Demo: Widget Posts per Category

We hope you enjoy this episode of Frontity Talks and that you find it useful. If you want to see any particular Frontity related topic covered then please suggest it in the video comments or use the hashtag #AskFrontity on Twitter.

If you’ve missed any of the earlier episodes of Frontity Talks and want to catch up, you can find them all in this Youtube playlist.

Don’t forget to subscribe to our channel and tap the notification bell 🔔 to get notified when new videos are out!

Comments? Suggestions? Join the conversation here.