keith/WP_Content_Filter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Live filtering for type and subjuect fields

Browse Source
This commit is contained in:
Keith Solomon
2025-02-28 15:22:58 -06:00
parent af045bc64e
commit 2b1bb9f9e1
8 changed files with 264 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
CHANGELOG.md
View File

@@ -1,26 +1,42 @@
## Changelog
### 1.5.1 - 2025-02-13
# Changelog
## 1.5.3 - 2025-02-28
- Live filtering for type and subject
## 1.5.2 - 2025-02-13
- Bugfix for repo update feature
## 1.5.1 - 2025-02-13
- Fixed bug in filter removal functionality
### 1.5.0 - 2025-02-13
## 1.5.0 - 2025-02-13
- Added repo update feature
### 1.4.0 - 2025-02-13
## 1.4.0 - 2025-02-13
- Added admin configuration page
### 1.3.0 - 2025-02-12
## 1.3.0 - 2025-02-12
- Feature-complete for initial release
- Add pagination
- Add general reset button
- Add tag close functionality
### 1.2.0 - 2025-02-05
## 1.2.0 - 2025-02-05
- Name change to reflect future ability to filter any content, not just `resources`
- Add secondary search template
### 1.1.0 - 2025-02-05
## 1.1.0 - 2025-02-05
- Fully templated for use in any theme
- Added result sorting
### 1.0.0 - 2025-02-04
## 1.0.0 - 2025-02-04
- Initial release

28
README.md
View File

@@ -1,9 +1,11 @@
# Content Filter Plugin
## Brief Description
The Content Filter Plugin is a WordPress plugin designed to enhance content discoverability by allowing users to filter resources based on custom taxonomies such as resource type and subject. It provides a user-friendly interface for filtering and sorting resources, making it easier for visitors to find the content they need.
## Features
- **Customizable Filter Form**: Allows filtering by resource type, subject, and search terms.
- **AJAX-Powered Filtering**: Provides a seamless user experience with instant filtering without page reloads.
- **Responsive Design**: Ensures the filter form and results look great on all devices.
@@ -12,23 +14,29 @@ The Content Filter Plugin is a WordPress plugin designed to enhance content disc
- **Summary Display**: Shows the number of resources and applied filters dynamically.
## Installation
1. Clone this repo or download the plugin files and place them in the `wp-content/plugins/resource-filter` directory.
2. Log in to your WordPress admin dashboard.
3. Navigate to **Plugins** > **Installed Plugins**.
4. Activate the **Content Filter** plugin.
## Usage
To use the plugin, add the `[resource_filter]` shortcode to any page or post where you want the filter form to appear. The plugin supports two types of forms:
- **Default Form**: Use `[resource_filter]` for the full filter form with search, resource type, and subject filters.
- **Homepage/Secondary Form**: Use `[resource_filter type="homepage"]` for a simplified form suitable for the homepage.
### Example
Add one of the following shortcodes to your page or post content where you want the filter form to appear:
`[resource_filter]` or `[resource_filter type="homepage"]`
## Configuration
The plugin is designed to work out of the box with minimal configuration. However, you can customize the following:
- **Templates**: Override the default templates and styles by placing your custom versions in your theme's `resource-filter` directory. You will need to add `"./resource-filter/**/*.{php,vue,js,cjs}",` to the `content` object in your `tailwind-config.js` file to compile the custom styles.
- **Template Files**:
- `filter-form.php` - Main form template
@@ -40,6 +48,7 @@ The plugin is designed to work out of the box with minimal configuration. Howeve
- **Taxonomies**: Ensure your WordPress site has the `resource_type` and `resource_subject` taxonomies set up for the `resource` post type.
## Roadmap
- ~~Repo updates~~
- ~~Admin configuration page~~
- ~~tag close functionality~~
@@ -47,40 +56,59 @@ The plugin is designed to work out of the box with minimal configuration. Howeve
- ~~pagination~~
## Changelog
### 1.5.3 - 2025-02-28
- Live filtering for type and subject
### 1.5.2 - 2025-02-13
- Bugfix for repo update feature
### 1.5.1 - 2025-02-13
- Fixed bug in filter removal functionality
### 1.5.0 - 2025-02-13
- Added repo update feature
### 1.4.0 - 2025-02-13
- Added admin configuration page
### 1.3.0 - 2025-02-12
- Feature-complete for initial release
- Add pagination
- Add general reset button
- Add tag close functionality
### 1.2.0 - 2025-02-05
- Name change to reflect future ability to filter any content, not just `resources`
- Add secondary search template
### 1.1.0 - 2025-02-05
- Fully templated for use in any theme
- Added result sorting
### 1.0.0 - 2025-02-04
- Initial release
## License
This plugin is licensed under the GNU General Public License v2 or later. See the [LICENSE](LICENSE) file for more details.
## Acknowledgements
- **Author**: Keith Solomon
- **Contributors**: Open to contributions from the community.
## Contribution Guidelines
We welcome contributions! If you'd like to contribute to the Content Filter Plugin, please follow these steps:
1. Fork the repository.

