✨feature: Implement sorting

assets/script.js

@@ -1,7 +1,5 @@
 jQuery(document).ready(function ($) {
-  $('#resource-filter').on('submit', function (e) {
-    e.preventDefault();
-
+  function triggerFiltering() {
     let searchTerm = $('#search').val();
 
     let selectedTypes = $('input[name="resource_type[]"]:checked').map(function () {
@@ -29,22 +27,40 @@ jQuery(document).ready(function ($) {
       }).get(),
       resource_subject: $('input[name="resource_subject[]"]:checked').map(function () {
         return this.value;
-      }).get()
+      }).get(),
+      sort_order: $('#sort-order').val() // Pass sorting option
     };
 
     $.post(resourceFilterAjax.ajaxurl, formData, function (response) {
       response = JSON.parse(response);
 
       $('#resource-results').html(response.html);
+
       if (response.count !== undefined) {
         $('#result-count').text(response.count);
       } else {
         $('#result-count').text($('#result-count').text()); // Keep initial count
       }
+
+      // Update sort order label
+      let sortText = $('#sort-order option:selected').text();
+      $('#sort-label').text(sortText);
     });
+  }
+
+  // Handle form submission
+  $('#resource-filter').on('submit', function (e) {
+    e.preventDefault();
+    triggerFiltering();
+  });
+
+  // Handle sorting change
+  $('#sort-order').on('change', function () {
+    triggerFiltering();
   });
 });
 
+// Close <details> elements when clicking outside
 jQuery(document).on('click', function (event) {
   jQuery('details[open]').each(function () {
     if (!jQuery(this).is(event.target) && jQuery(this).has(event.target).length === 0) {

resource-filter.php

@@ -27,15 +27,15 @@ class ResourceFilterPlugin {
     add_action('wp_ajax_nopriv_filter_resources', [$this, 'filterResources']);
   }
 
-/**
- * Enqueues the necessary scripts and styles for the resource filter.
- *
- * Checks if the 'resource_filter' shortcode is present on the page before loading.
- * Includes a CSS style and a JavaScript file specific to the plugin.
- * Localizes the script with AJAX URL and nonce for secure AJAX requests.
- *
- * @since 1.0.0
- */
+  /**
+   * Enqueues the necessary scripts and styles for the resource filter.
+   *
+   * Checks if the 'resource_filter' shortcode is present on the page before loading.
+   * Includes a CSS style and a JavaScript file specific to the plugin.
+   * Localizes the script with AJAX URL and nonce for secure AJAX requests.
+   *
+   * @since 1.0.0
+   */
   public function enqueueScripts() {
     // Load script only if the shortcode is present on the page
     if (!is_admin() && has_shortcode(get_post_field('post_content', get_the_ID()), 'resource_filter')) {
@@ -49,17 +49,17 @@ class ResourceFilterPlugin {
     }
   }
 
-/**
- * Renders the resource filter form.
- *
- * Loads the filter form template and displays a summary of the total resources.
- * Displays the number of resources and applied filters.
- * Calls the loadResources method to display the initial list of resources.
- *
- * @return string The HTML output of the filter form and resource list.
- *
- * @since 1.0.0
- */
+  /**
+   * Renders the resource filter form.
+   *
+   * Loads the filter form template and displays a summary of the total resources.
+   * Displays the number of resources and applied filters.
+   * Calls the loadResources method to display the initial list of resources.
+   *
+   * @return string The HTML output of the filter form and resource list.
+   *
+   * @since 1.0.0
+   */
   public function renderFilterForm() {
     ob_start();
 
@@ -134,13 +134,42 @@ class ResourceFilterPlugin {
   public function filterResources() {
     check_ajax_referer('resource_filter_nonce', 'nonce');
 
+    $sort_order = isset($_POST['sort_order']) ? sanitize_text_field($_POST['sort_order']) : 'date_desc';
+
     $query_args = [
       'post_type'      => 'resource',
       'posts_per_page' => -1,
       'tax_query'      => [],
-      's'              => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
+      's'             => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
     ];
 
+    // Sorting logic
+    switch ($sort_order) {
+      case 'date_asc':
+        $query_args['orderby'] = 'date';
+        $query_args['order'] = 'ASC';
+        break;
+
+      case 'date_desc':
+        $query_args['orderby'] = 'date';
+        $query_args['order'] = 'DESC';
+        break;
+
+      case 'title_asc':
+        $query_args['orderby'] = 'title';
+        $query_args['order'] = 'ASC';
+        break;
+
+      case 'title_desc':
+        $query_args['orderby'] = 'title';
+        $query_args['order'] = 'DESC';
+        break;
+
+      default:
+        $query_args['orderby'] = 'date';
+        $query_args['order'] = 'DESC';
+    }
+
     $tax_query = [];
 
     if (!empty($_POST['resource_type'])) {