How to Include Google Custom Search Engine (CSE) to WordPress Site without Plugin (Two different approaches)

Significance of Search Functionality and Why we should use Google Custom Search on WordPress?

Google or Bing? No doubt about it. Google is the best search engine and Search pioneer in the globe. There is no reason you shouldn’t use Google Custom Search on your WordPress blog. It will give best search experience to your blog readers too. In this tutorial we will go over simple steps to have Custom Search available for your WordPress site.

Under Alphabet (https://abc.xyz) umbrella Google is a standalone search company. So, what does that mean to all consumers? Well, I believe there isn’t anything going to change for us, except the reporting structure got changed and definitely NYSE stock name.

Why do we need CSE (Custom Search Engine)?

It’s very critical to provide better search functionality on site. Usually main page contains post less than 10 but in most of the cases your blog users may get best related articles from Search only.

Plus much Faster Search Result than default WordPress Search + Good for your site’s SEO as Google knows this result list from search query and doesn’t add it to duplicate content list.

There are `two ways` you could configure Google Custom Search:

From Google Adsense Console (on Crunchify we are using this approach)
From Google Custom Search Panel

`Configuration Approach-1.` From Google Adsense console

Step-1

Go to Adsense
Click on My ads tab
Click on Search -> Custom search engines
Click on New Custom Search engine

Create New custom search engine - Google Adsense

Step-2

Provide Name. It’s free form text
Select Only sites I select
Specify your website name

Step-3

Modify below options as per you need

Custom Channel
Search box style
Ad CSS style

Step-4

Under Search results option make sure to have below settings correct

Search results: on my website
URL where search results will be displayed: Your blog’s search page

Crunchify Tips on setting Google Custom Search Engine

Step-5

Click save and get both codes

Search Box Code
Search Result Code

Adsense Search Result and Search Box code

Step-6

Go to your site and create /search page

Step-7

Under HTML section paste the search result code and click save.

Step-8

Go to Appearance -> Widgets section and paste search box code and click save. Modify search box CSS as per your need. Here is a custom CSS which I’m using on Crunchify.

.crunchify-search {
    width: 76% !important;
    padding: 9px 6px 7px 6px !important;
    max-width: 275px;
    margin: 10px 0px 0px 0px !important;
}

input[type="submit"] {
    background-color: #dd7127;
    border: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 6px 10px;
    width: auto;
    -webkit-font-smoothing: antialiased;
    border-radius: 3px;
}

And you are all set. Try searching keywords and you should see google search result on /search page.

`Configuration Approach-2`. From Google Custom Search Panel

Step-1

Go to https://cse.google.com/cse/all
Click on Add Search Engine

Step-2

Provide your site URL
Click Add

Crunchify-Google-Custom-Search-Engine-Setup

Step-3

Click on you newly created Search Engine
Go to Look and feel Section
Go to Layout Tab
Select Two Page
Click Save and Get Code

Step-4

Get code for search box
- Put it into sidebar
Get code for search result
- Create page http://<yourblog.com>/search
- Put code into this page

Step-5

Try search for keyword like Google Apps and you should see result like this.

Result Panel:

Step-6

Some time back on Crunchify we have modified the result with below custom CSS:

/* Change Search Button Code  */
input.gsc-search-button {
    padding: 10px !important;
    height: 35px !important;
    border-color: #c12129 !important;
    background-color: #c12129 !important;
    color: #fff !important;
}

/* Change Search Button Hover Color */
input.gsc-search-button:hover {
    border-color: #444 !important;
    background-color: #444 !important;
}

/* Change Bottom Margin after each result */
.gsc-control-cse .gsc-table-result {
    margin-bottom: 10px !important;
}

/* Hide URL from search result */
.gsc-url-top, .gsc-url-bottom {
    display: none !important;
}

/* Change input field look and feel */
input.gsc-input {
    padding: 10px !important;
    margin-left: 0px;
    background-position: right center !important;
    background-repeat: no-repeat !important;
}

/* Hide number of result count */
.gsc-result-info {
    display: none;
}
.gs-webResult:hover {
    background-color: #eee;
}

/* Change mouse hover result background change */
.gsc-cursor-page {
    font-size: 1.1em;
    padding: 3px 7px;
    border: 2px solid #eee;
    background-color: #eee !important;
}

/* Change search result heading font size change */
.gsc-result .gs-title {
    height: 2.0em !important;
    font-size: 16px !important;
}

.gs-result .gs-snippet {
    line-height: 19px !important;
}

/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div.gsc-clear-button {
    display: none !important;
}
td.gsc-clear-button {
    width: 0px !important;
}
td.gsc-input {
    padding-right: 1px !important;
}