My most popular post is Create an autocomplete field in WordPress, but it’s been over three years since I wrote that. So I want to visit the topic again, and try to be a bit more thorough in my explanation.
So I’ve created a fresh install of WordPress 5.1 on my local machine. It has the Sample Page and Hello World! posts, and everything else that you get with a fresh WordPress install.
Previously I’d used jQuery, but we no longer need it. Browsers have come a long way, and ES5 pretty much covers everything.
Let’s Create a Simple Theme!
Autocomplete can be kind of confusing. When I’m working on something I don’t quite understand yet, I like to keep everything as simple as possible. So let’s start with the simplest possible theme. It’s just a
style.css and an
index.php file. I create a directory in
wp-autocomplete. I create the two files in that directory.
style.css look like this:
/* Theme Name: wp-autocomplete demo theme Author: David Nash Author URI: https://davidnash.com.au Description: Basic theme to demonstrate an autocomplete theme Version: 0.0.1 Tags: demo, autocomplete */
and index.php isn’t even a PHP file… yet!
Let's get ready to autocomplete!
Then I activate my new ultra minimal theme and visit the site. I see the message above which means that we are indeed ready to autocomplete. Almost.
If you’d like to download this very basic start, you can have a look at commit fe9f355 on github.
Our second baby step
The next smallest possible step we could take towards getting autocomplete functionality is to add
Note: If you’re using
get_footer(), technically you should also have a header.php file and a footer.php file. If you don’t create those, WordPress will give you some good default functionality. See my “Oops” moment below.
Let’s also load the Awesomplete library. I want to keep everything simple, so I’m just using the minimum amount of files needed for it. That is, the unminified JS and CSS. See commit 232cd65.
Now that I’ve done that, and verified in the web developer console that the files are getting loaded without errors, it’s time to move onto the next step.
Extremely basic Awesomplete demo
Let’s just use the sample code from the documentation, so that our
index.php file now looks like this:
Now let’s test it out…
Success! We have autocomplete working! But this isn’t the final goal. This sample data is hard-coded. We want to pull those results from our WordPress database.
Basic WordPress autocomplete without AJAX
Continuing with our theme of keeping it simple, let’s just
echo all the list items in PHP. This will be fine if there’s less than 1000 entries. That number’s pretty arbitrary, but keep in mind that the more entries you have, the longer your page is going to take to load. And that’s bad for the user experience and SEO.
Oops, I made a little mistake while writing this! (optional)
While working on this, I tried a few simple SQL queries. There were times I’d get no results when I was expecting them. By default,
WP_DEBUG is set to
false, so I wasn’t seeing the SQL errors.
So I added
$wpdb->show_errors();, and then wanted to check that they would have been shown without that line if
WP_DEBUG had been set to
true. It was at this point that I realised that if you call
get_footer(), you should also have a
footer.php, even if they’re just empty files. Without them, you’ll get something like the following:
: Theme without header.php is
since version 3.0.0 with no alternative available. Please include a header.php template in your theme. in
I really should have added them earlier, when I set up the basic theme. I could go back and edit the post, but I thought it would be better to show you my mistake.
That’s what web development is – making lots and lots of mistakes. Hopefully you’ll learn from them, but more importantly they won’t frustrate you. We all try to hide them, and we start to think we’re the only ones that make them. But we all make mistakes. It’s better to accept your mistakes as an important part of the development process. That’s how we learn, and learning is a wonderful thing.
I’ve also made several other mistakes while writing this, like forgetting to add
wp_footer() where they belong. You’d think I’d know by now!
Back to the autocomplete…
Okay, so I’ve added my
footer.php and we now have an autocomplete field that’s reading from the database. That’s available in commit d8e0cff.
I’ve added some new posts to my demo WordPress install, and you should too, to see them appear. Here’s what I see now, with the debugging stuff commented out:
WordPress autocomplete (without AJAX) – Conclusion
The original post was about AJAX autocomplete in WordPress, but we’re not there yet. I want to continue the theme of making small, clear steps, but I’ll leave that for the next post. There’s a lot of little steps to go.
I’ll also cover questions and ideas from the comments of the original post.
For now, if you want to autocomplete without AJAX, you can download the complete sample theme code here: WordPress Autocomplete without AJAX.
What did you think of this? Is there anything I could do better? Let me know in the comments!