Hello!
I am currently trying to create a filter by Category button similar to the one shown in this image. I understand a bit of css and javascript and am just unsure where, how, and on what element I would make changes to make this possible.
Similarly having it automatically sort by most recent would be veery cool!
Thank you for your help and guidance.
Hello Cassidy,
Thanks for writing in!
You can utilize the Looper Provider All Terms, Dropdown and Button elements to design the Filter button. Then check out this video for your reference:
https://www.youtube.com/watch?v=611IwxrOz8E
Best Regards.
Hey thank you! That video was very helpful, as are the links - I’m close but missing some details.
Currently I have a column set as a looper provider
I’m using a dropdown instead of a button
But I am getting stuck on:
What dynamic to put under text -> primary on the button, to ensure each button in the looper shows a different categories name?
Or I can just create 6 buttons and name them uniquely, but either way I still am stuck on: What do I put in the url area after the question mark to pull up a category?
I see I can use this format:
But then what do I make the provider? the button itself? and then what would the consumer be?
Any guidance to help me get this last part finished would be appriciated. Thank you!
Hey Cassidy,
You can use Looper Provider All Terms:
And then in your Button element, use the {{dc:term:name}} to display the Category name:
If you want the button to be linked to a category archive, use {{dc:term:url}}:
If you want to do the same with the video, use ?cat_name={{dc:term:slug}}
For the Looper, you can use Looper Provider Query String with the URL parameter, category_name={{dc:url:param key="cat_name"}}:
Hope this helps.
Hey!
Thank you so much that was super helpful.
The categories are filling in the button loop link and name - but it doesn’t seem to be working?
It looks like it - but nothing updates when I use it?
Any ideas why?
On that same note, when I click on the category/sort button it refreshes the page and brings it up to the top - is there a way that when the page refreshes I can have it return to the section/part of the page where the user was before clicking the button?
Hey Cassidy,
Please provide us with your WP Access so we can check your Looper settings on the blog page. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Thanks.
Okay sounds good, thank you!
Hey Cassidy,
The Section with the “Recently on the blog” Headline will have a sort ID.
You will have this kind of structure:
The first Row element will only be displayed when the url parameter cat_name is not empty. This is where you have a Looper Query String “category_name=”{{dc:url:param key=“cat_name” fallback=""}}"&posts_per_page=-1&orderby={{dc:url:param key=“orderby” fallback=""}}&order={{dc:url:param key=“order” fallback=“desc”}}"
On the first visit on the page url /blog/, the “Row - All Items” will be displayed. And this is using Looper Query String “posts_per_page=-1&orderby={{dc:url:param key=“orderby” fallback=”"}}&order={{dc:url:param key=“order” fallback=“desc”}}" which will display all the items.
The button URL will be ?cat_name={{dc:term:slug}}#sort. It includes the #sort anchor so that when the page loads, it will go to that section automatically.
Hope this makes sense.
