How to Add Google Custom Search Engine in a Wordpress Website

Aajay Bharadwaj Avatar

Reviewed By Aajay Bharadwaj

Updated On October 15, 2018

CatchMyPage content is free. When you purchase through referral links on our site, we earn a commission. Learn More

Not happy with the weak functionality of the default wordpress search engine ? Dont worry we have an excellent alternative that is “Google Custom Search Engine”provided by Google itself on your WordPress-based website.

Google Custom Search Engine features, a better performance with the accurate result in your own style.This can also help your site visitors to have a great experience while making searches. You can use this CSE (Custom Search Engine) in sidebar/footer or on a whole page. So, in this tutorial we are going to learn the implementation of Google Custom Search Engine (CSE) on your regular website or in WordPress blog.

Google CSE control panel features

There are several ways to manage your custom site search engine and this includes features which can be added or modified at any time once you make your initial site setup. The list below includes the feature options and a short description of each.

Sites : You can add new sites, sub-sites, or specific pages to increase the scope of your custom search engine. You can add the new sites individually or in bulk, and specify individual pages, entire sites, parts of sites, or entire domains. You can also exclude portions of a site by specifying those directories you want to keep out of the search results.

Refinements : In essence, you will categorize your search results, and help users search by category. Refinements are labels that you can apply to websites in your search engine index to help your users effortlessly find the material they are searching. When a user clicks a refinement label, sites that you have annotated with the label are either searched exclusively or given priority in the results you choose.

Auto completions : You can add in auto complete features to save your users time by displaying similar search types as they enter text into the search.

Promotions : Allow you to promote your URL by adding a special box to the top of your search results which promote certain URL’s including those that are not in your search engine.

Synonyms : You can expand your users’ search queries by using synonyms, which are variants of a search term.

Indexing : You can set Google to instantly crawl and index new or updated web pages in your search engine.

Look and Feel : You can customize the style giving your search engine a look and feel that matches your particular website. You can specify the layout from the search engine control panel.

Monetization : You can associate an AdSense account with your free Custom Search Engine to start placing contextually relevant ads on your search results pages and it shares a portion of the advertising revenue with AdSense partners

Creating a Custom Search Engine

Custom Search Engine

To create a Google Custom Search Engine all need to have a Google Account . If you have an existing account then you can sign in from there if you dont then create a new account . Once you are logged in to your account you can access the Google Custom Search Management or you can also google it as “google custom search” in the search bar.

Step-1 : From the Google Custom Search home page click on the option to “New search engine

Custom Search 2

Step-2 : Enter your search engine details such as Name of your website, Description, Language and Sites to search. You must list all the sites in the Sites to search box to set the parameters for your custom search engine to crawl and give results from.

Custom Search description

Step-3 : Choose your edition of CSE  and then agree to the Terms of Service before clicking Next. At the Try it Out  page, click at ‘Look and feel‘, written in first line of the page.

CSE Look and Feel

Step-4 : Its time to customize CSE At the Layout page, choose a layout for the CSE on the site . Customize styles. Includes separate options for text, elements, search controls, search button, refinement tabs, title text colors, snippet text color, normal and hover state styles, promotions text styles, snippet text styles, promotion borders, and background styling. Once the custom styling is selected, Hit the Save & Get Code…button.

CSE Look and Feel

CSE Customize Look 6

Step-5 : Get the code copy and Paste thefollowing code in the page where you’d like the Custom Search element to appear. Note: For the most cross-browser compatibility, it is recommended that your HTML pages use a supported doctype such as <!DOCTYPE html>. CSS hover effects require a supported doctype.

Custom Search 7

Step-6 : Paste the Custom Search element code into your HTML document file and then test it live from the page, or go back to your Google custom search control panel to manage the search engine; you can run a preview test by just clicking on the search engine in the list you’ve created or you can also add the CSE code in the “Text” which is in >>Apperance>>widget>>text.

Widgets ‹ CatchMyPage


Google CSE is a great tool to enhance your site.And visitors also will get a refined search results and Moreover, you can also monetize your site results using Google Adsense . Hope this tutorial was helpful and that you were easily able to implement Google CSE on your website. If you get any problems, let me know in the comments.

No comments to show.

Leave a Reply

Your email address will not be published. Required fields are marked *

Over 2,000,000+ Readers

Get fresh content from CatchMyPage