Wordpress filter/sort posts on page

Question

Rookie question here. Although I'm not expecting a full working answer, any pointers ant hint would be more than welcome. I've been googleing for it for hours now :) Probably because I've never encountered it before and don't know the name/term.

Goal. I have a page with, say 100, event (posts). They have several categories, say movies, music, theatre. By default the page loads them all. (I think I'll add a pagination or lazy load later). To see them all by default, sorted on date, is fine. But now I would like to see only all the events that are movies (or a different category). It would be nice to render the possible categories as buttons on top or in the/a sidebar to filter/sort them.

The question: What approach and technique would you suggest? I would really like to avoid an extra plugin for just this. This mainly for learning.

Extra thoughts: My first thought was to make separate pages for each category. But in this case it would make for a bad solution. Other solution I thought of was to give each post a category css class and add a button to hide the div. But that would mean I always have to load ALL the events. And I get the feeling that might be a dirty fix. I've never worked with Ajax. would this be helpful? Or is there a out of the box Wordpress option I could call to, like pagination.

Answer 1

I think AJAX is the solution you are looking for. You can create an AJAX post/category filter combined with lazy loading or an AJAX load more button. You should check out these tutorials, I've found them very useful for multiple projects!

AJAX filter: https://rudrastyh.com/wordpress/ajax-post-filters.html

AJAX filters with load more button: https://rudrastyh.com/wordpress/ajax-load-more-with-filters.html