Hi there,
We want to have a filters on the side and group the post items by their category name (screenshot 'listing-page.jpg').
I have 2 Custom Taxonomies, one is 'Category'(the heading above the post items) and the other is 'Topics' (filter box)
I know this can be achieve with 2 views (parent and child view), but would not want to use this as we want to have some filters (checkboxes) to filter the post items.
I was looking at these 2 articles, using shortcode to achieve this, but it still doesn't work for me.
https://toolset.com/forums/topic/group-results-by-year-and-month-using-date-field/
https://toolset.com/forums/topic/grouping-items-of-the-same-title/
Below are the code that I have place in my functions.php file:
add_shortcode('heading', 'my_heading');
function my_heading($atts, $content = '') {
static $myterm = null;
$condition = $atts['condition'];
$value = $atts['value'];
switch ($condition) {
case 'myterm':
if ($$condition != $value) {
$$condition = $value;
return $content;
}
break;
}
return '';
}
Below is the code in my toolset view:
[heading condition="myterm" value='[wpv-post-taxonomy type="news-category" format="name"]']
<h2>[wpv-post-taxonomy type="news-category" format="name"]</h2>
[/heading]
<h3>[wpv-post-title]</h3>
Some are of the posts (that has the same category term) are grouped together and some are in a separate group (see screenshot attached "listing.png") or hidden link.
I am not sure what I am doing wrong, but is there a way to achieve that layout (screenshot 'listing-page.jpg') with the filter functionality?
Thank you!
Hi,
Thank you for contacting us and I'd be happy to assist.
Since you want to group the post items based on the 'Category' taxonomy, you'll have to use two views:
1. The parent view will be a taxonomy view that will cycle through all the terms in the 'Category' taxonomy.
2. The child view will be post view, which will be nested in the loop of the parent view, and will show only the posts filtered by the current 'Category' term.
The filter for the 'Topics' taxonomy can still work, but the limitation will be that you won't be able to use the AJAX-based search results and the page will need to be refreshed, with each search.
You'll add the 'Topics' taxonomy search filter in the child view and then show the search results and the search form separately.
As only the search results will be needed inside the parent view, you'll use this shortcode to nest the child view:
[wpv-view name="view-to-show-posts" view_display="layout"]
And in the sidebar where you'd like to show the search form, you'll use the shortcode:
[wpv-form-view name="view-to-show-posts" target_id="self"]
Note: Please replace "view-to-show-posts" with the actual slug of your child view.
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
Thank you Waqar!
With the filter, is there a way to remove the 'Category' Term heading when there are no posts found after search is clicked.
For example:
hidden link
When I filter to show only 'Topic 1' posts, the heading 'Category 2' doesn't have any posts found, is there a way to remove that 'Category 2' heading?
Thank you!
Thanks for the update and glad that it worked.
To hide the heading for the category with no results, you'll need to add some custom CSS and/or JS code.
Can you please share temporary admin login details, so that I can see exactly how these two views are set up?
I'll be in a better position to guide you with the next steps.
Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.
Thank you for sharing the admin access.
Reviewing the structure of the two views, I made these few changes:
1. In the loop item content of the "News Listing with filters - Parent" view, I wrapped the content into a special div container, which includes the class name with the current "News Categories" term's ID ( child-container-[wpv-taxonomy-id] ).
Also, I passed on this special class name in the shortcode attribute "termid", in the child view's shortcode:
<div class="child-container child-container-[wpv-taxonomy-id]">
<h2>[wpv-taxonomy-title]</h2>
[wpv-view name="news-listing-with-filters-child" view_display="layout" termid="child-container-[wpv-taxonomy-id]"]
</div>
These steps will help in targeting the output of a specific term's container, through custom CSS, when no items are found under it.
2. In the Loop Editor of the "News Listing with filters - Child" view, I introduced some custom CSS code that hides the term's special container, when no items are found for it. As it is placed within the '[wpv-no-items-found]...[wpv-no-items-found]' tags, it will only be applied when no posts are found through the child view:
<style>.[wpv-attribute name="termid"] { display: none; }</style>
I hope this helps and please let me know if any step is not clear.
Thank you Waqar! Your solution works.
I just have one question. On the child view, where you have the css code, what does [wpv-attribute[ mean or what shortcode is it and what does it display?
<style>.[wpv-attribute name="termid"] { display: none; }</style>
Thanks!
Thanks for the update and glad that it works.
The 'wpv-attribute' shortcode is used to display the value passed through the attribute in the view's shortcode:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-attribute
Here is a useful guide on the topic:
https://toolset.com/documentation/legacy-features/views-plugin/passing-arguments-to-views/#accessing-the-arguments
For example, suppose that I need to pass on a year value '2021' in the view. I can pass it in the view's shortcode, using any attribute name, like 'year':
[wpv-view name="view-name" year="2021"]
Next, inside the view, I can access that passed value, using the 'wpv-attribute' shortcode, like this:
[wpv-attribute name="year"]
As a result, this shortcode will output '2021'.
Great! Thank you for the clarification, I really appreciate it.
My issue is resolved now.
Thank you!
