✨refactor: Improve resource filter templates and styles; enhance layout and dynamic taxonomy handling
This commit is contained in:
Keith Solomon
@@ -1,59 +1,36 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) { exit; } // Prevent direct access
|
||||
|
||||
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
|
||||
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
|
||||
$selected_taxonomies = get_option('content_filter_taxonomies', []); // Get selected taxonomies
|
||||
?>
|
||||
|
||||
<form class="px-4 sm:px-0" id="resource-filter">
|
||||
<!-- Search Field -->
|
||||
<!-- Search Field - Theme -->
|
||||
<div class="search-text">
|
||||
<input class="bg-[#F8F8F8] border-[#8B8B8B] border-2" type="text" id="search" name="search" placeholder="Search resources..."
|
||||
value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
|
||||
<button class="bg-[#3B65D4] text-white" type="submit">Search</button>
|
||||
<button type="reset" id="clear-search">×</button>
|
||||
<input class="bg-light border-secondary border-2 full-width" type="text" id="search" name="search" placeholder="Search..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
|
||||
<button class="bg-primary text-white" type="submit">Search</button>
|
||||
<button type="reset" class="bg-danger text-white" id="clear-search">×</button>
|
||||
</div>
|
||||
|
||||
<div class="search-tax">
|
||||
<!-- Resource Type Filters -->
|
||||
<div class="custom-dropdown">
|
||||
<button type="button" class="dropdown-toggle">Resource Type</button>
|
||||
<div class="dropdown-menu">
|
||||
<?php foreach ($resource_types as $type) : ?>
|
||||
<label>
|
||||
<input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>" <?php echo
|
||||
(isset($_POST['resource_type']) && in_array($type->slug, (array) $_POST['resource_type'])) ? 'checked' :
|
||||
'';
|
||||
?>>
|
||||
<?php echo esc_html($type->name); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
foreach ($selected_taxonomies as $taxonomy):
|
||||
$terms = get_terms(['taxonomy' => $taxonomy, 'hide_empty' => true]);
|
||||
$taxonomy_obj = get_taxonomy($taxonomy);
|
||||
|
||||
<!-- Resource Subject Filters -->
|
||||
<div class="custom-dropdown">
|
||||
<button type="button" class="dropdown-toggle">Resource Subject</button>
|
||||
<div class="dropdown-menu">
|
||||
<?php foreach ($resource_subjects as $subject) : ?>
|
||||
<label>
|
||||
<input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>" <?php echo
|
||||
(isset($_POST['resource_subject']) && in_array($subject->slug, (array) $_POST['resource_subject'])) ?
|
||||
'checked' : ''; ?>>
|
||||
<?php echo esc_html($subject->name); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sort Container -->
|
||||
<div id="sort-container" class="flex items-start">
|
||||
<label class="pt-2" for="sort-order">Sort:</label>
|
||||
<select class="ml-2 bg-white border-[#CCC] border-2" id="sort-order">
|
||||
<option value="date_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'date_desc'); ?>>Newest First</option>
|
||||
<option value="date_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'date_asc'); ?>>Oldest First</option>
|
||||
<option value="title_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'title_asc'); ?>>Title (A-Z)</option>
|
||||
<option value="title_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'title_desc'); ?>>Title (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
if (!empty($terms) && !empty($taxonomy_obj)): ?>
|
||||
<div class="custom-dropdown">
|
||||
<button type="button" class="dropdown-toggle"><?php echo esc_html($taxonomy_obj->labels->singular_name); ?></button>
|
||||
<div class="dropdown-menu">
|
||||
<?php foreach ($terms as $term): ?>
|
||||
<label>
|
||||
<input type="checkbox" name="<?php echo esc_attr($taxonomy); ?>[]" value="<?php echo esc_attr($term->slug); ?>" <?php echo (isset($_POST[$taxonomy]) && in_array($term->slug, (array) $_POST[$taxonomy])) ? 'checked' : ''; ?>>
|
||||
<?php echo esc_html($term->name); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -16,37 +16,36 @@ if (!empty($_POST['search'])) {
|
||||
];
|
||||
}
|
||||
|
||||
// Handle the "Resource Type" filter
|
||||
if (!empty($_POST['resource_type'])) {
|
||||
$selected_types = is_array($_POST['resource_type']) ? $_POST['resource_type'] : [$_POST['resource_type']];
|
||||
$filters[] = [
|
||||
'type' => 'resource_type',
|
||||
'value' => esc_html(implode(',', $selected_types)),
|
||||
'label' => '<strong>Type:</strong> ' . esc_html(implode(', ', $selected_types))
|
||||
];
|
||||
}
|
||||
// Get selected taxonomies from admin settings
|
||||
$selectedTaxonomies = get_option('content_filter_taxonomies', []);
|
||||
|
||||
// Handle the "Resource Subject" filter
|
||||
if (!empty($_POST['resource_subject'])) {
|
||||
$selected_subjects = is_array($_POST['resource_subject']) ? $_POST['resource_subject'] : [$_POST['resource_subject']];
|
||||
$filters[] = [
|
||||
'type' => 'resource_subject',
|
||||
'value' => esc_html(implode(',', $selected_subjects)),
|
||||
'label' => '<strong>Subject:</strong> ' . esc_html(implode(', ', $selected_subjects))
|
||||
];
|
||||
// Handle dynamic taxonomy filters
|
||||
foreach ($selectedTaxonomies as $taxonomy) {
|
||||
if (!empty($_POST[$taxonomy])) {
|
||||
$selectedTerms = is_array($_POST[$taxonomy]) ? $_POST[$taxonomy] : [$_POST[$taxonomy]];
|
||||
$taxonomyObj = get_taxonomy($taxonomy);
|
||||
|
||||
if ($taxonomyObj) {
|
||||
$filters[] = [
|
||||
'type' => $taxonomy,
|
||||
'value' => esc_html(implode(',', $selectedTerms)),
|
||||
'label' => '<strong>' . esc_html($taxonomyObj->labels->singular_name) . ':</strong> ' . esc_html(implode(', ', $selectedTerms))
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Display filters as HTML
|
||||
$filter_html = '';
|
||||
$filterHtml = '';
|
||||
if (!empty($filters)) {
|
||||
foreach ($filters as $filter) {
|
||||
$filter_html .= '<span class="filter-item" data-type="' . esc_attr($filter['type']) . '" data-value="' . esc_attr($filter['value']) . '">'
|
||||
$filterHtml .= '<span class="filter-item" data-type="' . esc_attr($filter['type']) . '" data-value="' . esc_attr($filter['value']) . '">'
|
||||
. $filter['label']
|
||||
. ' <button class="remove-filter" aria-label="Remove ' . esc_attr($filter['type']) . '">×</button>'
|
||||
. '</span> ';
|
||||
}
|
||||
} else {
|
||||
$filter_html = 'None';
|
||||
$filterHtml = 'None';
|
||||
}
|
||||
?>
|
||||
|
||||
@@ -57,19 +56,19 @@ if (!empty($filters)) {
|
||||
<div class="sort-filters flex items-start gap-4">
|
||||
<!-- Sort Container -->
|
||||
<div id="sort-container">
|
||||
<label for="sort-order">Sort by:</label>
|
||||
<select id="sort-order">
|
||||
<option value="date_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : '', 'date_desc'); ?>>Newest First</option>
|
||||
<option value="date_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : '', 'date_asc'); ?>>Oldest First</option>
|
||||
<option value="title_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : '', 'title_asc'); ?>>Title (A-Z)</option>
|
||||
<option value="title_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : '', 'title_desc'); ?>>Title (Z-A)</option>
|
||||
<label for="sortOrder">Sort by:</label>
|
||||
<select id="sortOrder">
|
||||
<option value="date_desc" <?php selected(isset($_GET['sortOrder']) ? $_GET['sortOrder'] : '', 'date_desc'); ?>>Newest First</option>
|
||||
<option value="date_asc" <?php selected(isset($_GET['sortOrder']) ? $_GET['sortOrder'] : '', 'date_asc'); ?>>Oldest First</option>
|
||||
<option value="title_asc" <?php selected(isset($_GET['sortOrder']) ? $_GET['sortOrder'] : '', 'title_asc'); ?>>Title (A-Z)</option>
|
||||
<option value="title_desc" <?php selected(isset($_GET['sortOrder']) ? $_GET['sortOrder'] : '', 'title_desc'); ?>>Title (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Applied Filters -->
|
||||
<p>
|
||||
<strong>Filters applied:</strong><br>
|
||||
<span id="applied-filters"><?php echo $filter_html; ?></span>
|
||||
<span id="applied-filters"><?php echo $filterHtml; ?></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +1,38 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) { exit; } // Prevent direct access
|
||||
|
||||
// Define dynamic post type and taxonomy
|
||||
// $postType = isset($postType) ? $postType : 'post'; // Default to 'post' if not set
|
||||
// $taxonomy = isset($taxonomy) ? $taxonomy : 'category'; // Default to 'category' if not set
|
||||
|
||||
if (!empty($resources)) :
|
||||
foreach ($resources as $resource) :
|
||||
$postID = $resource->ID;
|
||||
$postTitle = get_the_title($postID);
|
||||
$postLink = get_permalink($postID);
|
||||
$terms = get_the_terms($postID, 'resource_type');
|
||||
$postType = get_post_type($postID);
|
||||
$terms = get_the_terms($postID, $taxonomy);
|
||||
|
||||
$img = has_post_thumbnail($postID) ? get_the_post_thumbnail_url($postID, 'full') : get_field('admin', 'option')['imgDefault']['url'] ?? '';
|
||||
?>
|
||||
<div class="px-4 sm:px-0">
|
||||
<?php if (has_post_thumbnail($postID)) : ?>
|
||||
<div class="block bg-[#F3F3F3] h-[32rem]">
|
||||
<a href="<?php echo esc_url($postLink); ?>">
|
||||
<img src="<?php echo esc_url(get_the_post_thumbnail_url($postID)); ?>" alt="<?php echo esc_attr($postTitle); ?>"
|
||||
class="flex justify-center items-center w-full h-full object-contain">
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="block mb-4">
|
||||
<a href="<?php echo esc_url($postLink); ?>">
|
||||
<img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr($postTitle); ?>" class="flex justify-center items-center w-full h-full object-contain">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="text-sm font-thin uppercase">
|
||||
<?php echo $terms ? esc_html(strtolower($terms[0]->name)) : ''; ?>
|
||||
<p class="text-sm font-thin uppercase px-2 mb-1!">
|
||||
Post Type: <?php echo $postType; ?>
|
||||
</p>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex px-2">
|
||||
<div>
|
||||
<h3 class="text-lg"><a class="" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center ml-auto pr-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
|
||||
<div class="flex ml-auto mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 ml-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -36,5 +40,5 @@ if (!empty($resources)) :
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<p>No resources found.</p>
|
||||
<p>No results.</p>
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
border: 1px solid #ccc;
|
||||
border-right: none;
|
||||
font-size: 1rem;
|
||||
padding: .5rem;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
#resource-results {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
|
||||
Reference in New Issue
Block a user