Filter Blog Archive Based on Category (or some other way)

Hi Themeco Team,

I’m trying to set up a blog archive page that filters articles based on the Category set for posts. I currently have 15 child categories under 2 parent categories, which will be mirrored in the main navigation. The blog archive page is built using Loopers. I understand we’re unable to dynamically sort directly on the archive page; however, is there a way to load posts on the archive page based on the URL instead? So for example, if the URL is ‘mysite.com/blog/category-name’, the page will load only posts that are attached to the ‘category-name’ Category? Perhaps using Conditions?

If that won’t work, can you recommend another way to filter posts based on Category, besides creating 17+ different pages? I’m hoping to have just a single blog archive page that only loads content relevant to what the user is searching for to make managing the site easier.

Appreciate any help you can provide!

Hello @bartenderonduty,

Thanks for writing in!

Please be advised that the WordPress default blog index can be using this url: yoursite.com/blog/.
For each category archive, the WordPress default will be:

  • yoursite.com/category/{category-name-1}
  • yoursite.com/category/{category-name-2}
  • yoursite.com/category/{category-name-n}

When creating the Blog index, you do not need to use the Looper Provider because the page itself runs with the WordPress loop. You only need to have the Looper Consumer in any custom archive layout. If you did put a Looper Provider, you will have problems with the pagination which means that the Pagination element will not work properly.

On a normal page, you can run a Looper Provider and display all the post items. You can also sort or filter the post items according to category. You may have something like this: yoursite.com/the-page/ and this: yoursite.com/the-page/?category=category-name-1. Perhaps you can check out this video:

Hope this helps.

1 Like

Thank you for the quick response, @ruenel! I’ll test this out and get back to you with any issues I may encounter.

Hey @bartenderonduty,

Great and let us know how it goes.

Thank you.

Hi @ruenel,

Using a query string as shown in the video you provided reloads the entire page when a sorting button is clicked, which is not a very good user experience. Is there a way to dynamically sort the posts within the section without reloading the entire page?

Thank you!

Hello @bartenderonduty,

Regretfully there is no option at the moment, it would require custom development. I would suggest you please contact a developer who can assist you with your concerns or you can subscribe to One where customization questions are answered. Please note we don’t provide any custom development support. It is out of the support scope.

Alternatively, you can use our bundled plugin called Essential Grid to achieve the sorting and filters.

Thanks for understanding

Hi Themeco Team,

I followed the instructions @ruenel provided and am still running into issues. And unfortunately, the video he shared only covers how to create a query that arranges posts into ascending/descending order.

The specific issue I’m having is the URL parameters and/or query string are not recognizing the category. Are you able to provide an example of what the query string should look like if I wanted to use something like @ruenel’s sample URL (yoursite.com/the-page/?category=category-name-1) to pull pages attached to a specific category into a single page that’s using a Looper Provider/Consumer?

Appreciate any additional help with this!

Hello @bartenderonduty,

You will have to run the Looper Provider Query String with the following query: post_type="post"&category_name={{dc:url:param key="category" fallback="all"}}

Your buttons will have the url: ?category=category-name-1. Again, this method will reload the page as you have seen in the video demonstration.

If you want something that will reload the page, you can use the Essential Grid (theme.co) as pointed out by @Prakash_s in his reply.

Best Regards.

Thank you, @ruenel.

Unfortunately this does not appear to work. Just to clarify, I’m looking to add links/buttons in the main header navigation that when clicked will take users to a looper page with a list of posts filtered by category. I have about 12 different topics and they’re segmented into categories. It’s OK if it reloads the page, I just need the content on the page to match the category that’s in the URL.

Can you make another suggestion to achieve this?

Hello @bartenderonduty,

The simplest way is to edit your main header navigation menu by going to Appearance > Menu and use the Categories.

In my example, I am using the Product Categories. You can use the Post Categories since you are going to display list of post by category. Each of the menu item when the user clicks on it will go to the following for example:

  • yoursite.com/category/music
  • yoursite.com/category/clothing
  • yoursite.com/category/clothing/t-shirts
  • yoursite.com/category/decor
  • yoursite.com/category/clothing/t-shirts

By the way, can you please send us the URL of the page so that we can check your page menu and your site?

Thank you.

OK, great. This is starting to make sense.

So what I’m understanding is if I use the Layout Builder and apply the template to the Archive page, I don’t need to use a Looper Provider and the archive will only load the categories in the URL, correct?

If so, whats the best way to increase the number of posts that are displaying on the page? Looks like it’s maxing out at 10.

Hello @bartenderonduty,

To increase the number of post items, you can go to Settings > Reading > Blog pages show at most and increase the default 10 items value.

Best Regards.

Thank you. I appreciate your help.

Hello @bartenderonduty,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.