1
assets/script-bak.js
View File

@@ -134,7 +134,6 @@ jQuery(document).ready(function ($) {
triggerFiltering();
});
// Handle pagination click
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();

138
assets/script.js
View File

@@ -10,38 +10,19 @@ jQuery(document).ready(function ($) {
let searchTerm = $('#search').val();
let appliedFilters = [];
let formData = {
action: 'filter_resources',
nonce: resourceFilterAjax.nonce,
search: searchTerm,
paged: paged,
sort_order: $('#sort-order').val(),
taxonomies: {}, // Store selected taxonomy terms
};
let selectedTypes = $('input[name="resource_type[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
// Dynamically handle all taxonomy inputs
$('.taxonomy-filter').each(function () {
let taxonomy = $(this).data('taxonomy');
let selectedTerms = $(this).find('input:checked').map(function () {
return this.value;
}).get();
let selectedSubjects = $('input[name="resource_subject[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
if (selectedTerms.length > 0) {
formData.taxonomies[taxonomy] = selectedTerms;
// Add to applied filters
selectedTerms.forEach(function (term) {
appliedFilters.push(
`<span class="filter-item" data-type="taxonomy" data-taxonomy="${taxonomy}" data-value="${term}">
<strong>${taxonomy}:</strong> ${term}
<button class="remove-filter" aria-label="Remove ${taxonomy} ${term}">×</button>
</span>`
);
});
}
});
// Include search term in applied filters
// Search Term
if (searchTerm) {
appliedFilters.push(
`<span class="filter-item" data-type="search" data-value="${searchTerm}">
@@ -51,13 +32,60 @@ jQuery(document).ready(function ($) {
);
}
// Update "Filters Used" section
$('#applied-filters').html(appliedFilters.length ? appliedFilters.join(' ') : 'None');
// Resource Types
$('input[name="resource_type[]"]:checked').each(function () {
const slug = $(this).val(); // Get the slug
const name = $(this).closest('label').text().trim(); // Get the name
appliedFilters.push(
`<span class="filter-item" data-type="resource_type" data-value="${slug}">
<strong>Type:</strong> ${name}
<button class="remove-filter" aria-label="Remove Type ${name}">×</button>
</span>`
);
});
// Resource Subjects
selectedSubjects.forEach(function (subject) {
appliedFilters.push(
`<span class="filter-item" data-type="resource_subject" data-value="${subject}">
<strong>Subject:</strong> ${subject}
<button class="remove-filter" aria-label="Remove Subject ${subject}">×</button>
</span>`
);
});
$('#applied-filters').html(
appliedFilters.length ? appliedFilters.join(' ') : 'None'
);
let formData = {
action: 'filter_resources',
nonce: resourceFilterAjax.nonce,
search: searchTerm,
paged: paged,
sort_order: $('#sort-order').val(),
resource_type: $('input[name="resource_type[]"]:checked')
.map(function () {
return this.value;
})
.get(),
resource_subject: $('input[name="resource_subject[]"]:checked')
.map(function () {
return this.value;
})
.get(),
};
console.log(formData);
// Perform AJAX request
$.post(resourceFilterAjax.ajaxurl, formData, function (response) {
response = JSON.parse(response);
console.log(response);
$('#resource-results').html(response.html);
$('#result-count').text(response.count || 0);
@@ -73,11 +101,27 @@ jQuery(document).ready(function ($) {
/**
* Handle form submission for filtering resources.
*/
$('#resource-filter','#homepage-filter').on('submit', function (e) {
$('#homepage-filter').on('submit', function (e) {
e.preventDefault();
triggerFiltering(1); // Start at page 1 on new form submission
});
// Handle sort order change
$('#sort-order').on('change', function () {
triggerFiltering();
});
// Trigger filtering when dropdowns or checkboxes change
$('#resource-filter select, #resource-filter input[type="checkbox"]').on('change', function () {
triggerFiltering(1);
});
// Allow the search field to be submitted manually
$('#resource-filter').on('submit', function (e) {
e.preventDefault();
triggerFiltering(1);
});
/**
* Handle pagination link clicks.
*/
@@ -112,3 +156,31 @@ jQuery(document).ready(function ($) {
triggerFiltering(1); // Refresh results starting at page 1
});
});
document.addEventListener('DOMContentLoaded', function () {
// Toggle dropdown visibility
document.querySelectorAll('.custom-dropdown .dropdown-toggle').forEach(function (button) {
button.addEventListener('click', function () {
const dropdown = this.parentElement;
// Close all other dropdowns
document.querySelectorAll('.custom-dropdown').forEach(function (otherDropdown) {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('open');
}
});
// Toggle the current dropdown
dropdown.classList.toggle('open');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', function (event) {
if (!event.target.closest('.custom-dropdown')) {
document.querySelectorAll('.custom-dropdown').forEach(function (dropdown) {
dropdown.classList.remove('open');
});
}
});
});

2
resource-filter.php
View File

@@ -4,7 +4,7 @@
* Plugin URI: https://github.com/Vincent-Design-Inc/resource-filter
* Update URI: https://github.com/Vincent-Design-Inc/resource-filter
* Description: Adds filtering for the content typed by various taxonomies.
* Version: 1.5.2
* Version: 1.5.3
* Author: Keith Solomon
*/

76
templates/filter-form.php
View File

@@ -1,43 +1,59 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
// Get configured taxonomies from the admin settings
$configured_taxonomies = get_option('content_filter_taxonomies', []);
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
?>
<form id="resource-filter">
<!-- Search Field-->
<form class="px-4 sm:px-0" id="resource-filter">
<!-- Search Field -->
<div class="search-text">
<input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
<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">&times;</button>
<button type="submit">Filter</button>
</div>
<div class="search-tax">
<?php if (!empty($configured_taxonomies)) : ?>
<?php foreach ($configured_taxonomies as $taxonomy) :
$taxonomy_obj = get_taxonomy($taxonomy);
<!-- 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>
if ($taxonomy_obj) :
$terms = get_terms(['taxonomy' => $taxonomy, 'hide_empty' => true]);
if (!empty($terms)) : ?>
<details class="taxonomy-filter" data-taxonomy="<?php echo esc_attr($taxonomy); ?>">
<summary><?php echo esc_html($taxonomy_obj->labels->singular_name); ?></summary>
<div class="filter-options">
<?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>
</details>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<!-- 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>
</div>
</form>

38
templates/resource-results-bak.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
if (!empty($resources)) :
foreach ($resources as $resource) :
$postID = $resource->ID;
$postTitle = get_the_title($postID);
$postLink = get_permalink($postID);
?>
<div class="resource-item border border-primary-500 p-4 rounded">
<h3 class="text-22px font-semibold leading-2 my-0 py-0"><a class="text-indigo-400" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
<div class="flex flex-col mt-8">
<p class="text-14px leading-tight my-0 py-0"><strong>Resource Type:</strong> <?php echo esc_html(get_the_terms($postID, 'resource_type')[0]->name); ?></p>
<p class="text-14px leading-tight my-0 py-0">
<strong>Resource Subject(s):</strong>
<?php
$subjects = get_the_terms($postID, 'resource_subject');
$count = count($subjects);
$i = 1;
foreach ($subjects as $subject) {
if ($i === $count) {
echo esc_html($subject->name);
} else {
echo esc_html($subject->name) . ', ';
}
$i++;
}
?>
</p>
</div>
</div>
<?php endforeach; ?>
<?php else : ?>
<p>No resources found.</p>
<?php endif; ?>

42
templates/resource-results.php
View File

@@ -6,30 +6,32 @@ if (!empty($resources)) :
$postID = $resource->ID;
$postTitle = get_the_title($postID);
$postLink = get_permalink($postID);
$terms = get_the_terms($postID, 'resource_type');
?>
<div class="resource-item border border-primary-500 p-4 rounded">
<h3 class="text-22px font-semibold leading-2 my-0 py-0"><a class="text-indigo-400" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
<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="flex flex-col mt-8">
<p class="text-14px leading-tight my-0 py-0"><strong>Resource Type:</strong> <?php echo esc_html(get_the_terms($postID, 'resource_type')[0]->name); ?></p>
<p class="text-14px leading-tight my-0 py-0">
<strong>Resource Subject(s):</strong>
<?php
$subjects = get_the_terms($postID, 'resource_subject');
$count = count($subjects);
$i = 1;
<p class="text-sm font-thin uppercase">
<?php echo $terms ? esc_html(strtolower($terms[0]->name)) : ''; ?>
</p>
foreach ($subjects as $subject) {
if ($i === $count) {
echo esc_html($subject->name);
} else {
echo esc_html($subject->name) . ', ';
}
<div class="flex">
<div>
<h3 class="text-lg"><a class="" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
</div>
$i++;
}
?>
</p>
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
</div>
<?php endforeach; ?>