Searching the Keg

By on June 25th, 2012

Building this blog is my first experience with WordPress . To give you background, I have experience with both PHP and other object oriented languages, which helped with understanding the code and the way it works. So, instead of using a template I built our theme “keg” from scratch. While using a template would probably have been much easier, through developing our blog I have gained a much better understanding of the way WordPress works and how useful its vast library of functions are.

Patrick sent me a really helpful link to Chris Spooner’s tutorial, which  is basically a manual that you can more or less copy and tweak to meet your own needs (for example we included a tag filtering subject in our blog). You simply place the WordPress function in a div that you can customize the styling of with CSS. What I didn’t realize until this was how many functions WordPress has and how well documented they are. The WordPress Codex is a life-saver. Pretty much if you want to do something, they have a function for it. You want to list the tags, use list_tags(), you want the template url, use template_url(), etc. Taking our site from the generic 2011 theme to this:

We also included some javascript, allowing the smooth scrolling back-to-the top and the our logo hover to extend down. Most recently, we added a search capabilities to our blog.

While Spooner’s tutorial is amazing, it did leave me with some confusion surrounding search.php, more or less because it is the only thing he did not specifically spell out word for word.  Like everything else WordPress has a function that builds a search form for you (get_search_form()). To customize it is practically as easy as calling it. In your theme folder simply create a php file called searchform.php and build the form with what ever traits you wish your search function to have. For example here’s our code:

Key things to remember are setting the method as “get” and the action as the homepage url. WordPress will automatically look for your search.php page to display the results on. After this get_search_form() calls the form you have created rather than the default form. Katie designed a simple yet classic speech bubble form like this:

for our blog so our php file only consists of a few lines of code.

Also key to our search form was that it remain hidden unless you click the search icon, a magnifying glass, so the top of our page transforms from this:

to

In order to do this jqModal offers a great plug-in. You simply insert into your html the div that contains the element you want to appear and give the div the class jqmWindow:

Then you upload the jqModal code for into your scripts folder and attach it in the header. In your main javascript file you then call $(‘the div you want to appear’).jqm(). You can customize your modal with CSS, giving it an overlay or customizing the form. You can also add triggers to open the modal or to close it by giving them class=”jqmClose” which we cave to both the search icon and the body so that if you click outside the search form it disappears.

It is also important to add CSS styling for the jqmWindow and the overlay (if you’re using it):

Finally, we move onto displaying the results. Both WordPress and Spooner cover this. More or less your search.php should be very similar to your index, calling header.php, footer.php, sidebar.php etc. The main difference is that you want to display the results. To do this you are going to want to use WP_Query. WordPress extensively describes how to first form the query:

This will search throughout your blog and the results will be stored in the variable $search. You can then customize the way the results are printed out varying what you echo in between the while loop:

while ( $search->have_posts() ) : $search->the_post();

endwhile;

We decided that our post should contain links to the titles as well as brief excerpts of the posts:

Then all that’s left is to style away!

Share
back to top

No Comments

Leave a comment