Views: 5

If you’re using the ClipMyDeals theme for your WordPress website and need a custom store categories page, you might initially consider modifying the theme files. However, creating a child theme can sometimes lead to unwanted styling changes. To avoid this, we can develop a simple custom plugin to achieve the same functionality while keeping the theme intact.

In this blog post, we’ll cover:

• Fetching store categories dynamically
• Displaying them in a responsive grid layout
• Filtering stores based on selected categories
• Sorting store categories alphabetically

Step 1: Creating a Custom Plugin Instead of a Child Theme

Instead of modifying theme files, follow these steps to create a simple plugin:

1. Create a folder inside wp-content/plugins/ named custom-store-categories.
2. Inside this folder, create a file named custom-store-categories.php.
3. Open the file and add the following plugin header:

<?php
/*
Plugin Name: Custom Store Categories
Plugin URI: https://codoplex.com
Description: A simple plugin to display store categories with store counts in a grid layout.
Version: 1.0
Author: Junaid Hassan
Author URI: https://codoplex.com
License: GPL2
*/

4. Now, we’ll add the core functionality inside this file.

Step 2: Fetching and Displaying Store Categories

To fetch and display store categories dynamically, add this code to custom-store-categories.php:

function cmd_store_categories_shortcode() {
    ob_start();
    global $wpdb;

    if (isset($_GET['store_category'])) {
        $selected_category = sanitize_text_field($_GET['store_category']);

        $args = array(
            'taxonomy'   => 'stores',
            'hide_empty' => false,
            'meta_query' => array(
                array(
                    'key'     => 'store_category',
                    'value'   => $selected_category,
                    'compare' => 'LIKE'
                )
            )
        );

        $stores = get_terms($args);

        if (!empty($stores) && !is_wp_error($stores)) {
            echo '<div class="row">';
            foreach ($stores as $store) {
                echo '<div class="col-6 col-sm-4 col-md-3 col-lg-2">';
                echo '<h2>' . esc_html($store->name) . '</h2>';
                echo '</div>';
            }
            echo '</div>';
        } else {
            echo '<p>No stores found in this category.</p>';
        }
    } else {
        $stores = get_terms(array(
            'taxonomy'   => 'stores',
            'hide_empty' => false,
        ));

        $store_categories = [];

        foreach ($stores as $store) {
            $store_meta = cmd_get_taxonomy_options($store->term_id, 'stores');
            if (!empty($store_meta['store_category'])) {
                $categories = explode(',', strtolower($store_meta['store_category']));
                foreach ($categories as $category) {
                    $category = trim($category);
                    if (!isset($store_categories[$category])) {
                        $store_categories[$category] = 1;
                    } else {
                        $store_categories[$category]++;
                    }
                }
            }
        }

        if (!empty($store_categories)) {
            ksort($store_categories, SORT_NATURAL | SORT_FLAG_CASE); // Sorting alphabetically
            echo '<div class="row justify-content-center p-1 px-2 g-3">';
            foreach ($store_categories as $category => $count) {
                echo '<div class="col-6 col-sm-4 col-md-3 col-lg-2">';
                echo '<a href="?store_category=' . urlencode($category) . '" class="cmd-taxonomy-card card h-100 p-2 rounded-4 shadow-sm">';
                echo '<div class="card-body text-center">';
                echo '<h6 class="fw-bold">' . esc_html($category) . '</h6>';
                echo '<small>' . esc_html($count) . ' Stores</small>';
                echo '</div></a></div>';
            }
            echo '</div>';
        } else {
            echo '<p>No store categories found.</p>';
        }
    }
    return ob_get_clean();
}
add_shortcode('store_categories', 'cmd_store_categories_shortcode');

Step 3: Sorting Store Categories Alphabetically

To display categories in alphabetical order, we use the ksort() function:

ksort($store_categories, SORT_NATURAL | SORT_FLAG_CASE);

This ensures that category names are sorted correctly regardless of case sensitivity.

Step 4: Adding the Shortcode to a Page

1. Save and activate the plugin from the WordPress admin panel.
2. Create a new page and add this shortcode:

[store_categories]

This will render store categories in a grid layout with clickable links to filter stores by category.

Final Thoughts

By following this approach, we: ✅ Avoid modifying the theme or using a child theme. ✅ Ensure that store categories display correctly. ✅ Enable filtering stores by category dynamically. ✅ Keep the store categories sorted alphabetically.

This lightweight plugin keeps your WordPress setup clean while providing a fully functional store categories page.

Let me know in the comments if you have any questions or improvements! 🚀