1. Purpose and Use Cases
The [init_live_search] shortcode allows you to place a search trigger anywhere – either a clickable icon or an input box – that opens the full Init Live Search modal when activated. You can use it inside posts, widget areas, HTML blocks, or templates for maximum flexibility.
2. Basic Usage
To show the default search icon, simply use:
[init_live_search]This will render a clickable SVG icon that triggers the search modal when clicked.
3. Supported Attributes
You can customize the appearance and behavior of the shortcode with the following attributes:
| Attribute | Default | Description |
|---|---|---|
type |
icon |
Choose between icon (SVG button) or input (search field) |
placeholder |
Search... |
Text inside the input field (only applies to input type) |
label |
(empty) | Optional label next to the icon (only applies to icon type) |
class |
(empty) | Custom CSS classes, e.g., dark, my-style |
stroke_width |
1 |
Stroke width for the SVG icon lines |
radius |
9999px |
Border radius for the input box (only applies to input type) |
4. Real-World Examples
a) Default icon trigger
[init_live_search]b) Icon with label
[init_live_search label="Search"]c) Input box with custom placeholder
[init_live_search type="input" placeholder="Enter keyword..."]d) Input box with rounded corners and bold icon
[init_live_search type="input" radius="8px" stroke_width="2"]e) Enable dark mode styling
[init_live_search class="dark"]5. Technical Notes
- The modal is triggered via built-in JavaScript – no extra scripting needed.
- You can use multiple shortcodes on the same page without conflicts.
- If you’ve disabled the default plugin CSS, style the elements manually using
.ils-input-launch,.ils-icon-launch, etc.
6. Conclusion
The [init_live_search] shortcode is a lightweight, flexible way to insert a fast, modern search experience anywhere on your WordPress site. Whether you need a floating icon or a styled input field, it adapts to any layout and theme with minimal setup.
7. Live Dark Mode Toggle Example
If your site switches between light and dark mode by toggling a class like uk-light on the <html> element, you can use the following JavaScript to sync dark mode styling on the shortcode output automatically:
function syncDarkMode() {
const isDark = document.documentElement.classList.contains('uk-light');
document.querySelectorAll('.ils-input-launch, .ils-icon-launch').forEach(el => {
el.classList.toggle('dark', isDark);
});
}
syncDarkMode();
const observer = new MutationObserver(syncDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});Just replace editor-wrapper with the ID or class of the outer element rendered by your shortcode. The logic works seamlessly with theme-based dark mode switches, including those triggered by UIkit, Tailwind, or Alpine.js.
Comments