So, if you haven’t already heard of it, SearchWP is an awesome new plugin created by Jonathan Christopher. It’s a drop-in replacement for the default WordPress search engine which has been lacking for quite a long time. Luckily, the default search engine is getting an overhaul soon, but SearchWP is still a lot more awesome for a number of reasons.
There are plenty of things that make SearchWP the best WordPress search plugin you’ll find. For starters, it’s ridiculously easy to set up. Just install it and your WordPress search is instantly improved. Plus, there’s been a meticulous attention to detail on the UI. If you want to configure it, you can also have extremely granular control over your site’s search results. What more could you ask for in a search plugin?! Well… it get’s better.
If you ask me, one of the coolest things about SearchWP is that it lets you create as many custom, or “supplemental” as Jonathan calls them, search engines for your site as you want. With these custom search engines, you can allow your users to search through only certain types of content or only particular sections of your site. For example, you could set up a search engine that only searches and displays custom field data for pages or one that only searches through dates of a custom post type. The possibilities are literally endless.
There are some great code examples for setting up a supplemental search engine on the SearchWP site, but because we build almost everything using the Genesis Framework, I needed to figure out how to build a template that would work in Genesis. In this tutorial, I’m going to show you exactly what you need to do to create your own custom search engine and then template out both the custom search form for users to submit queries and the custom loop you’ll need to return the results that you want to display.
Alright, let’s get started!
First you’re going to need to create your supplemental search engine. To do this, simply open up the SearchWP settings page and click the “Add New Supplemental Engine” button. You should see a screen that looks something like this:
In order to keep things well-organized, you’ll want to give your new search engine a meaningful name. In this example, we’re going to set up a search engine that only searches through the images on your site, so we’ll call it “Image Search” and use all the default settings.
Once you get this set up, just save your settings. You’ll notice that there’s a smaller version of your search engine’s name next to the main title once you save it. Make a note of this because you’re going to need it when setting up your custom search engine template. For this tutorial, the supplemental search engine is called
image_search. Now let’s build our new custom WordPress image search engine!
Here’s the Entire WordPress Custom Image Search Template You’ll Need
You can literally copy and paste this into a new file in your Genesis child theme. Once you do that, all you need to do is create a new page and set it as the page template. This template leaves the default Genesis loop in tact, so you can also add content to the page like you normally would. In case you’re not following this tutorial exactly, I’ve highlighted the line in the template where you would need to change your custom search engine if you’ve named it something other than image_search.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105||
That’s really everything you need to do in order to create a custom image search using SearchWP and the Genesis Framework. There are tons of other applications for a template like this and I’d love to see more Genesis sites running their own custom search engines. One issue that I’m aware of with this template is that it doesn’t take pagination into account. I’d love to see someone modify it to include paginated results! If you have any ideas for different types of custom search engines, let me know in the comments and please fork the code over on GitHub. Happy searching everyone!
Check Out a Demo!
If you’d like to see this custom image search in action, you’re in luck. I’ve set up a working demo. Leave any ideas or feedback on it in the comments bellow!