Get pro WordPress tips or your money back!

Use SearchWP & Genesis to Create a WordPress Image Search Engine

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 WordPress Support tickets 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:

search-wp-settings1

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.

custom-image-searchwp-setup1

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.

[gist id=”6789517″ highlight=”114″]

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.

This template used to be missing pagination, but I’ve updated it so it now includes paginated search 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!

Photo Credit: Thomas Leuthard

Enjoy this post? Never miss another one.

1 Comment

Leave a Reply

You have to agree to the comment policy.