Part 11: Implementing Search

Searching. A human instinct, something we’ve been doing since the dawn of time, and we haven’t stopped searching for the essentials, food, shelter, warmth. But we have built on what we search for. Some may be so fortunate as to remember early Yahoo! and Alta Vista, which was my go-to before Google became the dominant and superior force.

get_search_form

get_search_form is the function used to retrieve your search form. It looks for searchform.php, if that’s not found it’ll spit out a default search form.

Building a Search Form

After building a comments form, this is a comparative walk in the park. You’ll need to create a new file and save it with the name searchform.php – there are some classes on here to assist in styling it later.

<form action="/" method="get">
    <fieldset>
        <label for="search">Search <?php bloginfo('name'); ?></label>
        <input class="searchfield" type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
        <input class="searchbutton" type="submit" alt="Search" value="Search" />
    </fieldset>
</form>

Implement the Form

There are two ways we can bring search to our template.

1. Widget
2. Hard-coded

Perhaps the easiest way is through use of a widget. WordPress has a preconfigured widget available for search, and it’s as easy as dropping it into a widget-ready area.

Hardcoding is also very easy. The only real difference is how it impacts the end user. If it’s hard coded they won’t be able to move or remove it without knowledge of html/css/php. Depending on the theme you’re building it may make sense to do it this way though. When you use a widget instead, WordPress just puts it in there for you anyhow.

So in the event you hardcode, this is all you need.

<?php get_search_form(); ?>

It will automatically look for searchform.php and load what it finds inside.

To test it out, I’m going to put a search form in my sidebar using a widget, here’s how it looks

Much like the comment form, it’s not so pretty, so we’ll use a little css to make it more attractive.

.searchbutton {
	background:#fafafa;
	border-radius: 3px;
	border:0;
	color:#57534a;
	font-size: .8em;
}

.searchfield {
	border-radius: 3px;
	border:0;
}

And the obligatory screenshot

Customizing the Results

We’re going to take a little time to adapt our theme to display search results. It’s very straight forward, so create a file called search.php, and then, copy and paste your index.php into that, but delete everything between the <section> tags.

A Search Results Loop

Yep, a new loop, but what does it need to do? Let us break this down into plain English before writing out the code for it.

I want to see a title, published date, and probably an excerpt. If there are no results, we’re going to need to tell the user that this is the case. We can use most of the original loop, and you’ll see parts of it repeated here, but we’re putting it within an if loop to make it work.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><br /></h3>

<?php the_time('F j, Y'); //DD Month, YYYY format dates ?><br />

Posted in <?php the_category(', ') ?>
<?php the_content('Continue Reading'); ?>
<?php endwhile; else: ?>
</div>
<h1>No Results</h1>
<p>Sorry, there were no posts found</p>
<?php endif; ?>

As you can see, it’s very similar to the loop in index.php. If there are posts it’ll display the title of the post as a link, the date published, and an excerpt. If there are no results, a simple message, just like this

However, this time, we’ve used the_content instead of the_excerpt. The reasoning is in the additional link through to the content to provide a little more emphasis. Of course, you can choose whichever you would like to.

A Note on WordPress Search

WordPress search has come a very, very long way in the last couple years, but it does still leave a lot to be desired. On a small site, you probably wouldn’t have too much difficulty, but if your site is vast and constantly publishing more content, things will eventually get messy. So if you want users to search your site with ease, you’ll need to look into alternatives.

1. Relevanssi, or
2. Google Custom Search

Either make fine options, but are out of the immediate scope of this series. If you’re unhappy with your search, which tends to happen with more and more content on your site, then it would be recommended that you seek alternatives, if you have suggestions let me know in the comments below.

The post Part 11: Implementing Search appeared first on YinPress.