Creating Custom Search Page in WordPress Blog

In wordpress, there are two types of webpages – “posts” and “pages”. While “posts” are generated dynamically, “pages” are statics and created explicitly. You can create as many “pages” as you want and put them anywhere in your blog’s structure. Few pages I have here includes – about page, contact page, joining DW page, etc.

Apart from these “pages”, I use a special “search page” with extra-level of customization. It is technically outside my wordpress setup. I do not use wordpress built-in search mechanism. Instead I use, Google custom search like many of you. I will explain why I use Google custom search some other time!

For time being, if you notice my search page do not have any sidebar compared to say “contact page”. A simple way to disable sidebar for any post/page is to surround “get_sidebar()” call in theme with if-else block. But for sake of slight performance improvement and few other reasons I prefer maintaining a dedicated search page outside my wordpress setup. But as you can see, it is blended with my theme very-well!

So here is “how-to” guide to create such “search pages” outside wordpress:

    1. Create a page say in root-directory of your blog. Name it something like – search.php. It will have URL like – http://www.devilsworkshop.org/search.php
    2. Next log into AdSense or Google Custom Search Engine, and create a new custom search or update existing search engine.
    3. Just remember to use above URL (step 1) for search result pafe
    4. Then add following code as it is to it:
      <?php
      define('WP_USE_THEMES', false);
      require('wp-blog-header.php');
      get_header();
      ?>
      <!-- Google Search Result CODE -->
      <?php
      get_footer();
      ?>
    5. Finally replace “Google Search Result CODE” line in above code with codes you will get from Google.
    6. Save/Upload search.php in your blog’s root directory.

If you need to use some CSS, use it inline on Google search result code’s first line, i.e.

<div id="cse-search-results"></div>

Example:

<div id="cse-search-results" style="width:980px;"></div>

I needed to set width attribute like above to expand search results into space made available by absence of sidebar.

Try this and use comments form below if you stuck! I hope this answer your question Anurag. 🙂

Related: WordPress Plugin Series

7 Comments

Deepak September 24, 2008

I want to use it on the navigation bar wherein by default I have wordpress search bar..
how to do that?

Rahul Bansal September 25, 2008

@Deepak
You have to create a page like this for sure to show search results.

For other part, replace wordpress themes search engine code with custom search engine code given by Google.

Check this wordpress help page for more info. 🙂

Anurag September 28, 2008

Thank You Very Much Rahul Sir….
Was Waiting For This Waiting From Long Time….
Going to Apply Right Now…
Thnx Once Again…

– Anurag R.C.
http://www.pcdrome.com

Deepak September 28, 2008

hmm… Rahul ‘Sir’ 😛

Nihar February 9, 2009

Hi Rahul,

I am Nihar from Niharsworld.com. I got to this page from Google.

I tried integrating custom google search. By creating a search template also removed getsidebar call to remoev sidebar but didn’t know how to achieve it.

I hope your solution will work. I will let you know whether i suceeded or not . If don’t then will ask you for some more help.

Thank you very much. I hope to see you on my blog soon!

ѕяιηιναѕ June 6, 2010

Default wordpress search is too primitive so CSE integration would certainly improve user experience.. I too implemented in ma blog !!

ravi June 23, 2010

thanks dude just what i needed! thanks again