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 Replies to “Creating Custom Search Page in WordPress Blog”

  1. 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!

Comments are closed.