Introduction
Starting from Init Live Search 1.6.7, you can define custom slash commands directly from your theme or plugin without modifying the core plugin code. The UI will handle everything — input, display, rendering — as long as your backend provides the expected data.
In this tutorial, we’ll create a new command called /random_post to show a random list of published posts.
Step 1: Customize the query result
First, use the init_plugin_suite_live_search_query_args filter to customize the query when the user types your command:
add_filter('init_plugin_suite_live_search_query_args', function ($args, $mode, $request) {
if ($mode === 'recent') {
$term = sanitize_text_field($request->get_param('term') ?? '');
if ($term === '/random_post') {
$args['orderby'] = 'rand';
$args['post_status'] = 'publish';
}
}
return $args;
}, 10, 3);
Here we’re reusing the existing /recent endpoint and injecting custom behavior when the term is /random_post.
Step 2: Register the command label for autocomplete
To make your command show up in the autocomplete dropdown, register its label via this filter:
add_filter('init_plugin_suite_live_search_commands', function ($commands) {
$commands['random_post'] = __('Show random posts as a list', 'init-live-search');
return $commands;
});
With this in place, typing /ran in the search input will suggest /random_post automatically.
Step 3: Hook into JS to handle the command
Finally, hook into the ils:search-started event to handle the command when typed manually. This snippet can be added to your theme’s JS:
window.addEventListener('ils:search-started', (e) => {
const term = (e.detail?.term || '').trim();
if (term !== '/random_post') return;
const endpoint = InitPluginSuiteLiveSearch.api.replace('/search', '/recent') + '?term=/random_post';
window.ilsHelpers.showLoading();
fetch(endpoint)
.then(res => {
if (!res.ok) throw new Error();
return res.json();
})
.then(data => {
if (!Array.isArray(data) || data.length === 0) {
window.ilsHelpers.showMessage(InitPluginSuiteLiveSearch.i18n.no_results);
return;
}
window.ilsHelpers.setCommand('recent', 'term', '/random_post');
window.ilsHelpers.renderResults(data);
})
.catch(() => {
window.ilsHelpers.showMessage(InitPluginSuiteLiveSearch.i18n.error);
});
});
This script leverages the full power of the plugin: favorites, thumbnails, excerpts, category filters, infinite scroll — all work out of the box. No need to write any custom HTML or CSS.
Conclusion
With just three snippets, you’ve created a fully functional custom slash command in Init Live Search. The UI handles everything automatically, and your logic controls what data gets displayed.
From here, the possibilities are endless: /featured_post, /most_commented, /today — whatever your use case requires. Init Live Search 1.6.7 puts that power in your hands.
Admin
05/06/2025 lúc 16:09
You can try the /random_post slash command right here on this page 👌