WordPress Hack #3: Custom Search Results Page and Template

Posted by jtpratt |16 Apr 08 | 11 comments

When visitors search your WordPress blog are they finding what they need? Did you know you could monetize your search results? This “wordpress hack” will teach you how to build your own custom search results page and template.

This is Day #3 of our WordPress “Hack-a-thon” of 30 WordPress Hacks in 30 Days. If you haven’t already – now is the time to subscribe by email or RSS at the top of the page!

Every WordPress blog has a search feature, and when people enter keyword into that search box they expect to find relevant results. I’m going to teach you how search works behind the scenes in WordPress, and how you can customize it for your blog. First let me say that WordPress has it’s own search mechanism – and it doesn’t use google or other search engines for results – it searches posts and post titles within your database. If you were interested in incorporate google custom search results in your WordPress theme and template this is not the place. Instead visit Google Custom Search in WordPress. There was a time when I used google results instead of WordPress search in my blog and I just don’t recommend it. First, they advertise that it will make you money, but on a site getting 10,000 unique visits per day I only made between $1.50 and $2.00 per month. Second, google will only show pages you have indexed in your results. What if all your pages aren’t in the google index?

The first step in customizing search in WordPress is understanding the elements involved:

  • searchform.php: The searchform is not a page, it’s a template file. Whenever you see a search box on a blog page, this search form template file is called and it’s code is used to place the search box on the page. If you ever wanted to change or style your search box, this file is the one you would edit to do it. We’re not going to be changing this page at all today.
  • search.php: The search.php page is also a template file, the one that’s used any time search results are displayed. Since most WordPress themes have a search box somewhere on every page you can usually search anywhere. The results that come back use this template file
  • searchpage.php: More than likely your blog doesn’t contain it’s own “search page” specifically because of the previous point (you can search anywhere). There is however, no reason not to create one. It’s yet again another page to get indexed in the search engines, yet another page to place original content, yet another page to monetize, and yet another page to point people to important content throughout your site. We are going to create a custom search page or “searchpage.php” today in this tutorial.

As I mentioned, we won’t be customizing the search form today, but we will be creating a custom search page and customizing the search results template. First we’ll make the search page. When completed, this will be a page included in our “Pages” block in the sidebar. Let’s start at the the usual place, the WordPress Codex page for ‘Creating a Search Page’. It’s a pretty straightforward tutorial for creating a WordPress search page. You going to download your “page.php” file from your WordPress theme directory. If your theme doesn’t have one – follow the directions in the previous link for creating one. Save that file as “searchpage.php”.

At the top of the page before anything we need to declare the template name – copy and paste this code:



Next you need to any information in “the loop” from this page which you might not need like the meta information (date posted, comments, tags or categories, etc). I can’t tell you what will be in your theme, because every theme is different. I’ll show you mine to use as an example in just a second. You need to add in a heading and search form by pasting these lines (after ‘the loop’):


Search This Blog

Save “searchform.php” and upload it to your WordPress theme directory. Your file should look something like this at this point:






Read the rest of this page »

'); ?> Pages: ', '

', 'number'); ?>

Search This Blog


', '

'); ?>

custom search template example Congratulations you just created a (search) page template! Now we’re going to create an actual “page” that uses that template. Go to your WordPress dashboard to “Write -> Page”. On the right, as in the image example here change “Page Template” to ‘Custom Search Page’. The template we created contains the search form, heading, and later is where we’ll place any advertisements. The WordPress “page” we’re creating now (that is based on that template) is where we’re going to write the actual content that goes on the page. This would be a great time to exploit your best pages while creating some original content.

The content you write should be something like:

“Welcome to ‘X’ Blog where I write about (link to) category a, (link to) category b, (link to) category c, etc. You might also be interested in x and y article series, my z products, or (link to) advertising on this site. If you still can’t find what you’re looking for (link to) please use my contact form to let me know.

