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:

1. From Google Adsense Console (on Crunchify we are using this approach)
2. 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

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

Step-5

Click save and get both codes

• Search Box Code
• Search Result 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

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;
}

Now let’s take a look at both queries:

Approach-1:

• https://crunchify.com/search/?cx=partner-pub-xxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2:

• https://crunchify.com/search/?q=Google%20Apps (This will not work as we do have .htaccess rule in place)

As you see above – both approaches have different query parameters.

What next?

Please make sure to update Google’s Sitelinks Search box’s JSON-LD Schema URL.

Validate WordPress Sitelinks Search Box JSON-LD Schema.org Markup URL

The post How to Include Google Custom Search Engine (CSE) to WordPress Site without Plugin (Two different approaches) appeared first on Crunchify.

More Related Articles For You...

1. How to easily change WordPress Login page Logo and URL?
2. Cloudways: Nextgen Managed WordPress Cloud Hosting Service Review and User Guide
3. How to Validate WordPress Sitelinks Search Box JSON-LD Schema? Modify Search Page URL Tips