Get pro tips and hot takes 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.

<?php
/**
* This file adds the SearchWP Images template to your theme.
*
* Template Name: SearchWP Images
*
* @author Robert Neu
* @package Genesis
* @subpackage SearchWP
*/
/**
* This is a helper function to instantiate SearchWP.
*
* @return SearchwP object
* @since 1.0.0
*/
function prefix_searchwp_init() {
return SearchWP::instance();
}
/**
* This is a custom SearchWP form which submits using the "get" method.
*
* @param $query the user's search query
* @since 1.0.0
*/
function prefix_searchwp_form( $query ) {
if ( empty( $query ) ) {
$query = __( 'Search Images...', 'textdomain' );
}
echo'<form class="searchwp-form" action="" method="get">';
echo'<input type="text" id="swp-query" name="swp-query" value="' . esc_attr( $query ) . '" />';
echo'<input type="hidden" name="" id="" value="" />';
echo'<button type="submit">' . __( 'Search', 'textdomain' ) . '</button>';
echo'</form>';
}
/**
* Pagination for a Search WP search loop.
*
* This outputs basic wrapping HTML and displays pagination links for the user
* to navigate between pages of search results.
*
* @global $post
* @uses prefix_searchwp_init to instantiate the SearchWP class.
* @param $query the user's search query
* @param $page the current page number
* @since 1.1.0
*/
function prefix_searchwp_pagination( $query, $page ) {
if ( ! prefix_searchwp_init()->maxNumPages > 1 ) {
return;
}
// set up pagination
$prev = $page > 1 ? $page - 1 : false;
$next = $page < prefix_searchwp_init()->maxNumPages ? $page + 1 : false;
// Set the nav link for reuse.
$nav_link = get_permalink() . '?swp-query=' . urlencode( $query ) . '&amp;swp-page=';
?>
<!-- begin pagination -->
<div class="searchwp-pagination pagination">
<ul>
<?php if( $prev ) : ?>
<li class="next-prev nav-previous">
<a href="<?php echo $nav_link . $prev; ?>"><?php _e( '&larr; Previous Page', 'textdomain' ); ?></a>
</li>
<?php endif; ?>
<?php if( $next ) : ?>
<li class="next-prev nav-next">
<a href="<?php echo $nav_link . $next; ?>"><?php _e( 'Next Page &rarr;', 'textdomain' ); ?></a>
</li>
<?php endif; ?>
</ul>
</div>
<!-- end pagination -->
<?php
}
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 prefix_searchwp_init to instantiate the SearchWP class.
* @since 1.0.0
*/
function prefix_do_search_loop() {
// Return early if SearchWP is disabled.
if ( ! class_exists( 'SearchWP' ) ) {
return;
}
global $post;
$counter = 0;
$query = isset( $_REQUEST['swp-query'] ) ? sanitize_text_field( $_REQUEST['swp-query'] ) : '';
$page = isset( $_REQUEST['swp-page'] ) ? absint( $_REQUEST['swp-page'] ) : 1;
// Load the custom SearchWP form.
prefix_searchwp_form( $query );
// Do nothing if no search has been performed.
if ( empty( $query ) ) {
return;
}
// perform the search
$posts = prefix_searchwp_init()->search( 'image_search', $query, $page );
// Display a message if there are no results.
if ( empty( $posts ) ) {
echo'<h2 class="entry-title search-title">' . __( 'Sorry, No Images Found. Try Another Search.', 'textdomain' ) . '</h2>';
return;
}
echo'<div class="searchwp-results">';
// Display the search results.
foreach ( $posts as $post ) {
// Make sure post template tags work correctly.
setup_postdata( $post );
$counter++;
$column_class = 'one-third';
// Add Last class to every 3rd post.
if ( $counter % 3 == 1 ) {
$column_class .= ' first';
}
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, 'in-post', false, array( 'title' => get_the_title() ) );
echo '</a><!-- .search-image -->';
echo '</article>';
}
wp_reset_postdata();
echo'</div>';
// Display pagination.
prefix_searchwp_pagination( $query, $page );
}
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.

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

Join thousands of others and get weekly articles on improving your website

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *