Navigating through a long list of categories while creating a new post or product in WordPress can be time-consuming and frustrating. Finding the right one quickly becomes a challenge if you’re managing a blog or an online shop with numerous categories. In this guide, I’ll show you how to add a search field to the category selection box in the WordPress post editor, making your content creation process smoother and more efficient.
The Challenge: Navigating Through Numerous Categories
As your website grows, so does the number of categories you use to organize your content or products. Scrolling through an extensive list to find the appropriate category can slow down your workflow and lead to mistakes if the wrong category is selected.
The Solution: Adding a Category Search Field
By implementing a category search field in the post editor, you can easily search and select the desired categories without scrolling through the entire list. This enhancement filters the categories in real-time as you type, displaying only those that match your search term.
What Does This Solution Do?
- Adds a search box above your category selection area
- Filters categories in real-time as you type
- Works for both regular post categories and WooCommerce product categories
- Includes a convenient “Clear Search” button
- Keeps checked categories visible even when filtered
- Fully accessible and mobile-friendly
Benefits for Shop Users
If your WordPress site has dozens or hundreds of categories, finding the right one can be like searching for a needle in a haystack. This enhancement makes category management much more efficient, saving you valuable time when creating or editing posts and products.
- Time-Saving: Quickly find and select categories, speeding up the content creation process.
- Improved Accuracy: Reduce the chances of assigning the wrong categories to posts or products.
- Enhanced User Experience: Streamline your workflow, making content management more enjoyable.
Video: How to Add a Category Search Box to WooCommerce Product Editor?
How to Implement the Woocommerce Product Editor Category Search Field?
There are three simple methods to add this functionality to your WordPress site:
Option 1: Using the Code Snippets Plugin
The Code Snippets plugin allows you to add custom code to your site without editing your theme files. It’s safer and ensures that your customizations remain intact even if you switch themes.
Steps:
1. Install the Code Snippets Plugin:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Search for “Code Snippets”.
- Click Install Now and then Activate.
2. Add the Custom Code:
- Go to Snippets > Add New.
- Give your snippet a title, like “Category Search Field”.
- Paste the following code into the code box:
// Add a Category Search Box to WooCommerce Product Editor
function add_category_search_field() {
global $pagenow;
if ( $pagenow === 'post.php' || $pagenow === 'post-new.php' ) {
// Internationalized strings
$search_placeholder = esc_attr__( 'Search categories...', 'your-text-domain' );
$clear_search_text = esc_html__( 'Clear Search', 'your-text-domain' );
?>
<style type="text/css">
.category-search {
margin-bottom: 10px;
width: 100%;
}
.clear-category-search {
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Target both default and product category boxes
var categoryBoxes = $('#categorydiv .inside, #product_catdiv .inside');
categoryBoxes.each(function() {
var categoryBox = $(this);
// Add search field and 'Clear Search' button with accessibility features
categoryBox.prepend(`
<input type="text" class="category-search" placeholder="<?php echo $search_placeholder; ?>" aria-label="<?php echo $search_placeholder; ?>" />
<button type="button" class="button clear-category-search" aria-label="<?php echo $clear_search_text; ?>"><?php echo $clear_search_text; ?></button>
`);
});
var debounceTimeout;
// Live search function with debounce
$('.category-search').on('keyup', function() {
var categoryBox = $(this).closest('.inside');
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(function() {
var searchTerm = categoryBox.find('.category-search').val().toLowerCase();
categoryBox.find('.categorychecklist li').each(function() {
var categoryName = $(this).text().toLowerCase();
var isChecked = $(this).find('input[type="checkbox"]').is(':checked');
if (categoryName.indexOf(searchTerm) !== -1 || isChecked) {
$(this).show();
} else {
$(this).hide();
}
});
}, 300); // Debounce delay in milliseconds
});
// Clear search functionality
$('.clear-category-search').on('click', function() {
var categoryBox = $(this).closest('.inside');
categoryBox.find('.category-search').val('');
categoryBox.find('.categorychecklist li').show();
});
});
</script>
<?php
}
}
add_action('admin_print_footer_scripts', 'add_category_search_field');3. Choose “Only run in administration area”, then Save and Activate:
Option 2: Using the functions.php of Your Child Theme
⚠️ Warning: This method requires more technical knowledge and can break your site if not done carefully!
If you’re comfortable editing theme files, you can add the code directly to your child theme’s functions.php file.
Steps:
1. Access Your Child Theme’s functions.php:
- Use FTP or the WordPress Theme Editor (Appearance > Theme Editor).
2. Add the Custom Code:. Paste the same code provided above at the end of the functions.php file.
3. Save the Changes.
Note: Editing the functions.php file can break your site if not done correctly. Always back up your site before making changes.
Why Using Code Snippets Is Better Than Editing functions.php
- Safety: Mistakes in functions.php can cause site errors. Code Snippets isolates custom code, reducing risk.
- Portability: Snippets remain active even if you switch or update themes. Also, there is no risk of breaking your theme during updates
- Organization: Easy to enable/disable without editing files. You can easily manage and organize all your custom code in one place.
- No Need for FTP: Add and edit code directly from the WordPress dashboard.
Option 3: Installing the Downloadable Plugin (Easiest)
For the easiest implementation, you can install the pre-packaged plugin version of this code.
Steps:
2. Install the Plugin:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Click on Upload Plugin.
- Choose the downloaded .zip file and click Install Now.
3. Activate the Plugin.
How It Works?
Once installed, you’ll see a search box appear above your category list when editing any post or product. Simply:
- Start typing the category name you’re looking for
- The list will automatically filter to show matching categories
- Click the checkbox next to the category you want
- Use the “Clear Search” button to reset the filter
Pro Tips
- The search is instant – no need to press Enter
- Already checked categories remain visible even when filtering
- The search is case-insensitive, so “SHOES” and “shoes” will find the same categories
- Works perfectly on both desktop and mobile devices
Troubleshooting
If you don’t see the search box:
- Make sure you’re on a product editing screen
- Try clearing your browser cache
- Check if your theme has any conflicts with jQuery
- Verify that the code is properly activated
Conclusion
This simple enhancement can save you countless minutes of scrolling and searching through categories. Whether you’re managing a small blog or a large e-commerce site, having a searchable category box makes content management significantly easier.