To see what I wrote as an example – just visit my “search everything” page. Now that we’ve build a custom search page, let’s customize our search results! Before I customize any code at all – I’m going to install the “Search Everything WordPress Plugin“. Normally wordpress only searches titles and the content of posts. But by installing search everything searches can also be configured to look at tags, comments, category names, excerpts, attachments, custom fields, and eve drafts! It can also be used to “exclude” from search any category or post or page ID.

search everything options

Next, in your dashboard go to “Presentation -> Theme Editor -> Search Results (or search.php)”. This is your “search results template”. Any changes you make to this file will customize the way your search results come out any time a search is performed on your blog, whether from your new search page we created earlier, or from the search box on any page of your blog.

The search results as has a loop, and the way “the loop” works for search results is the same as any other WordPress templated page. It will show up to 10 results, and then next and previous links to get the rest of the results. In the case of search, it will show your most recent posts matching the keywords searched first, and then the older ones – which will (from the first search result page) only show a rediculous “<< previous entries" link. Some users not used to blogs or WordPress will assume there are no more search results other than they see on the first page of results. I want some "google style" navigation for the search results that most people are used to seeing to make my search results more usable. Once again - we're going to use a Lester Chan plugin to get this done, WP-PageNavi for Page Navigation.

Again, every theme is different, and my theme has next and previous navigation before and after “the loop” in my search.php template. I’m going to remove it and replace with the WP-PageNavi wordpress plugin’s navigation. First I find the current navigation, which in my template looks like this:



Yours may look different, look for the lines with “Previous Entries” and “Next Entries”. I’m going to replace it with the plugin’s code for navigation:



I made that change at both the top and bottom of my search.php because I want to have navigation before and after my search results pages. I wish google did! Now that I have decent navigation it’s time to do a little monetization of the search results. One thing I didn’t mention previously was that when we created the custom search template earlier, I did place an ad in the bottom of that page after “the loop” for my blog network. However, that ad will only display on the “search page” we created. To have any kinds of ads display in our search results themselves, we have to place them in the “search.php” as well. I’m going to place one google adsense block above the search results, and one blog network ad at the end of the search results.

I’m also going to place some adsense blocks interspersed throughout the search results, and to do that I’m going to place the following code within “the loop” of search.php:





Let me explain what’s going on here. I logged into adsense and grabbed some code for an adblock and I pasted that code into a new file I named “search-adsense-inline.php”. I uploaded that file to my theme directory. Then I placed the code above in my loop in search.php. The first lilne says to grab the contents of that file and place the ad after the second post, and the next line says to do it again after the sixth post. Google now lets you have 3 adblocks (a 3 text link blocks) per page, so with the first block before my results and then these two, that’s the max (adsense) ads I can place here. The third line sets up a counter that starts with the first post, and ads one for every post from 2-10 so it knows where to place your ads.

This is entirely flexible, meaning you could ad more ads (that weren’t adsense) by creating other files and including them after other posts. You could not use adsense at all, and advertise or promote something else! They don’t even have to be ads, they can be links to your content, or funny and weird sayings to freak people out. ANYTHING you put in those files will be after the posts you choose, whether it’s a graphic, text, or code. Use your imagination – I just gave your a bazillion ways to now monetize your search results!

If that weren’t enough – I have yet another way, you can Monetize your search results with a datafeed as well, which will grab products from merchants online using your affiliate feed and show those results on your search results pages. The great thing about that hack is the fact that you never have a page with a blank search result again. If someone searches for “WordPress Help” and you have no posts, an Amazon feed for instance would show books, or other products related to “WordPress Help”. While I have your attention on search, I may as well tell you about another great search plugin Psychic Search, which saves information on all search performed on your WordPress blog. You can get reports and see what people have been looking for over the last week, or month, and beyond. It has reports on what they found, and which searches had no results at all. This is very, very helpful information to know – and possibly information you can use to create future posts!

I hope you learned something today, and now you should have a brand new search page and monetized pimped out search results! If you have something to add or a question, as always – please comment now!


