Add Snippet To Project
<?php
/**
* Plugin Name: WP Plugin
* Description: Custom plugin with a search bar that highlights words in yellow and filters certain table rows.
* Version: 1.0
* Author: WP Turbo
* Author URI: https://wpturbo.dev
* Text Domain: wpturbo
*/
// Enqueue the required JavaScript and CSS files
function wpturbo_enqueue_scripts() {
wp_enqueue_script( 'wpturbo-script', plugin_dir_url( __FILE__ ) . 'script.js', array( 'jquery' ), '1.0', true );
wp_enqueue_style( 'wpturbo-style', plugin_dir_url( __FILE__ ) . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_enqueue_scripts' );
// Add the search bar and table
function wpturbo_search_form() {
ob_start();
?>
<form id="wpturbo-search-form" method="GET">
<input type="text" id="wpturbo-search-input" name="search" placeholder="Search...">
<input type="submit" value="Search">
</form>
<table id="wpturbo-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</tbody>
</table>
<?php
return ob_get_clean();
}
add_shortcode( 'wpturbo_search_form', 'wpturbo_search_form' );
In this code, we first enqueue the required JavaScript and CSS files using the wp_enqueue_script() and wp_enqueue_style() functions. Make sure to include the 'script.js' and 'style.css' files in the plugin directory.
Next, we define the wpturbo_search_form() function that outputs the search form and table. The form includes an input field for searching and a submit button. The table contains the table headers and three example rows.
Finally, we register a shortcode [wpturbo_search_form] that can be used to display the search form and table on any page.
To customize the search functionality and table filtering, you can modify the JavaScript code in the 'script.js' file. The script should handle highlighting the search words and filtering the table rows based on the search input.
Remember to replace the 'script.js' and 'style.css' file paths with the actual paths in your plugin directory.