How to Add Search bar functionality in Ghost CMS Help of Google Custom Search

Ghost CMS very easily integrates with google's custom search bar. You copy and paste code in your ghost theme and update. After a second google search bar appears on your website.

In this article, I'm showing you a search bar functionality with a Ghost Casper theme.

Let's start it

1. Open Google Programmable Search Engine
2. Add code in your Theme

Open Google Programmable Search Engine

Firstly go to the Programmable Search Engine dashboard create an account help of google when your account creates successfully. Google Programmable Search Engine dashboard looks like in the browser.

Follow the steps

• Add Search Engines
• Fill Information Form
• Search Engine Create Successfully

Add Search Engines

If you have any engines, show them here. otherwise, you create your search engine click to add button

Fill Information Form

In This Page, you fill your search engine name. You fill in any name which you like. After adding your website, click to add button. Your website adds successfully. Now click on to create button.

Search Engine Create SuccessFully

When your search engine creates successfully, you see a confirmation page, copy your code, and paste it inside your Theme.

Customize the option shows you all customization for your search engine, and the preview page tells how to look at the search bar like your show on your website.

Code breakdown

Script tag allows adding a search bar to your website. in a script tag, also have your Programmable search engine unique id. That id help in the customization of search bar functionality on the Google dashboard.

Add code in your Theme

Firstly open your Ghost Casper theme or any other theme you like and open it in your favorite code editor(IDE).

Copy Code

<script async src="https://cse.google.com/cse.js?cx=5440b4783041f4ed2"></script>
<div class="gcse-search"></div>

Paste code

You open the Casper theme in the code editor and open default.hbs file in the code editor. You paste code in the header section.

I open default.hbs file and paste custom google search bar code after navigation (Line number 21) div in Casper theme.

You show the search bar in different places. You paste code according to your thought. But logic is the same for all ghost themes.

Add CSS

<div class="gcse-search"></div>

You target the gcse-search class and apply your CSS properties to the Casper theme. Make sure you write and paste your CSS into the following path.

screen.css
.gse-searchbox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 400px;
}

Apply CSS in Ghost their many ways. but I'm showing you a common way in the image to apply your custom CSS. Most of the CSS changes in the google dashboard with one click. if you are not satisfied. then your apply custom CSS add an inbuilt folder.

In other ways, you also create a CSS separate file built-in folder and attach it to your ghost theme.

Conclusion

I think Google Programmable Search Engine fan is easy to integrate with Ghost and any other website. But google search functionality work only when your website adds on the google webmaster tool. Otherwise, your search is not very good for other users. Maybe after some time, ghost cms official launch search functionality for Theme. Right now, ghost cms do not do that. But use ghost API, you also build custom search functionality for your Theme. in the next article, we also discuss that.