11 Responses

  • Ramayadi/ 17 Apr 08 @ 7:29 PM

    Hi,

    Thank you for share this, it really increase my knowledge on wordpress =00

    Ramayadi’s last blog post..My Favorite Photographer

  • REP/ 11 Jul 08 @ 11:27 AM

    Thanks for the very useful article. I’m going to modify the search page templates for my sites in this manner. A trifle OT, but I agree that Google Custom Search is not the way to provide search for one’s own site, but I do think that a Google custom search engine, monetized with Adsense, can be a nice addition to a site. If nothing else, it helps earn a little bit of money from the “bounce” traffic. And I found that registering some custom search engines in a few places earned me a few back links. And, among other things, by having a search engine that people can add to the Google toolbar, and/or add to search box in the upper righthand corner of their browser can bring them back to the site for return visits.

  • rohin/ 21 Mar 09 @ 7:44 AM

    this has been helpful , but what about trying to create your own search.php with custom filters to search specific parts of your website. I’m dying to find out how to do that =)]

    rohins last blog post..Optimization of Your Website’s Load Time

  • kuld33p/ 05 Jul 09 @ 3:10 AM

    thanks for the tip man. I really liked your 30 hacks in 30 days post.
    .-= kuld33p´s last blog ..How to : Display Related Posts in Vigilance Theme WordPress =-.

  • Eduardo Marques/ 06 Sep 09 @ 8:09 PM

    Nice article about custom search results. On my particular case I kept the original wordpress search and added a google search after wordpress’s results. This way you can make sure the visitor gets your most recent posts and he also has the option to use google to get more relevant search results. If none of my posts attends what he seeks he can also follow another link provided by google’s search. Oh… and you can use it with Adsense too! :)
    .-= Eduardo Marques´s last blog ..Motor de busca do WordPress x Google|Wordpress search engine x Google =-.

  • Bjorn Lindstrom/ 17 Oct 09 @ 1:22 PM

    Hi,

    I really liked your post … extremely helpful and informative, way beyond anything I have found out there. As an ex-programmer, and new to wordpress, I am eager to read the rest of your articles.

    I do have one question however … my particular template does not have a “search.php”. I have looked everywhere, and can’t even find it anywhere in my website server directory structure! Is it safe for me to create a search.php? I would like to modify mine to use a more familiar “manufacturer, model, color” type search, combine some of them to be used for the wordpress article / post search, but then use those elements to perform my own product-specific search in my own MySQL database.

    I don’t need to know how to do database queries and lookups, I know that already … just need to know how to tap into search.php when I can’t find it anywhere on my server.

    Thanks,

    Bjorn

  • admin/ 17 Oct 09 @ 9:46 PM

    Look through my 30 WordPress hacks series home page and read the articles on wordpress templates. Many, if not most, WordPress themes I come across don’t have a search.php at all. This is not uncommon. Learn the WP template hierarchy for themes. A theme can consist of only a half dozen files, or dozens and dozens. In theory you could run an entire barebones them on just a single index.php and a single stylesheet. You see, if there is no search results page template (search.php) then by default every theme reverts back to index.php and displays search results there. You can create your own search.php from your index.php and customizing it.

  • Ruben@OurBlogLog/ 10 Jan 10 @ 8:15 PM

    Excellent Tutorial , Before this I never touched the php files for the search feature. Thanks Alot

  • Adam@Investment Management Marketing EverydayTenacity/ 16 Feb 10 @ 6:48 PM

    This is a great article. Just another thing to add to my to do list as I customize out my blog.

    Are any of the steps different when using WP 2.8 and above?
    .-= Adam@Investment Management Marketing EverydayTenacity´s last blog ..Attention Investment Managers: new platform to syndicate video content =-.

  • admin/ 01 Mar 10 @ 11:41 AM

    no.

  • rishwan/ 31 Mar 10 @ 3:32 AM

    I have a question. I have made a custom theme with a custom search page to show the search results. I have managed to make it work, but only that the WP codex showed me the code which only prints out the post title and the meta data.

    I looked at your code and modified mine to show the post content too. The problem here is.. when this is done.. it shows pages in full too in the search results. SO I am wondering if there is a way to limit the number of lines printed as search results for posts and page contents.

    I would love to know.. please email me back!

You must be logged in to post a comment.