diff --git a/assets/src/js/listing_pages.js b/assets/src/js/listing_pages.js
index 151243b938..27bd8048a4 100644
--- a/assets/src/js/listing_pages.js
+++ b/assets/src/js/listing_pages.js
@@ -1,3 +1,5 @@
+const {__} = wp.i18n;
+
export const setupListingPages = () => {
// Setup behaviour for list/grid toggle.
const listViewToggle = document.querySelector('.list-view-toggle');
@@ -25,21 +27,30 @@ export const setupListingPages = () => {
return;
}
- // Functions and constants.
- const CATEGORY_FILTER = 'category';
+ const AVAILABLE_FILTERS = ['category', 'post-type'];
- const updateFilter = event => {
- const {target: {id, value}} = event;
+ const updateFilters = () => {
const newUrl = new URL(window.location.href.split('/page/')[0]);
- if (value) {
- newUrl.searchParams.set(id, value);
- } else {
- newUrl.searchParams.delete(id);
- }
+ AVAILABLE_FILTERS.forEach(filter => {
+ const {value} = document.getElementById(filter);
+ if (value) {
+ newUrl.searchParams.set(filter, value);
+ } else {
+ newUrl.searchParams.delete(filter);
+ }
+ });
+
window.location.href = newUrl.href;
};
- // Category filter.
- document.getElementById(CATEGORY_FILTER).onchange = updateFilter;
+ document.getElementById('apply-filters').onclick = updateFilters;
+
+ // Add 'No posts found' text when needed.
+ if (!listingPageContent.querySelector('.wp-block-post-template')) {
+ const noPostsFound = document.createElement('p');
+ noPostsFound.classList.add('listing-page-no-posts-found');
+ noPostsFound.innerHTML = __('No posts found!', 'planet4-master-theme');
+ listingPageContent.appendChild(noPostsFound);
+ }
};
diff --git a/assets/src/scss/pages/_listing-page.scss b/assets/src/scss/pages/_listing-page.scss
index 6352601bcb..655126f67d 100644
--- a/assets/src/scss/pages/_listing-page.scss
+++ b/assets/src/scss/pages/_listing-page.scss
@@ -357,10 +357,37 @@
width: 100%;
.listing-page-select {
- width: 220px;
+ width: 100%;
+ margin-bottom: $sp-3;
+ }
- @include mobile-only {
- width: 100%;
+ .btn-primary {
+ width: 100%;
+ }
+
+ @include medium-and-up {
+ display: flex;
+
+ .listing-page-select {
+ margin-inline-end: $sp-3;
+ margin-bottom: 0;
+ width: 220px;
+ }
+
+ .btn-primary {
+ width: auto;
}
}
+
+ @include large-and-up {
+ .listing-page-select {
+ width: 300px;
+ }
+ }
+}
+
+.listing-page-no-posts-found {
+ text-align: center;
+ font-size: var(--font-size-m--font-family-primary);
+ padding-top: $sp-4;
}
diff --git a/functions.php b/functions.php
index 628436cba9..4781aeaa3c 100644
--- a/functions.php
+++ b/functions.php
@@ -521,20 +521,26 @@ function ($urls, $post_id) {
);
// Add filters to the News & Stories listing page.
-// Right now only "category" is available.
+// Right now only "category" and "post type" are available.
add_action(
'pre_get_posts',
function ($query): void {
if (!$query->is_main_query() || is_admin() || !is_home()) {
return;
}
+ // Category filter
$category_slug = isset($_GET['category']) ? $_GET['category'] : '';
$category = get_category_by_slug($category_slug);
- if (!$category || !get_posts(['post_type' => 'post', 'category' => $category->term_id])) {
- $query->set('category__in', []);
- } else {
- $query->set('category__in', [$category->term_id]);
- }
+ $query->set('category__in', $category ? [$category->term_id] : []);
+
+ // Post type filter
+ $post_type_slug = isset($_GET['post-type']) ? $_GET['post-type'] : '';
+ $post_type = get_term_by('slug', $post_type_slug, 'p4-page-type');
+ $query->set('tax_query', !$post_type ? [] : [[
+ 'taxonomy' => 'p4-page-type',
+ 'field' => 'term_id',
+ 'terms' => [$post_type->term_id],
+ ]]);
}
);
diff --git a/src/ListingPage.php b/src/ListingPage.php
index e6a2a379b1..35a009b06a 100644
--- a/src/ListingPage.php
+++ b/src/ListingPage.php
@@ -109,7 +109,7 @@ private function set_news_page_link(): void
/**
* Set the 'News & stories' page filters.
- * For now only the "category" one is available.
+ * For now only the "category" and "post types" are available.
*/
private function set_filters(): void
{
@@ -127,7 +127,10 @@ private function set_filters(): void
$categories[] = $cat;
}
$this->context['categories'] = $categories;
+ $this->context['post_types'] = get_terms(['taxonomy' => 'p4-page-type']);
+
$this->context['current_category'] = $_GET['category'] ?? '';
+ $this->context['current_post_type'] = $_GET['post-type'] ?? '';
}
/**
diff --git a/templates/listing-page-filters.twig b/templates/listing-page-filters.twig
index 4bbe13d58c..a2ca2718f3 100644
--- a/templates/listing-page-filters.twig
+++ b/templates/listing-page-filters.twig
@@ -14,4 +14,17 @@
{% endfor %}
+
+