Custom WordPress Search Engine With SearchWP and Genesis

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 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-settings

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 Supplemental Search Engine

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
<?php
/**
* This file adds the SearchWP Images template
* to your theme.
*
* @author FAT Media <http://youneedfat.com>
* @copyright Copyright (c) 2013, FAT Media, LLC
* @license GPL-2.0+
*/
 
/* Template Name: SearchWP Images */
 
/**
* This is a custom SearchWP form which
* submits using the "get" method.
*
* @since 1.0.0
* @todo Change 'prefix' to theme prefix.
* @todo Change 'text-domain' to theme text domain.
*/
function prefix_searchwp_form( $query ) {
echo '<form class="searchwp-form" action="" method="get">';
echo '<input type="text" id="searchwp-query" name="searchwp-query" value="' . esc_attr( $query ) . '" />';
echo '<button type="submit">' . __( 'Search', 'text-domain' ) . '</button>';
echo '</form>';
}
 
add_action( 'genesis_after_entry', 'prefix_do_search_loop' );
/**
* This is a custom loop which contains search results.
*
* It outputs basic wrapping HTML and displays images
* based on user's search queries.
*
* @global $post
* @uses SearchWP Custom WordPress search engine.
* @since 1.0.0
* @todo Change 'prefix' to theme prefix.
* @todo Change 'text-domain' to theme text domain.
*/
function prefix_do_search_loop() {
 
// Return early if SearchWP is disabled.
if ( ! class_exists( 'SearchWP' ) )
return;
 
global $post;
 
$counter = 0;
 
$query = isset( $_GET['searchwp-query'] ) ? sanitize_text_field( $_GET['searchwp-query'] ) : '';
$page = isset( $_GET['searchwp-page'] ) ? absint( $_GET['searchwp-page'] ) : 1;
 
// Load the custom SearchWP form.
prefix_searchwp_form( $query );
 
// Do nothing if no search has been performed.
if ( empty( $query ) )
return;
 
// Instantiate SearchWP.
$engine = SearchWP::instance();
// Set the supplemental search engine name.
$search_engine_name = 'image_search';
 
// Perform the search.
$posts = $engine->search( $search_engine_name, $query, $page );
 
echo '<div class="searchwp-results">';
 
// Display a message if there are no results.
if ( empty( $posts ) ) {
echo '<h2 class="entry-title">' . __( 'Sorry, No Images Found. Try Another Search.', 'text-domain' ) . '</h2>';
} else {
 
// Loop through the search results.
foreach ( $posts as $post ) {
// Make sure post template tags work correctly.
setup_postdata( $post );
 
$counter++;
 
// Add a Genesis Column Class to the search results.
$column_class = 'one-third';
 
// Add 'first' class to every 3rd post.
if ( $counter % 3 == 1 ) {
$column_class .= ' first';
}
 
// Display the search results.
echo '<article class="' . implode( ' ', get_post_class( $column_class ) ) . '">';
echo '<a class="search-image" href="' . wp_get_attachment_url( $post->ID ) . ' ">';
echo wp_get_attachment_image( $post->ID, 'search', false, array( 'title' => get_the_title() ) );
echo '</a><!-- .search-image -->';
echo '</article>';
}
}
 
wp_reset_postdata();
 
echo '</div>';
}
 
genesis();

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!

SearchWP Image Search Demo

Robert Neu

Robert is the co-host of the WP Bacon podcast and the creator of the WordPress site audit service Audit WP. He lives in Austin, TX with his better half Nickie who blogs over at Zombie Plumbing Company. Some people say he's pretty cool... but we have reason to suspect that they've been paid off.

  • carrie dils

    Thanks for the great tutorial, Rob. I’d seen a lot of chatter about SearchWP but hadn’t had a chance to try it out yet. LOVE the supplemental search possibilities.

  • Tony Eppright

    Nice writeup! I just watched the video on Pippin’s site and was really impressed…I’m going to buy a license for my site, but it’s great to see another example of how it can be used! The supplemental search is awesome!

  • Dorian Speed

    Great tutorial, Robert! I’m hoping to springboard off of this for a search template I need to build for a client. One suggestion – I am using an “older” Genesis theme on this particular site, one that isn’t HTML5 compliant, so this template didn’t work out of the box. Once I changed genesis_after_entry to genesis_after_content, it worked great. (And yes, I realize I need to convert the theme to add the HTML5 stuff.) :)

    Thanks again for getting the word out about SearchWP – I think this is going to be a great tool with a wide variety of uses.

  • Franck

    Great Tutorial!
    Have you figured out the pagination at this time? The template looks amazing and I’m trying to see if this solution could fit my needs.

    Best,
    Franck

  • Grégoire Noyelle

    Hi Robert
    Just read you tutorial today! Awesome. I really need this custom search very soon. It will help a lot.
    Cheers

  • http://www.nicoblog-games.com/ Nico

    it’s all about money this days