Let’s continue developing our post autocomplete plugin. Today we’ll explore Ajax functionality in the WordPress engine—what, how, and where to hook into it, how to test the logic without a frontend, and what requests should be sent to the server.
We continue developing the plugin “wp-post-autocomplete”. In today’s article, we will connect styles, a JS file, and the autocomplete library from the jQuery framework (which comes bundled with WordPress by default).
Let’s continue developing our WP plugin for post autocomplete. Today, we will create a shortcode with an input field for the search query.
Generally speaking, there are two approaches to structuring plugin code:
- Use standalone functions to define hooks, filters, helpers, etc. In this case, it’s best to prefix each function name to avoid conflicts with other plugins/themes or WordPress core functions.
- Use class-based development. Here, you still need to use prefixes, but far fewer, since most logic is encapsulated in class methods.
With this post, I’m starting a series of complementary articles dedicated to developing plugins for WordPress. The goal of our plugin will be to implement AJAX-based post search with autocomplete. To achieve this functionality, we’ll need to cover several topics, including:
- Plugin file creation
- Shortcode development
- Connecting styles and scripts
- Working with AJAX in WordPress
- Using jQuery Autocomplete
- Displaying post lists on the page and adding pagination
As you can see, there’s a lot of work ahead. For those just starting out with WordPress development, this should be especially useful.
This article is a continuation of the post about tabs using jQuery and flexbox. Today, we will modify our script and implement it as a jQuery plugin with some improvements.
First, we will split the script logic into two files:
- Styles. These will remain unchanged, just moved from the HTML document into the file “jquery.tab-light.css”.
- JavaScript. The script will be moved into the file “jquery.tab-light.js”.
Also, don’t forget to include the above files in your HTML document.
Second, we will name our plugin “tabLight” (i.e., simple). This name will be used in our JS code.