Developer

How to implement search functions without third-party apps

Ryan Boudreaux responds to a reader question about implementing search functionality without relying on third-party applications. Here is one example of how to do it.

A recent tutorial piece that was published on creating a web design layout in Photoshop received several comments, including one in particular from TR member lastchip, who asked about search functionality and implementations that do not rely on third-party applications. In this post, I will present ways to actively incorporate search code without using outside resources.

Each web programming language has its own particular nuances and ways of using search; for example, a simple <form> submit for a search functionality is all you need. Of course, it is making a call to the backend database to find any keywords or terms that match those found in the records, and linking them to associated posts in the blog data. The PHP instance utilized in one of my WordPress blogs makes use of the get method form (search_form.php) and the results are then displayed on a new page using the search results (search_results.php).

The associated styles have been omitted from the text of this piece to concentrate on the pure search code. The figure examples are shown with styling applied as displayed in Google Chrome, and a download is available at the bottom of this piece which includes the styling; however, this is just an example. The search form code would need to be applied to the header.php, and the search results file would need to be added to the active template folder of any WordPress installation to actually run a valid search.

Search Form Code (search_form.php) uses the "get" method with the php bloginfo ‘home' action to perform the search on the inputted value.
<form method="get" id="search_form" action="<?php bloginfo('home'); ?>/">
       <input type="text" class="search_input" value="Search..." name="s" id="s" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
       <input type="hidden" id="searchsubmit" value="Search" />
</form>
Here is the above code as displayed in Google Chrome in Figure A:

Search Results Code (search_results.php)
<?php get_header(); ?>
       <div id="content_box">
             <?php include (TEMPLATEPATH . '/l_sidebar.php'); ?>
             <div id="content" class="posts">
             <?php if (have_posts()) : ?>
                    <h2 class="archive_head">Your search for <span class="green"><?php echo $s; ?></span><br /> has the following results:</h2>
                    <?php while (have_posts()) : the_post(); ?>
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                    <h4><?php the_time('F jS, Y') ?><!— by <?php the_author() ?> —> &middot; <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></h4>
                    <div class="entry">
                           <?php the_excerpt() ?>
                           <p><a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" title="Read the rest of this entry">[Read more &rarr;]</a></p>
                    </div>
                    <p class="tagged"><strong>Tags:</strong> <?php the_category(' &middot; ') ?></p>
                    <div class="clear"></div>
                    <?php endwhile; ?>
                    <?php include (TEMPLATEPATH . '/navigation.php'); ?>
             <?php else : ?>
                    <h2 class="page_header">The search couldn't find that, we welcome you to please try again?</h2>
                    <div class="entry">
                           <?php include (TEMPLATEPATH . '/searchform.php'); ?>
                    </div>
             <?php endif; ?>
             </div>
             <?php include (TEMPLATEPATH . '/r_sidebar.php'); ?>
       </div>
<?php get_footer(); ?>
Figure B is the results page as displayed in Google Chrome:

Again, this is just one example of an internal search function implementation utilized within a WordPress blog. This example code will not actually work until it is utilized on a server implementation running with PHP and a MySQL database backend. The sample PHP code along with the styling is available for download.

If you are looking for some inspiration with CSS3 styling of a search form, check out this quick tutorial and demo from Web Designer Wall entitled "Beautiful CSS3 Search Form."

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks