Lesson 2. Developing a Shortcode for the WP Post Autocomplete Plugin

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:

1. 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.
2. Use class-based development. Here, you still need to use prefixes, but far fewer, since most logic is encapsulated in class methods.

When I first got into WordPress, I used the second approach — and I don’t regret it. For example, if the plugin is “small” and the logic is simple, I use a single class. If I need separate logic for the admin, frontend, etc. — I split things into multiple classes and use an autoloader to include them automatically. Of course, it depends on the project — sometimes just including a file is enough. In our case, the project is small, so we’ll go with one file and one class.

Let’s continue. Open the plugin file we created in the previous lesson, located at “/wp-content/plugins/wp-post-autocomplete/wp-post-autocomplete.php”. Then, create a class named “WpPostAutocomplete” with the following content:

if(class_exists('WpPostAutocomplete') == false):
	class WpPostAutocomplete
	{
		public function __construct()
		{
			add_shortcode('post-autocomplete-form', array($this, 'post_autocomplete_form'));
		}

		/**
		 * Отображает форму поиска
		 */
		public function post_autocomplete_form()
		{
			$content  = '<div class="wrap-post-autocomplete">';
			$content .= '<input type="text" class="post-autocomplete-field" placeholder="Enter text to search">';
			$content .= '</div>';

			return $content;
		}
	}

	new WpPostAutocomplete();
endif;

Let’s break this code down.

With the `if` statement:

if(class_exists('WpPostAutocomplete') == false):
/* … */
endif;

we check whether the class with the same name already exists. If not — we define it. Otherwise, we do nothing.

In the constructor, we call the “add_shortcode” function. As the shortcode name, we use “post-autocomplete-form”. To generate the HTML, we call the method “post_autocomplete_form()” from the current class. This method must be declared `public`, otherwise it will trigger an error.

In that method, we generate a simple HTML input form wrapped in a div with class “wrap-post-autocomplete”:

$content  = '<div class="wrap-post-autocomplete">';
$content .= '<input type="text" class="post-autocomplete-field" placeholder="Enter text to search">';
$content .= '</div>';
return $content;

This wrapper will be useful for working with JS autocomplete.

Let’s test our plugin. Go to the WordPress plugin section and activate it. Then, create a new post or page:

Save and view the page. You should see something like this:

That’s it for now. You can find the source code for this lesson on GitHub via this link.

All lessons in the series:

• Lesson 1: How to Write a WordPress Plugin from Scratch
• Lesson 2: Creating a Shortcode for the WP Post Autocomplete Plugin
• Lesson 3: Enqueuing Styles and JS Scripts for the Post Autocomplete Plugin
• Lesson 4: Working with Ajax in the Post Autocomplete Plugin
• Lesson 5: Connecting jQuery Autocomplete to the Post Autocomplete Plugin
• Lesson 6: Displaying Posts on a Page with Pagination