Public Ticket #402821
[Engine] [Tutorial] How to add Google Custom Search and add the Theme Search Box instead of Google Search Box


  • Deepak started the conversation

    WordPress default Search is always lacking and the results are always returned in form of a list of archive. While you can use some plugin to get better results, I would advice to go for Google Custom Search.

    Everyone can accept the fact that we love Google Search. Also you can enable Search Engine Monetization to increase your Adsense earning. With Google CSE you can have image search, sort results by relevance, date, ratings and more.

    What you need

    • Google/Gmail Account. Visit https://cse.google.com/ to get your Custom Search.
    • Ability to Edit your Theme files (Optional)

    Steps to follow

    1. After signing in for Google Custom Search. Get your CSE codes for "Results only" template. After you Click "Save & Get Code" you will see the codes. On this page there is a button called "Search Result Details". Click it and Specify the query parameter name embedded in the url as "s" (without the quotes). Your code will look something like http://pastebin.com/vKrqW91Y
    2. Go to Appearances >> Theme Options >> Page Builders >> Search Result Layout. Click "Add Panel". Type will be Custom Content. Now insert the Google CSE code. Your Google Custom search is ready. Just search as usual.
    3. [Inserting Google Search Box] - In the CSE code of Step 1, replace searchresults-only with search
    4. [Inserting Theme Search Box - Simple] - Skip Step 3. Add a new Custom Content Panel just above the CSE Custom Content Panel and put the code from http://pastebin.com/uvjSFSDV
    5. [Inserting Theme Search Box - Advanced] - Skip Step 3 and 4. Step 4 while it works, it doesn't show the search query word inside the search box. So for proper search box you need to edit search.php and add the code from http://pastebin.com/yxGbNLSj just after php get_header(); # show header

    Note: In Step 4 and 5 replace "http://geekscolumn.com/" with your own Domain URL.

    Advice: Do Step 1,2 & then 5. Do not bother with Step 3 or 4 unless you want to experiment a bit.

    For those who are a bit lazy with edits or worried of messing up, I have attached my search.php. Just replace yours with mine.

    You can see the difference of how the default search and this new custom search works by checking the links below.

    Default Search - http://www.industrialthemes.com/engine/?s=samsung

    Google Custom Search - http://geekscolumn.com/?s=samsung#gsc.tab=0&gsc.q=samsung&gsc.page=1

  •  327
    Brian replied

    Very good! I am impressed with your thorough tutorial and appreciate that you took the time to help others with this! I'll consider ways to use this and/or integrate some of it into a future theme update. As for now, I'm going to create a new FAQ pointing to this ticket - thanks again!

  •   Deepak replied privately
  •  327
    Brian replied

    These tutorials are amazing. Definitely shows that you care about the theme and your fellow theme users. Bravo!