Lesson 3. Connecting styles and JS scripts to the autocomplete posts plugin

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).

Open the plugin file “/plugins/wp-post-autocomplete/wp-post-autocomplete.php”, go to the constructor, and add the following line of code:

add_action('wp_enqueue_scripts', array($this, 'wp_enqueue_scripts'));

The “wp_enqueue_scripts” hook in WordPress is responsible for enqueueing styles and scripts on the frontend. But in order to connect the actual files, we need to create a public method “wp_enqueue_scripts” in the current class. And inside it, enqueue the files we need. Let’s create the method:

public function wp_enqueue_scripts()
{
	wp_enqueue_style('wp-post-autocomplete', plugin_dir_url(__FILE__).'assets/style.css');
	wp_enqueue_style('wp-post-autocomplete-jquery-ui', plugin_dir_url(__FILE__).'assets/jquery-ui/jquery-ui.min.css');

	wp_enqueue_script('wp-post-autocomplete', plugin_dir_url(__FILE__).'assets/script.js', array('jquery', 'jquery-ui-widget', 'jquery-ui-autocomplete'), null, true);

	wp_localize_script('wp-post-autocomplete', 'WpPostAutocomplete', array(
		'ajax' => admin_url('admin-ajax.php'),
		'action' => 'autocomplete',
		'security' => wp_create_nonce('autocomplete_security'),
	));
}

Where:
wp_enqueue_style — a WordPress core function that allows enqueuing CSS styles
wp_enqueue_script — same as above but for JS files
wp_localize_script — WordPress function used to localize JS strings or pass dynamic data from PHP to JS

So, what did we do above?

1. Enqueued plugin styles
2. Enqueued styles for jQuery autocomplete
3. Enqueued the plugin’s JavaScript file along with all dependencies — that is, jQuery itself, the widget library, and the autocomplete script

Let’s now physically create the files on the server. First, create an “assets” directory in the root of the “wp-post-autocomplete” plugin folder, and place all necessary files there — style.css and script.js.

As for “jquery-ui.min.css”, we’ll need to put in a little extra effort. Visit the official jQuery website and download the plugin along with its dependencies.

Almost forgot about “wp_localize_script”. This is a critical part of our plugin: without it, we won’t be able to pass data via Ajax (unless we hardcode everything in JS) or secure our script. Let’s break it down in more detail:

wp_localize_script('wp-post-autocomplete', 'WpPostAutocomplete', array(
	'ajax' => admin_url('admin-ajax.php'),
	'action' => 'autocomplete',
	'security' => wp_create_nonce('autocomplete_security'),
));

The first parameter of the function is the handle of the dependent script — in our case, “script.js”, which we registered with the handle “wp-post-autocomplete” (yes, it’s the same handle we used for the styles, but WordPress adds suffixes for JS and CSS, and for JS this is not visible).
The second parameter is the name of the JavaScript object that will contain the array passed in the third parameter.
The third parameter is an array where:
ajax — contains the URL for handling Ajax requests. By default in WP it is /wp-admin/admin-ajax.php
action — the name of the hook that will process our request (i.e., post search)
security — contains a unique nonce (security token), generated by WordPress that expires after a short period

That’s it. You can find the lesson code on GitHub via this link. See you next time 🙂

List of all lessons in this series

• Lesson 1. How to write your own plugin for WordPress
• 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 the list of posts and pagination