Filtering Posts Inline by Category

🙋Get Help
1

They say a picture is worth a thousand words so I’ve attached a simple mockup of what I’m trying to achieve.

blog-ia
blog-ia1024×768 17.2 KB

Some relevant details. My category urls are like this:

"/category/insights/" -> this renders all posts of all categories
"/category/insights/news" -> renders posts categorized as news (categories are configured in WP)

I’ve started playing with the list component and have added the category links that you see in the image at the top by just mapping over an array that I added to my frontity settings file:

"blogmenu": [
        [
          "All Stories",
          "/"
        ],
        [
          "News",
          "/category/insights/news/"
        ],
        [
          "Views",
          "/category/insights/views/"
        ],
        [
          "Features",
          "/category/insights/features"
        ],
        [
          "XRP",
          "/category/xrp"
        ]          
      ],

then in list.js

{state.theme.blogmenu.map(([name,link]) => (
    <Link link={link}>{name}</Link>
  ))}

This outputs the correct links and when you clink the links the posts change accordingly. Here are my questions:

  • How can I make it so that clicking the Load More Posts button loads ANOTHER 4 posts in addition to the 4 that are already showing. So basically concatenating the next set of posts to the ones currently showing? And with each subsequent click it loads another four and so on.

  • Also is it possible to not have the url change in the browser when the links are clicked?

I’m happy to keep iterating on this myself but if someone can point me in the right direction that would be helpful. Thanks!

3

I no longer need an answer to this question. If a moderator wants to delete the post that would be fine. Thanks!

4

Hi @sattley

Did you solve your issue? How did you manage to do it?
Your solution may be useful for other members of the community

It seems you were trying to apply an Infinite Scroll behavior to your pages. There’s a beta version available of a React hook that allows you to easily apply this behavior

Hope this helps